Comunidad de diseño web y desarrollo en internet online

Dibujar y animar Mangekyou Sharingan Izuna con CSS3

Como había dicho al final de mi tutorial anterior, hoy diseñaremos un Mangekyō Sharingan con CSS3, específicamente el de Izuna. Para realizar esto necesitan el código HTML y CSS del articulo anterior y añadir prefixfree. A continuación una imagen de lo que que se desea lograr:




Código HTML:


Código :

<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="utf-8"/>
      <title>Mangekyou Sharingan Izuna CSS3</title>
      <!--Hoja de estilos del artículo anterior-->
      <link rel="stylesheet" type="text/css" media="all" href="sharingan.css"/>

      <!--Hoja de estilos para crear el Mangekyou Sharingan de izuna-->
      <link rel="stylesheet" type="text/css" media="all" href="izuna.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 Mangekyō Sharingan -->
            <li class="aspa sup">&nbsp;<p>&nbsp;</p></li>
            <li class="aspa der">&nbsp;<p>&nbsp;</p></li>
            <li class="aspa izq">&nbsp;<p>&nbsp;</p></li>
         </ul>
      </div>



</body>
</html>


Ahora el CSS,recuerden que éste código depende del código del artículo anterior (exceptuando la animación), luego que lo tengan (hoja de estilos "sharingan.css") deben añadir en la hoja de estilos "izuna.css" lo siguiente:

Código :

/*---------------Izuna---------------*/
   /*Color de fondo del iris y la pupila*/
   ul,ul:hover,ul li:first-child  {
      background: #A00;
   }


   /*Para que la pupila quede por encima de los demás elementos*/
   ul li:first-child {
      z-index: 5;
   }

   /*Eliminando la sombra del anillo y escalándolo
   a 1.3*/
   .ring {
       box-shadow:none;
       transform: scale(1.3);
   }

   /*Escalando a 1.4 el .ring al hacer ul:hover
   con una pequeña transición en la propiedad 
   transform*/
   ul:hover .ring {
      transition:transform 0.1s ease-in;
      transform:scale(1.4);
   }

   .ring,.aspa p {
      background: #000;
   } 

   /*Quitando los bordes redondeados 
   y las transformaciones a .aspa,.aspa p,
   es decir vuelven a su estado original*/
   .aspa,.aspa p {
       border-radius: 0;
       transform: none;
   }

   /*Ésta regla CSS para centrar las puntas
   de las aspas con el .ring escalado*/
   .aspa p {
       left: 0;
   }

   /*Las aspas tendrán una 
   anchura de 57px y... */
   .sup,.der,.izq {
      width: 57px;
   }

   /*Luego cada aspa
   será reposicionada,y
   se rotaran .der e .izq
   para que queden en el 
   angulo correcto con
   respecto a .ring*/
   .sup {
       left: 51px;
       top: -168px;
   }

   .der {
       left: 137px;
       top: -69px;
       transform: rotate(24deg);
   }

   .izq {
       left: -18px;
       top: -79px;
       transform: rotate(58deg);
   }

   /*.... y las puntas una altura de 57px */
   .sup p,.der p,.izq p {
       height: 57px;
   }

   /*Por si acaso,recuerda inhabilitar las animaciones*/
   ul:hover .sup,ul:hover .der,ul:hover .izq {
      animation:none;
   }


Y así finaliza éste tutorial. El trabajo terminado fue testeado en Chrome, Firefox y Opera.

Pueden acceder a un ejemplo desde aquí.

P.S: Culminaré con esta "ronda otaku" con el Rinnegan, que con algunos cambios en el CSS del primer artículo se puede lograr de forma sencilla.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate