¡Ni gráficos ni fuentes!  Iconos en CSS3 puro con One-Div.com

¡Ni gráficos ni fuentes! Iconos en CSS3 puro con One-Div.com

Los iconos son cada vez más comunes en estos días. Los clientes móviles son responsables de esta tendencia, ya que los íconos son más útiles en entornos donde el espacio en pantalla es escaso. Los íconos lo ayudan a orientarse sin necesidad de demasiado texto (si lo hay). Con el auge de las pantallas de mayor densidad y el aumento de las resoluciones, es preferible pasar de las imágenes de íconos estáticos a íconos vectorizados que pueden escalar a cualquier tamaño deseado sin pixelación ni apariencia borrosa. Este requisito ha iniciado el auge de las fuentes de iconos. Pero espera, hay otra posibilidad con sus propias ventajas. Los iconos se pueden diseñar usando CSS3 puro también…

Galería de iconos en One-div.com

El sitio one-div.com básicamente es una galería de iconos realizada en puro CSS3. La mayoría de los símbolos son típicos de los elementos de la interfaz de usuario que se necesitan con frecuencia, como las conexiones a las redes sociales o la visualización de diferentes medios. Como son CSS puro, solo contienen un color y, en general, tienen un diseño bastante simple.

Iconos con código fuente e información de compatibilidad

Cada icono está equipado con tres botones. Al hacer clic en estos, se le proporciona el código HTML, la fuente CSS y se copia en el portapapeles automáticamente. El tercer botón le permite descargar un paquete que consta de todas las fuentes necesarias listas para implementar. Al pasar el mouse sobre los íconos, puede verificar qué navegadores mostrarán el ícono sin problemas, cuáles tendrán problemas y cuáles no podrán mostrarlo en absoluto. Esta información está disponible para Chrome, Firefox, Safari, Opera e Internet Exploder. Los creadores del servicio trabajan duro para garantizar la compatibilidad con Chrome, Safari y Firefox al menos. En el momento de escribir este artículo, podemos hacer uso de alrededor de 80 iconos en la galería. Como cualquier persona, después de registrarse, puede contribuir al servicio, es probable que veamos muchos más íconos en un futuro cercano.

¡Anima tus iconos!

La gran ventaja en comparación con las fuentes de iconos o SVG es la posibilidad de animar los iconos utilizando efectos de desplazamiento a través de las propiedades de transición o creando una animación de fotogramas clave completa a través de la propiedad de animación. La galería ya contiene algunos íconos animados. Si conoce cómo usar CSS, puede inyectar movimiento en cualquiera de los íconos provistos con bastante facilidad. Solo juega con pseudo elementos como before y after junto con las transiciones css3 y debería estar listo para comenzar.

Conclusión: one-div.com seguro que tiene algunos íconos útiles guardados, pero la mejor parte del servicio es la inspiración que ofrece para sus propios esfuerzos en la creación de íconos utilizando CSS3 puro. ¡Ve a por ello!

(dpe)

#gráficos #fuentes #Iconos #CSS3 #puro #con #OneDivcom

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *