Icono de CSS: Pictogramas en CSS puro, opcionalmente animados

La aplicación web de libre uso “CSS Icon” no solo ofrece pictogramas en CSS puro de forma gratuita, sino que también le permite definir transiciones animadas entre dos de los símbolos del paquete.

Adobe Designer con amor por los detalles

Wenting Zhang trabaja como diseñador de UX para Typekit de Adobe. Por lo tanto, no es de extrañar que tenga debilidad por la tipografía y el diseño de iconos. Para facilitar esta pasión, además de su ocupación principal, dirige toneladas de proyectos paralelos en este campo.

El proyecto «Detalle de tipo» es uno de ellos. Aquí, da una explicación meticulosa sobre las características de diferentes fuentes populares y menos populares. Los fanáticos de la tipografía definitivamente deberían echar un vistazo al proyecto.

Su proyecto subrayado.js parece aún más nerd, ya que se trata de encontrar el subrayado perfecto. Como puede ver, este hombre es serio cuando se trata de detalles.

CSS Icon Animate: iconos CSS puros, con opciones de animación morphing

Su proyecto “CSS Icon” también es útil para aquellos diseñadores que no están tan enamorados de los detalles. Aquí, originalmente almacenó 512 pictogramas, hechos exclusivamente con CSS, sin ninguna dependencia, haciéndolos utilizables por sí mismos, si es necesario. La evolución del proyecto no proporciona toda la extensión de los símbolos, pero se ha vuelto mucho más atractivo.

Icono CSS: página de destino. (Captura de pantalla: Noupe)

Icono CSS: fragmentos de código para copiar y pegar

En la versión actual de «CSS Icon», encontrará alrededor de 200 símbolos. Zhang promete agregar más de forma regular. La aplicación web viene con funcionalidades. Al hacer clic en un solo icono, se abre una ventana de detalles en el lado derecho de la descripción general, lo que le permite copiar y pegar todo el código fuente requerido para este icono.

A la derecha, aparece un icono seleccionado en la vista de detalles con todo su fragmento de código. (Captura de pantalla: Noupe)

Para jugar un poco con la configuración, también existe la opción de cambiar a Codepen con los fragmentos y experimentar en el navegador allí.

CSS Icon Animate: luz cambiante entre dos iconos

Acceda a la segunda funcionalidad haciendo clic en la palabra pequeña «animar» en la parte superior izquierda de la ventana del navegador. Ahora, tiene la opción de seleccionar dos pictogramas. El primero se convierte en el símbolo A; el segundo se convierte en el símbolo B.

Ahora, se abre la ventana de detalles que ya conocemos, incluidos los fragmentos de código necesarios. Sin embargo, esta vez, no solo encontrará HTML y CSS, sino también JavaScript.

Elija dos iconos; la animación se crea automáticamente. (Captura de pantalla: Noupe)

Con la opción «Animar», la aplicación web crea transiciones animadas entre los dos iconos seleccionados. En mi ejemplo, la flecha que apunta a la izquierda se transforma en una que apunta hacia la derecha. Esto generalmente funciona con todos los símbolos, pero, como puede imaginar, no parece tan bueno y convincente para todos ellos. Por ejemplo, si deja que el ícono “Nueve en punto” se convierta en “Tres en punto”, la manecilla pequeña del reloj solo se empuja de izquierda a derecha. Por supuesto, por lo general, nadie lo animaría así.

En contraste con eso, la animación del ícono «Batería llena» a «Batería vacía» se ve exactamente como lo esperaría. En cualquier caso, «CSS Icon» es un enriquecimiento para su caja de herramientas de diseño.

Iconos CSS: se pueden utilizar libremente en CC0

Zhang ofrece su proyecto bajo la licencia Creative Commons Zero, que es aproximadamente equivalente a Public Domain, lo que significa que es completamente gratis para cualquier persona y con cualquier propósito. Por lo tanto, puede utilizar los iconos sin preocupaciones, incluso con fines comerciales y, lo que es más importante, modificarlos como desee.

El proyecto está disponible en Github como código abierto. Para usarlo solo, una visita al sitio del proyecto Iconos CSS Hace el truco.