Como Crear Las Esferas de Dragon Ball en CSS3
En este ejemplo aprenderás como crear las poderosas esferas de DragonBall utilizando solo CSS3.
El documento HTML, contiene la siguiente estructura y es bastante sencilla por lo cual omitiré su explicación:
 |
| Código HTML |
body{
padding: 2em 5em;
background-image: url(grass.png);
background-attachment: fixed;
background-size: 100% 100%;
}
Después mediante el uso de div con id "container" establecemos que todo lo que vaya dentro del el se deberá de ubicar en la parte inferior del documento:
#container{
position: fixed;
bottom: 27px;
text-align: center;
}
Bien ahora si creamos el diseño de nuestra esfera mediante CSS3, los puntos calve dentro de esta esfera el utiliza border-radius, un background con radial-gradient y para obtener el efecto de reflejo del luz utilizaremos box-shadow:
.ball{
width:100px;
height:100px;
border-radius: 50%;
background: radial-gradient(rgba(255,10,10,0.6) 8%, rgba(255,255,10,1));
text-align: center;
border: 0px solid yellow;
margin: 1.5em;
box-shadow: inset 4px 3px 10px 0px rgba(255,255,255,0.55);
transition: 1.5s;
cursor: none;
position: relative;
float: left;
}
Ahora agregamos el selector de clase :hover para detectar cuando el cursor se pose encima de alguna de las esferas y esta se agrande:
.ball:hover{
background: radial-gradient(rgba(255,10,10,0.6) 15%, rgba(255,255,10,1));
transform: rotate(360deg) scale(1.8,1.8) ;
}
Y por ultimo para darle un poco de estilo a las estrella agregamos el siguiente código:
.star{
color: rgba(255,0,0,0.5);
font-size: 1.2em;
text-align: center;
line-height: 0.8em;
letter-spacing: 1px;
}
Y listo así puedes pedir tus propios deseos a "Shen Long", si deseas descargar el ejemplo completo puedes dar clic aquí.
Comentarios