domingo, 2 de octubre de 2011

Oloblogger

Oloblogger


Generador de iconos de carga (loader) con CSS3

Posted: 01 Oct 2011 06:21 AM PDT

Hay muchos elementos distintivos del CSS3 como las sombras (box-shadow, text-shadow), cajas redondeadas (border-radius), gradientes (gradient), transformaciones (transform) y transiciones (transition). Unas nos permiten poder simplificar mucho el código y evitar el uso de más imágenes de las necesarias y otras nos ayudan a acercarnos a efectos que antes estaban reservados para otros lenguajes de programación distintos de HTML, como Flash y JavaScript.

Pero hay uno con el que un diseñador avezado, hace cosas que poco tiempo atrás parecían imposibles de conseguir sólo con hojas de estilo. Son las animaciones, que se consiguen con la propiedad ANIMATION.

En el enlace anterior podéis ver las especificaciones de la propiedad, que es una extensión de TRANSITION, pero si estáis como yo, todavía en una fase muy inicial de aprendizaje de este estándar, seguramente también os suene a chino... o a lemerig, para los afortunados que sepan chino.

Afortunadamente, cada vez salen más artículos sobre cómo hacer cosas puntuales e incluso sitios con generadores que nos facilitan la tarea.


En esta ocasión el que hemos descubierto nos facilita el código necesario para crear una pequeña animación que simula iconos típicos de Ajax que se muestran mientras algo se está cargando. Es CSSload y en ella encontramos hasta 8 modelos distintos que podemos configurar en cuanto a tamaño, colores y velocidad. Nosotros ajustamos esas opciones y la páginas nos facilita el código CSS y el HTML necesario para que se vea.

El ejemplo está ahí mismo en forma de círculo rojo dando vueltas por el perfil de una circunferencia naranja. Aunque parezca un GIF animado, no lo es. Sólo se trata de CSS. La prueba la tendréis si intentáis descargar la imagen. Simplemente no hay imagen, son líneas, bordes de cajas redondas que posteriormente se han animado.

Si no lo ves es porque tu navegador está algo desactualizado (Firefox, Chrome, Safari) o porque usas Internet Explorer, aunque parece que la versión 9 ya empieza a leer algunas de estas cosas.

La forma más fácil de ver qué propiedades soporta tu actual navegador es accediendo a la página de haz.io, que te mostrará en forma de check list, una gran variedad de las nuevas tecnologías que vienen ya están aquí, referentes a HTML, CSS y Javascript.

Este último es otro ejemplo sacado de CSSload.





No hay comentarios:

Publicar un comentario

Correo Vaishnava