Cristalab |
| Crear plumaje con pincel de plumas en Illustrator Posted: 05 Jul 2012 11:14 AM PDT En este videotutorial de Illustrator, crearemos un sencillo pincel de plumas, que nos ofrecerá añadir más detalle en los personajes que tengan plumaje, para lo que usaremos una serie de pautas en la creación del motivo y la posterior modificación de determinados valores de color e iluminación, junto a efectos específicos.  Saludos.
|
| Dibujo y animación de Sharingan con CSS3 Posted: 11 Jun 2012 04:57 AM PDT Saludos, este es mi primer tutorial en Cristalab. Los seguidores del animé y manga conocerán a Naruto, en ese universo existe algo llamado "Sharingan", para resumir, es una forma y color muy particular que toman los ojos. En éste tutorial lo crearemos sólo con CSS3.  La imagen anterior expone el objetivo (es decir, crear algo lo más parecido pero no idéntico  ) y cómo estará estructurado. Cabe decir que éste tutorial tiene como fin ser un experimento CSS3, antes de continuar sería mucho mas breve el código CSS si se utiliza prefixfree, hay un artículo que explica de qué trata eso. A continuación el HTML:Código : <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"/> <title>Sharingan pure CSS3</title> <link rel="stylesheet" type="text/css" media="all" href="sharingan.css"/> <script type="text/javascript" src="prefixfree.min.js"></script> <body> <!--Borde negro exterior--> <div id="sharingan"> <!--Iris --> <ul> <!--Pupila--> <li> </li> <!-- Anillo que completa al iris--> <li class="ring"> </li> <!--Aspas del Sharingan --> <li class="aspa sup"> <p> </p></li> <li class="aspa der"> <p> </p></li> <li class="aspa izq"> <p> </p></li> </ul> </div> </body> </html> Dividiremos el CSS en dos partes, la primera con los estilos para hacer el ojo en su estado inactivo/activo (al hacer :hover se mostrará como está en la primera imagen) y la segunda parte la animación CSS para mover las aspas de forma más o menos circular. Código : /*div que agrupa todos los elementos a utilizar y que sirve como borde negro exterior*/ div#sharingan { height: 226px; width: 255px; margin: 0 auto; padding: 5px 0; border:1px solid; background: #000; box-shadow:0px 0px 24px rgba(0,0,0,0.6); border-radius: 132px / 117px 117px 117px 117px; } /*Elemento ul con borde circular y que será una parte del iris, pero en su forma inactiva tiene un fondo de color #5A6992 luego al hacer hover en el cambia a #B20000, color típico del sharingan. Está posicionado de forma relativa, tiene una serie 3 box-shadow para recrear una forma esférica un poco más realista y finalmente una transición CSS3 para la propiedad background-color */ ul { /*Aquí pueden usar otros colores excepto el rojo por ejemplo: #383838 */ background-color: #5A6992; margin: 0 0 0 8px; width: 199px; height: 224px; position: relative; top: 1px; border-radius: 139px 139px 139px 139px / 124px 124px 124px 124px; box-shadow:3px 0px 58px rgba(255,255,255,0.5) inset,0px 0px 20px rgba(255,255,255,0.1) inset,0px 0px 9px 7px rgba(0,0,0,1); transition:background 0.5s ease-in; } ul:hover { background-color: #B20000; } ul li { list-style:none; position: relative; background: transparent; } /*Pupila*/ ul li:first-child { background:#000; left: -9%; top: 39%; width: 51px; height: 51px; margin: 0 auto; box-shadow: 0 0 25px rgba(0,0,0,0.7); border-radius: 68px / 64px; /*Escalado a 0.5 ya que es el tamaño de la pupila en su estado normal y una transición con cubic-bezier(0, 1, 1, 2) para darle un efecto bounce*/ transition:transform .5s cubic-bezier(0, 1, 1, 2); transform:scale(0.5); } /*Transición de la pupila al hacer :hover, que con transform:scale(1) devuelve a li:first-child a su escala original y con el efecto rebote ya mencionado */ ul:hover li:first-child { transition:transform .5s cubic-bezier(0, 1, 1, 2); transform:scale(1); } /*Ultima parte del iris, .ring es el anillo por el que se moverán de forma circular las aspas del sharingan,con una transición de la propiedad transform para cuando vuelva a su estado original. */ .ring { top: 0; left: 9%; height: 125px; width: 125px; box-shadow: 0 0 74px rgba(255, 255, 255, 0.3), 0 0 17px rgba(255, 255, 255, 0.3) inset,0 0 5px rgba(0,0,0,0.3) inset; border-radius: 70px 70px 70px 70px; transition:transform 0.1s ease-in; } /*Transición del anillo del iris el cual se escala a 1.1 al hacer hover en ul*/ ul:hover .ring { transition:transform 0.1s ease-in; transform:scale(1.1); } /* Las 3 aspas del sharingan, mejor dicho una parte de ellas: .aspas son los 3 elementos li que con los siguientes estilos formaran un circulo de 25px, posicionados de forma relativa pero los valores en top y left son sólo del aspa superior (al igual que .aspa p) y con su respectiva transición para la propiedad background. */ .aspa { top: -61%; left: 68px; height: 25px; width: 25px; border-radius: 50px 50px 50px 50px; transition:background .5s ease-out; } /*Punta de las 3 aspas (elementos p dentro de los li.aspa), que se logran gracias a las propiedades border-radius y transform: skew() dándole una forma parecida a las puntas de la primera imagen y posicionadas de forma correcta por encima de su elemento padre y con una transición para la propiedad background*/ .aspa p { position: relative; top: -43px; left: 4px; border-radius: 197px 0px 371px 273px; transform: skew(-46deg, -10deg); transition:background .5s ease-out; } /*Al hacer hover en ul pues se le aplica un fondo negro tanto a las aspas (li.aspa) como a las puntas de las aspas (li.aspa p) para hacerlas "visibles"*/ ul:hover .aspa, ul:hover .aspa p { background-color:#000; } /*.der e .izq son las clases para las aspas derecha e izquierda, que ya con posicionadas de forma relativa se rotan cada una en el angulo deseado con transform rotate() para que sea lo mas parecido a un sharingan */ .der { left: 120px; top: -62px; transform: rotate(69deg); } .izq { left: 15px; top: -87px; transform: rotate(200deg); } Finalmente, el código CSS para la animación: Código : /*Hasta este punto ya se tiene un sharingan nivel 1 completo, pero le falta su movimiento circular, éste se logra definiendo 3 keyframes que apliquen 'transform: translate(px,px) rotate(deg)' a cada una de las aspas (.sup,.der,.izq) en 7 pasos siguiendo la trayectoria de .ring */ @keyframes aspa1 { 0% { transform: translate(0px,0px) rotate(0deg); } 50% { transform:translate(59px,28px) rotate(28deg); } 60% { transform:translate(51px,100px) rotate(68deg); } 70% { transform:translate(4px,129px) rotate(146deg); } 80% { transform:translate(-54px,98px) rotate(197deg); } 90% { transform:translate(-67px,53px) rotate(255deg); } 100% { transform: translate(3px,-1px) rotate(349deg); } } @keyframes aspa2 { 0% { transform: translate(0px,0px) rotate(75deg); } 50% { transform:translate(-36px,17px) rotate(92deg); } 60% { transform:translate(-106px,2px) rotate(205deg); } 70% { transform:translate(-112px,-60px) rotate(248deg); } 80% { transform:translate(-49px,-103px) rotate(354deg); } 90% { transform:translate(11px,-54px) rotate(387deg); } 100% { transform: translate(5px,0px) rotate(441deg); } } @keyframes aspa3 { 0% { transform: translate(0,0) rotate(200deg); } 50% { transform:translate(-8px,-34px) rotate(219deg); } 60% { transform:translate(55px,-98px) rotate(350deg); } 70% { transform:translate(116px,-43px) rotate(410deg); } 80% { transform:translate(106px,3px) rotate(442deg); } 90% { transform:translate(55px,27px) rotate(503deg); } 100% { transform: translate(2px,1px) rotate(551deg); } } /*Aplicando una animación con dirección normal, con un retraso de 1s, una duración de 0.5s, realizando 2 vueltas o ciclos y de forma lineal */ ul:hover .sup { animation-name: aspa1; animation-duration: .5s; animation-iteration-count: 2; animation-timing-function: linear; animation-delay:1s; animation-direction: normal; } ul:hover .der { animation-name: aspa2; animation-duration: .5s; animation-iteration-count: 2; animation-timing-function: linear; animation-delay:1s; animation-direction: normal; } ul:hover .izq { animation-name: aspa3; animation-duration: .5s; animation-iteration-count: 2; animation-timing-function: linear; animation-delay:1s; animation-direction: normal; } Este ejemplo ha sido testeado en Chrome, Firefox y Opera, donde sólo en los 2 primeros funciona la animación, por supuesto pueden verlo en acción desde el siguiente enlace: Sharingan CSS3. Bueno así finaliza mi primer tutorial en Cristalab, espero que les haya gustado y cualquier consejo o sugerencia será bien aceptado. P.S: En unos días publico cómo realizar un Sharingan nivel 2 (mejor conocido como Mangekyou Sharingan) haciendo sólo algunas modificaciones del código previo.
|
| You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario