Estaba pesando en una forma bonita de presentar un tutorial sobre el uso de múltiples sombras en CSS3 y se me ocurrió que podía jugar con colores, transformaciones y las múltiples sombras que juegan un papel muy importante ya que gracias a ellas podemos lograr esta animación y efecto que es muy sencillo.
Antes debo aclarar unos puntos:
- para los prefijos propietarios usaré "prefixfree.js".
- usaré una transición y no una animación para que vean las sombras sin el efecto.
Este es el efecto final del tutorial:
Circulo Cromatico CSS3: hagan hover en medio de los círculos de colores para ver la animación.
Ahora el código HTML5 a usar:
Código :
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Circulo cromatico con multiples sombras en css3</title> <link rel="stylesheet" href="estilos.css"/> <script src="prefixfree.js"></script> </head> <body> <section id="circulito"></section> </body> </html>
y este el css:
Código :
#circulito{
background:white;
border-radius:50%;
box-shadow:0 0 200px white,
200px -80px 100px red,
0 -200px 100px orange,
-200px -80px 100px yellow,
-180px 100px 100px green,
0 200px 100px blue,
180px 100px 100px purple;
height:150px;
margin:250px auto;
transition:transform 9s linear;
width:150px;
}
#circulito:hover{transform:rotate(7200deg)}
Como ven el código CSS3 es legible, pequeño y conciso gracias a prefixfree.
Lo único que hacemos es definir una sección de color blanco, centrada y cuadrada( gracias a los bordes redondeados circular).
Múltiples sombras
los parámetros usados para "box-shadow" son:
Código :
box-shadow:"X" "Y" "difuminado" "color";
Normalmente usamos "box-shadow" y sólo aplicamos una sombra, no obstante se pueden aplicar muchas más con una simple "," que las divida.
Se han aplicado 7 sombras ( 6 para los colores y 1 sobre la misma caja en blanco).
Ahora la transición
Está recibiendo 3 parámetros en transition:
Código :
"a quien afecta?" "duración" "tipo de aceleración";
Entonces cuando se produce el evento :hover ocurre una transformación!! La transformación es de rotación y es así como el círculo cromático cobra vida.
Pueden ver otro ejemplo que implementé de múltiples sombras en l4c: hagan hover a los botones de usuarios y verán el efecto.
¿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.
Por v3on el 16 de Enero de 2012
Por claudia el 17 de Enero de 2012
Por v3on el 22 de Enero de 2012
andressleyvass :
Por v3on el 30 de Enero de 2012
andressleyvass :
hace una captura de pantalla y notificalo en este post
andressleyvass :
ahmmm, mira vos, que cosas no ?