Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG

Cómo mejorar los diseños de tus sitios web con formas SVG

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este nuevo tutorial, nos vamos a deshacer de las aburridas cajas rectangulares de siempre y aprenderemos a crear una página de aterrizaje llena de complejas formas SVG. Incluso la vamos a enriquecer con estilos de Bootstrap y un video de fondo a pantalla completa.

La mejor forma de entender lo que vamos a crear es mirando la demostración, así que es toda tuya:

¿Empezamos?

1. Comienza con los recursos necesarios

Para acelerar el proceso de desarrollo, he incluido Bootstrap 4 en el pen.

Pen dependencies

Si revisas el marcado, notarás que utilizo mucho las clases auxiliares de Bootstrap. Aunque no es necesario, en caso de que no estés familiarizado con él, tómate un minuto para mirar su documentación o mis otros tutoriales sobre Bootstrap.


2. Continúa con el marcado de la página

Nuestra página consistirá de un SVG y tres secciones:

Nota: En la demostración, también hay un diseño simple de pie de página que no trataré en el tutorial.

3. Crea el sprite SVG

Para nuestro diseño, necesitaremos bastantes formas SVG (ondas, curvas, como quieras llamarlas). Para crearlas, no utilizaremos un programa de edición como Adobe Illustrator o Sketch como se esperaría; las generaremos aprovechando una impresionante herramienta en línea hecha por z creative labs.

Tool for generating SVG waves

Bastante bien, ¿verdad? No hay necesidad de perder el tiempo creándolos manualmente en un programa (obviamente puedes hacerlo si lo prefieres). Todo lo que necesitamos es experimentar un poco con las opciones de esta herramienta hasta que terminemos con los SVGs deseados.

Después de tomar el código generado para cada SVG, crearemos un sprite envolviéndolos dentro de un contenedor SVG. Esta es una técnica que he tratado muchas veces anteriormente.

The generated SVG code
El código generado de la forma SVG

Nota: Dependiendo del diseño, quizá tengamos que cambiar manualmente el color de la ruta del SVG.

Colocaremos cada ícono dentro de un elemento symbol con un ID único y un atributo viewbox que especificará sus dimensiones. Asimismo, lo dejaremos escalar sin estar atentos a su relación de aspecto, gracias al valor del atributo preserveAspectRatio='none'. Por último, representaremos el icono objetivo en la pantalla mediante el elemento use.

Aquí está el marcado que se necesita para el sprite SVG:


4. Define algunos estilos básicos

Más allá de los estilos predeterminados de Bootstrap, vamos a definir algunos adicionales. También anularemos algunos de los estilos de botones de Bootstrap para cubrir nuestras necesidades:


5. Crea la primera sección

La primera sección incluirá:

  • Un video de fondo a pantalla completa.
  • Una superposición con una cita textual que se ubicará en la parte superior del video.
  • Una forma SVG posicionada de manera absoluta en la parte inferior de esta sección que le dará una apariencia diagonal.

Este es su aspecto:

The layout of the first section

Sección 1 HTML

Sugerencia: En vez de utilizar una forma SVG, podemos crear diseños diagonales con otros métodos como las transformaciones CSS (principalmente con la función skew()) y la propiedad clip-path.

Sección 1 CSS

Como ya lo hemos comentado, esta sección será a pantalla completa. Por tanto, vamos a darle height: 100vh. Lamentablemente, esta unidad aún no es estable en todos los dispositivos. Así que, como mejor práctica, lo mantendremos como segunda opción y dejaremos que JavaScript calcule la altura de la sección basada en la altura de la ventana.

Aquí están todos los estilos que necesitaremos:

Sección 1 JavaScript


6. Crea la segunda sección

La segunda sección incluirá cuatro columnas con un ancho similar. Dentro de cada columna, pondremos una tarjeta que contendrá:

  • Una imagen.
  • Su título asociado.
  • Una forma SVG posicionada de manera absoluta en la parte inferior de la imagen. De ese modo, cada imagen tendrá una forma única.

Para crear las columnas, aprovecharemos el componente de de tarjetas de Bootstrap.

El número de columnas cambiará dependiendo del tamaño de la pantalla. Dicho lo anterior, en las pantallas extragrandes, la sección debería verse así:

The layout of the second section on extra large screens

No obstante, en pantallas medianas y grandes, debería aparecer de la siguiente forma:

The layout of the second section on medium and large screens

Por último, en pantallas pequeñas todas las columnas se apilarán:

The layout of the second section on small screens

Sección 2 HTML

Sección 2 CSS


7. Crea la tercera sección

La tercera sección incluirá:

  • Una imagen de fondo fija.
  • El título de la imagen
  • Una forma SVG posicionada de manera absoluta (una curva) que servirá como una pequeña superposición.

Este es su aspecto:

The layout of the third section

Sección 3 HTML

Sección 3 CSS


8. Compatibilidad con navegadores

He probado la demostración en varios navegadores y dispositivos. Funciona de maravilla, excepto por un pequeño problema. En algunos navegadores (como en Firefox) se puede ver que un SVG deja un rastro como si tuviera un borde inferior. También he encontrado esta inconsistencia en otros proyectos para clientes donde el diseño requiere SVGs posicionados de manera absoluta, como aquí:

Firefox issue frustrating
Problema en Firefox; ¡frustrante!

Una solución que he probado y que parece funcionar es reducir la altura de viewport del SVG en uno. Por ejemplo, en lugar de viewBox="0 0 1440 320", ajústalo como viewBox="0 0 1440 319". Si así lo deseas, puedes realizar esta modificación.

Si sabes qué causa este problema o tienes una solución más elegante, ¡compártela con nosotros!

¡Tu diseño web con formas SVG está completo!

¡Eso es todo, amigos! Hoy aprendimos a darle vida a nuestras páginas, creando diseños no rectangulares con formas SVG. Vamos a recapitular los pasos:

  • En primer lugar, usamos una práctica herramienta en línea que nos permite crear diferentes tipos de formas SVG (curvas y ondas) en muy poco tiempo.
  • Luego, creamos un sprite SVG con todos los íconos envueltos en él.
  • Después, renderizamos todos esos íconos en la pantalla estableciéndolos como elementos posicionados de manera absoluta y les dimos cierta altura.

Tal como se ha comentado anteriormente, el uso de una forma SVG en línea no es la única manera para crear diseños no rectangulares. Dependiendo de tus necesidades, las transformaciones CSS, la propiedad clip-path, la propiedad border-radius, e incluso una simple imagen también podría hacer el trabajo. Sin embargo, para la mayoría de los casos, los SVG en línea parecen ser la mejor manera de crear estos complejos diseños.

Veamos nuestra creación una vez más:

Desafío de diseño

¡Antes de concluir, tengo otro desafío para ti! Esta vez tu trabajo es extender la demostración añadiendo una funcionalidad que detenga el video si está fuera de la ventana gráfica. ¡Esperemos que uno de ustedes ofrezca una solución en los comentarios! ¡Buena suerte!

Como siempre, ¡muchas gracias por leer!

Más tutoriales sobre páginas de aterrizaje

Si quieres inspirarte para crear atractivas páginas de aterrizaje basadas en Bootstrap, consulta los siguientes tutoriales:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.