Reciclaje y animación de iconos con CSS
En un pasado no tan lejano, estábamos aprendiendo técnicas revolucionarias para guardar HTTP Request y KBs por igual mediante el uso de sprites de imágenes. Estos sprites consistían en decenas o incluso cientos de íconos organizados en un archivo de imagen que luego se empalmaba y se servía en una variedad de formas a lo largo de un sitio web.
Hemos hecho un buen uso de la técnica, y prácticamente todos los sitios relacionados con la escalabilidad la emplean.
Gracias a la llegada de las propiedades de Transformación y Transición de CSS3, podemos llevar esto un paso más allá y usar unas pocas líneas de código concisas, transformar plantillas de iconos base en nuevos iconos para usar en el futuro e incluso agregar animaciones a la mezcla para obtener una bonificación adicional !
La técnica es tan simple e intuitiva como los sprites de imágenes, y permite el uso para desplegar rápidamente nuevos íconos sin tener que alterar los sprites de la imagen.
Reciclando iconos con CSS
Eche un vistazo a este sprite tomado de la biblioteca jQuery UI. Mientras navega, notará que muchos de los íconos que se enumeran aquí son en realidad variaciones en las plantillas base. Un solo icono podría representarse de una docena de formas diferentes y colocarse en el mismo archivo. Muchos iconos son literalmente versiones giradas de sus padres. La buena noticia es que al utilizar CSS podemos emplear exactamente la misma técnica sin tener que incluir las variaciones en el sprite de la imagen.
En el ejemplo anterior, podemos tomar un solo ícono y recrearlo para nuestros propios fines, por ejemplo, un cheurón simple de la segunda fila hacia abajo. Con la propiedad de transformación, podemos girar este chevron 45deg, 90deg, 180deg, de forma obvia e indefinida para crear muchas formas diferentes a partir de la misma plantilla.
Plantilla base (flecha arriba):
El siguiente código sacará el chevron hacia arriba del sprite de la imagen, y servirá como nuestra plantilla base.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Crear un flujo correcto
Transformando nuestra flecha 90deg apuntará la flecha a la derecha, como se muestra a continuación:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Crear la flecha superior derecha
Gírelo solo 45 grados y obtendrá una pequeña flecha en la esquina superior derecha:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
Es así de simple. Usando este método, podemos comenzar con un simple ícono de dos íconos, y con muy poco esfuerzo crear seis veces más íconos para usar en nuestra interfaz, que por supuesto es solo el comienzo de lo que se puede hacer.
¡Algunas transformaciones, un posicionamiento elegante y nuestra familia de iconos han crecido un poco!
Agregar animación a la mezcla
Para una experiencia increíble, podemos agregar animación a la mezcla. No solo transformaremos los íconos, sino que los transicionaremos para que la transformación sea visible para el usuario. Veamos otro ejemplo, comenzando con el signo más visto arriba.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Una fácil rotación de 45 grados transformará nuestro icono más en un útil icono de cierre.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Ahora que nuestra transformación está funcionando correctamente, podemos agregar una transición a la mezcla. Imagine que tiene una función en su sitio para compartir la página actual a través de una variedad de redes sociales. Al hacer clic en el ícono más , se abrirá la lista de opciones para compartir, y mientras la lista se está abriendo, las transiciones más se convierten en un ícono de cierre a través de una sutil animación. La mejor implementación que he encontrado para esto es en la aplicación para iPad de FontBook. Verifique su implementación:
Es estelar Echemos un vistazo a cómo hacer que esta belleza cobre vida. Comience usando nuestro icono más creado arriba. Para animarlo, simplemente agrega la propiedad de transición a tu ícono. En nuestra transición, especificamos la propiedad (transformación), la duración (0.2s) y, finalmente, qué función de temporización queremos usar (lineal).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Nuevamente, es así de simple. No solo podemos crear nuevos iconos para nuestra biblioteca con solo CSS, ¡podemos animar y dar vida a cualquier elemento en particular!
Usando opacidad para más variedad
La pieza final de reciclaje de iconos se juega en forma de propiedad de opacidad. La duplicación de sus iconos centrales para blanco y negro le permitirá generar una cantidad infinita de tonos / variantes para usar en todo su sitio o aplicación.
Una variante de cuatro imágenes (como se ve a continuación) del sprite anterior podría usarse fácilmente para crear una docena de tantos íconos, y al aumentar o disminuir la opacidad, puede colocarlos donde sea necesario y aún así tener un aspecto excelente.
Es hora de volverse verde: reciclar con CSS
A medida que CSS3 ha ganado tracción, mi copia de Photoshop CS5 ha comenzado a acumular polvo, ¡y por una buena razón! Esta técnica de reciclaje de sus iconos le permite implementar continuamente nuevas versiones y variantes en sus interfaces sin tener que abrir los archivos fuente y agregar iconos engorrosos a los sprites en constante expansión.
El tiempo de mantenimiento disminuye, ¡y su tiempo dedicado a leer libros como la Semana laboral de 4 horas aumenta! Es todo oro
Por supuesto, la desventaja más obvia de todo esto es la compatibilidad con el navegador, sin embargo, con la reciente presión de, bueno, que todos usen navegadores modernos, podremos aprovechar las nuevas y emocionantes técnicas progresivas. No dude en buscar algunos ejemplos de esta técnica.
¿De qué otras maneras ha podido reciclar los activos de su sitio web?