Comunidad de diseño web y desarrollo en internet

Círculo cromático con múltiples sombras en CSS3

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.

Publica tu comentario

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