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"> <p> </p></li> <li class="aspa der"> <p> </p></li> <li class="aspa izq"> <p> </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.
egonzalez :
Gracias
Por locky el 13 de Junio de 2012
locky-blog :
No soy nada diestro en flash