Colección de iconos estilo plano en CSS

Si en el pasado lo que variaban eran los estilos de forma casi constante, en este último tiempo nos encontramos con que lo que muta son los formatos. Asimismo también lo hacen las maneras de implementar elementos gráficos en cualquier tipo de diseño. Debemos tener en cuenta no solo las nuevas tendencias sino las necesidades que surgen de ellas. Esta colección de iconos estilo plano en CSS abre nuevas opciones que hasta ahora no habíamos tenido en cuenta.

La motivación puede surgir de la mera experimentación o con fines de ahorro de recursos, lo bueno de todo esto es que a medida que pasa el tiempo se van descubriendo nuevas formas de hacer las cosas y plantear desde allí recursos y herramientas que contemplen otras posibilidades que hasta el momento no se nos habían ocurrido.

Esta colección de iconos no se parece a ninguna de las que he compartido con ustedes, y la diferencia, no radica en la finalización estética ya que encontrarán muchas alternativas estilo plano en artículos pasados, sino que se basa en la forma de composición de cada uno de ellos y el resultado final que es realmente sorprendente.

Colección de iconos estilo plano en CSS

Descargar CSS3 Flat Icons | Codepen

Todos estos íconos se encuentran elaborados completamente con CSS, este hecho no solo ahorra el peso de transferencia de las imágenes, sino que también nos brinda opciones de personalización y edición completas.

Esta idea de utilizar composiciones de generación de imágenes responde a la capacidad de elaborar diseños adaptables para las distintas resoluciones que existen. Además de tener absoluto control sobre la visualización de las mismas. Con esto último también se consideran las animaciones que en este formato son relativamente fáciles de implementar.

Deberemos tener en cuenta también, que algunos exploradores que aún se utilizan, no cuentan con las posibilidades de visualización adecuadas. Por ende, al momento de implementar este tipo de elementos, es nuestra obligación, chequear que todo se vea correctamente y sin fallas.

Implementación de iconos estilo plano en CSS

Para implementarlos solo tienen que copiar el código CSS y respetar las clases utilizadas en el HTML. Es sumamente simple de utilizar. Pueden ir guiándose con los nombres para editar cada uno de los componentes de los iconos. Tengan en cuenta que cada instancia tiene sus propiedades. Por lo que deberán extraer el total de las características sin perder calidad visual ni elementos en el camino.

Puede que en principio les cueste hacerse amigos de este tipo de dibujo. Está claro que en estilos más elaborados puede tener algunos problemas. Aquí en su mayoría se utilizan formas básicas. Sin embargo creo que es un buen punto de partida para más y más experimentación. Lo que puede llevarnos a nuevas y mejores formas de implementación.