JMiur [E]

Esto es sólo una curiosidad que muestra las posibilidades del CSS3 y que funcionará en Firefox y en navegadores basados en Webkit como Google Chrome y Safari.

Todos hemos visto esas imágenes de carga que giran y hay muchos sitios donde podemos descargarlas o crearlas pero estas, están creadas sólo con CSS y un pequeño script.


Son dos modelos que usan el mismo tipo de código HTML:
<div id="nombreUnico">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
</div>
En estos ejemplos, el nombreUnico de uno es div1 y el del otro es div2.

El CSS tiene elementos en común para ambos y algunos diferentes lo que produce que uno se vea como barras y el otro como círculos:
<style>

/* se posiciona cada div, rotándolos */
.bar1 { -moz-transform:rotate(0deg) translate(0, -40px); -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12; }
.bar2 { -moz-transform:rotate(45deg) translate(0, -40px); -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25; }
.bar3 { -moz-transform:rotate(90deg) translate(0, -40px); -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37; }
.bar4 { -moz-transform:rotate(135deg) translate(0, -40px); -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50; }
.bar5 { -moz-transform:rotate(180deg) translate(0, -40px); -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62; }
.bar6 { -moz-transform:rotate(225deg) translate(0, -40px); -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75; }
.bar7 { -moz-transform:rotate(270deg) translate(0, -40px); -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87; }
.bar8 { -moz-transform:rotate(315deg) translate(0, -40px); -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1; }

/* este es el modelo tipo barras */
#div1 {
height:100px;
position:relative;
width:100px;
-moz-border-radius:100px;
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
#div1 div {
background:#FFF;
height:30px;
left:45px;
position:absolute;
top:35px;
width:10px;
}
/* y la sombra */
#div1 div {
-moz-box-shadow:white 0 0 4px;
-webkit-box-shadow:white 0 0 4px
}

/* este es el modelo tipo círculo */
#div2 {
height:100px;
position:relative;
width:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
#div2 div {
background:#FFF;
height:20px;
left:40px;
position:absolute;
top:40px;
width:20px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
}
/* y la sombra */
#div2 div {
-moz-box-shadow:white 0 0 4px;
-webkit-box-shadow:white 0 0 4px;
}

/* esto, prouce una animación exclusiva en Chorme/Safari */
@-webkit-keyframes rotateThis {
from {-webkit-transform:scale(0.5) rotate(0deg);}
to {-webkit-transform:scale(0.5) rotate(360deg);}
}

</style>
Por último, el script que genera la animación:
<script>
var count = 0;
function rotate() {
var elem1 = document.getElementById('div1');
var elem2 = document.getElementById('div2');
elem1.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
elem1.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
count+=45;
window.setTimeout(rotate, 100);
}
window.setTimeout(rotate, 100);
</script>

REFERENCIAS:kilianvalkhof.com

11 comentarios:

Graciela  

Mira qué bueno Jmiur, eso de crear imagenes sin imagenes, bueno el CSS es bien interesante para jugar, buen viernes :P

Responder
Oloman  

Joder con el CSS3. Lo cierto es que todas las posibilidades que tiene, nos facilitaría mucho la tarea de "programar". La pena es que de aquí a que se pueda considerar generalizado para la mayoría de navegadores instalados, seguramente iremos ya estará saliendo el CSS5 :(

Responder
JMiur  

Graciela: Muy interesante para jugar :D

Oloman: Es cierto pero, relativamente, te diría que apenas salga el nuevo IE en su versión 9 (imagino que el año que viene) la web entera se transformará y se hara muy pero muy divertida :D

Responder
Oloman  

¿De que servirá IE9 mientras sigan coexistiendo bastantes usuarios con IE8, IE7 e incluso IE6? No conozco nada de ese nuevo explorador ¿tanto aportará que habrá una migración masiva o algo así? Quizás me perdí algo...

Por cierto, ¡qué mal tecleé mi anterior mensaje! :O

Responder
JMiur  

Sólo por curiosidad, mira estas dos página:
tester
demos

La primera muestra la evaluación de lo que ahora es IE9 en modo de desarrollo y la segunda es para maravillarse mirando los demos. muchos de los cuales, funcionan en cualquier navegador incluyendo Firefox.

Responder
Oloman  

Bueno, hay que decir que las demos son fantásticas y los tests (aunque sean hechos por ellos mismos), reflejan una compatibilidad total.

Sin embargo, con IE8 no he podido ver la mitad de ellos. Y a eso me refería... Si preparo una página con CSS3 y muchos usuarios siguen sin actualizar sus navegadores, no la podrán ver adecuadamente ¿no?
Insisto en que estoy pez en esto, pero lo que quería decir es que me parecía una lástima tener herramientas y que los navegadores que son capaces de interpretarlas tarden en ser de uso mayoritario. De hecho, me parece que si más gente tuviera ahora mismo las últimas versiones de FF, ya no haría falta IE9 ¿es así o sigo sin enterarme?

Responder
JMiur  

Ni es así ni deja de serlo, en realidad, es subjetivo y es materia opinable así que cualquier respuesta es válida. También pude decirse que IE8 aplica el CSS2 a full cosa que no hace Firefox o que Chrome utiliza mejor el CSS3 etc etc etc. No hay navegadores perfectos y si tenemos suerte, jamás los habrá o caeremos en manos de algún monopolio. Pero, eso, sólo es filosofía :D

En concreto, si IE9 llega a hacer la mitad de lo que promete y si Microsoft se olvida de las estupideces de compatibilidad hacia atrás a las que siempre tuvo demasiado respeto, creo que tendremos un interesante futuro ya que sigue siendo el navegador más utilizado y como tal, de alguna manera, impone un piso.

Si alguien usa IE6, da igual y hay que olvidarse del tema. Supongo que habrá gente que le gusta usar un Ford T y está perfecto, lo que no parece razonable es que con esa reliquia pretenda correr en Fórmula 1 y más aún, que pretenda que todos los demás nos amoldemos a su velocidad.

Por supuesto, todo esto dicho enter comillas y de manera metafórica, claro :D

Responder
Oloman  

¡Me encanta tu ambigüedad! :D, pero ahora sé más o menos lo que querías decir. Gracias por darrme tu opinión.

Responder
JMiur  

Es que, en realidad, creo en el caos de la creación y las líneas rectas siempre me han parecido aburridas :D

Responder
Tato  

Oye, como hago para ponerla en la pagina web? Es decir, ya copie el script y es style, pero no se como colocarlo en la imagen.. Que yo sepa, esto se usa para que cuando la imagen este cargando aparezca la rotación en vez de un espacio en blanco y/o negro o cualquier color..

En fin, como se declara en la imagen? O se hace solo? :S

Responder
JMiur  

Es el código HTML que está luego de "Son dos modelos que usan el mismo tipo de código HTML"
<div id="nombreUnico">
............

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR