Los diseñadores obtienen patrones de fondo SVG gratis de los patrones de héroe
Todos los navegadores web modernos apoyar a SVG y es El formato de imagen más flexible. puedes usar. Pero Diseñando SVGs personalizados desde cero no es tarea facil.
Es por eso que una herramienta como Patrones de héroe Puede ser tan valioso para los diseñadores. Es una biblioteca gratuita de patrones repetibles SVG que tu puedes personalizar Con diferentes estilos, colores y opacidades..
Patrones de héroe tiene bien más de 40 patrones diferentes para elegir y todos están listados a la derecha en la página de inicio. A medida que se desplaza hacia abajo, verá demostraciones en vivo para cada uno y puede hacer clic en cualquiera de ellos para ver cómo se ven.
En la parte superior de la página, encontrará una barra fija con ajustes para cambiar los colores de fondo y primer plano. El color de fondo se aplica a la superficie plana y el color de primer plano se aplica a la patrones en los SVGs.
Gracias a estilo de mezcla natural, es difícil encontrar un combo de mal color (aunque ciertamente es posible). Los patrones van desde juego de damas a iconos detallados de repetición como anclas.
Cuando encuentres un patrón que te guste solo haga clic en ese bloque Para una ventana modal con más detalles. A partir de aquí, puede ajustar la colores de fondo / fondo, junto con opacidad de primer plano para los iconos.
Pero la verdadera magia sucede. en la caja del fragmento de código Donde puedes copia el CSS para incrustar el SVG puramente a través del código. En CSS hay una base64 ()
método para convertir datos de cadena a datos SVG. Esto es bastante común y funciona con otras imágenes como PNG, también.
Entonces, si no desea que el archivo SVG se almacene localmente, simplemente puede copiar / pegar el código CSS a la derecha en su hoja de estilo. Esta voluntad incrustar el fondo de repetición Con los colores adecuados directamente en su sitio. Que guay!
O, si prefieres edite el SVG usted mismo usted puede descargar una copia de la imagen SVG sin editar. De esta manera usted puede hacer todas las ediciones manualmente en software de diseño como Illustrator.
Hero Patterns es una de las pocas herramientas que permiten a los diseñadores tomar el control total sobre los SVG directamente desde el navegador. La repetición de fondos solía depender únicamente de PNG, pero los estándares web han avanzado lo suficiente como para que SVG puede tomar su lugar.
A Empezar, Solo visita la página de inicio de Hero Patterns y navegar a través de su biblioteca de patrones. Nuevos patrones ser añadido con frecuencia, así que asegúrate de revisar de vez en cuando.