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:
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:
y este el css:
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).
los parámetros usados para "box-shadow" son:
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).
Está recibiendo 3 parámetros en transition:
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.
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.
Estos colores básicos son los mejores para editar las fotos, manejar su contraste u ordenar los colores de la locación en la que fue tomada la fotografía, ahora me gustaría que nos enseñen a descargar mp3 gratis, porque siento que con esa aplicación tendré mas tiempo y megas ahorrados.
ResponElimina