CSS3 Starbursts es un experimento que no funcionará en Internet Explorer, que en Firefox 3 se mostrará parcialmente y que en Chrome y Safari se ve espectacular asíq ue habra que seguir esperando que las nuevas versiones de los navegadores nos permitan jugar con las animaciones ... falta poco, paciencia.
Las reglas de estilo son complejas para estar escribiendo acá pero, todas ellas se encuentran en el demo que puede descargarse desde la página del autor.
Un simple ejemplo del último de ellos; el CSS dice esto:
Un simple ejemplo del último de ellos; el CSS dice esto:
.starburst7 {
color: #FFF;
display: block;
font-family: Arial, sans-serif;
font-weight: bold;
height: 3em;
text-align: center;
text-decoration: none;
width: 8em;
}
.starburst7 span {
background:#00CD00;
display: block;
height: 2.5em;
width: 8em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
rotation: -45deg;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
text-shadow: 1px 1px 1px #000;
}
.starburst7:hover {
background: transparent;
}
.starburst7:hover span {
-webkit-transform: rotate(52.5deg);
-moz-transform: rotate(52.5deg);
rotation: 52.5deg;
-webkit-transform: translate(1em, 0);
-moz-transform: translate(1em, 0);
translate(1em, 0);
}Y el HTML esto otro:
<a href="#" class="starburst7"> <span><span><span><span><span> <span><span><span><span><span> <span> <span><span><span><span> <span>NEW CSS3<br />Starbursts!</span> </span></span></span></span></span> </span></span></span></span></span> </span></span></span></span></span> </a>
¿Loco? Muchísimo.
9 comentarios:
:o que maravilla, ahora lo estoy viendo en Chrome y se ve espectacular, en firefox parece el efecto del rollover, y en Chrome parece flash!, me encantaron los efectos de los últimos tres; para crear menús, vendrían excelentes, y sin usar scripts, imágenes, alojamiento externo, programas de edición etc. :) te suena esto: ¿dónde firmo? :D
Precioso Jmiur, ni hablar en IE :S
Si buenisimo..... muy simpático... :) Me encanta todo lo que tiene que ver con cssno falla jamás. Cómo dice Karla... simple sólo código. :9
Ya para el año que viene, esas propeidades de animación funcionarán tambien en Firefox así que nos iremos acercando a lo ideal y habrá mucho para divertirse :D
Espectacular, demasiado bueno. Para que nos demos cuenta que el CSS3 llegó con todo y así se le puede dar más apariencia al blog sin necesidar de usar archivos de imagen.
Gracias JMiur por hacer tan explícito el post :D
Es para divertirse un rato, Roster :D
Desgraciadamente tengo que preguntar: ¿Y para qué sirve si no se puede utilizar con IE? Personalmente utilizo Firefox y nunca IE pero hago algunas web y quiero que funcionen perfectamente en "casi" todos los navegadores.
Gracias por todo!!!!!
Gonzalo.
http://mipropiaarroba.com
Qué susto me dio la última jajajajaja
Gem@:
¿Susto? :D
Gon:
Todos los navegadors son distintos y serán distintos siempre. Cada uno tendrá sus características, bondades y sus falencias. De hecho, esto que se muestra acá, funciona de manera parcial en Firefox así que, simplemente, basta diseñar los sitios para sacarle el mejor partido a cada sistema, adaptándose a sus características y peculiaridades.
¿Para que sirve esto? para eso.
No existe lo infinito y no existe lo perfecto, sólo existen limitaciones que se deben aprender a utilizar a nuestro favor.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...