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.

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.

• 
  Bootstrap 4
  Cómo crear diseños rápidamente con las utilidades flexbox responsivas de Bootstrap 4
  George Martsoukos
• 
  Bootstrap 4
  Cómo crear una plantilla para página de aterrizaje con Bootstrap 4
  George Martsoukos
• 
  Bootstrap 4
  Consejo rápido: Cómo personalizar el componente de acordeón de Bootstrap 4
  George Martsoukos

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

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

1

<svg style="display:none;">...</svg>

2

<section class="hero-section position-relative">...</section>

3

<section class="photos-section py-5 d-flex justify-content-center">...</section>

4

<section class="cover-section position-relative">...</section>

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.

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.

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:

1

<svg style="display:none;">

2

  <symbol id="one" viewBox="0 0 1440 320" preserveAspectRatio="none">

3

    <path fill="white" d="M0,96L1440,320L1440,320L0,320Z"></path>

4

  </symbol>

5

  <symbol id="two" viewBox="0 0 1440 320" preserveAspectRatio="none">

6

    <path fill="white" d="M0,32L48,37.3C96,43,192,53,288,90.7C384,128,480,192,576,197.3C672,203,768,149,864,138.7C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>

7

  </symbol>

8

9

  <!-- more symbols here -->

10

</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:

1

:root {

2

  --overlay: rgba(0, 0, 0, 0.35);

3

  --box-shadow: 0 5px 20px 2px rgba(0, 0, 0, 0.15);

4

  --green: #528119;

5

}

6

7

* {

8

  padding: 0;

9

  margin: 0;

10

  box-sizing: border-box;

11

}

12

13

a {

14

  color: inherit;

15

}

16

17

a:hover {

18

  color: currentColor;

19

  text-decoration: none;

20

}

21

22

.cover {

23

  background-repeat: no-repeat;

24

  background-position: center;

25

  background-size: cover;

26

}

27

28

.overlay {

29

  top: 0;

30

  left: 0;

31

  right: 0;

32

  bottom: 0;

33

  background: var(--overlay);

34

}

35

36

.btn-outline-success {

37

  color: var(--green);

38

}

39

40

.btn-outline-success:hover,

41

.btn-outline-success:not(:disabled):not(.disabled):active {

42

  background: var(--green);

43

}

44

45

.btn-outline-success,

46

.btn-outline-success:hover,

47

.btn-outline-success:not(:disabled):not(.disabled):active {

48

  border-color: var(--green);

49

}

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:

Sección 1 HTML

1

<section class="hero-section position-relative">

2

  <video src="down-by-the-river_compressed.mp4" autoplay loop muted playsinline></video>

3

  <div class="overlay position-absolute d-flex align-items-center justify-content-center font-weight-bold text-white h2 mb-0">

4

    <blockquote class="p-4 mb-0">

5

      <p>...</p>

6

      <footer class="blockquote-footer text-white text-right">...</footer>

7

    </blockquote>

8

  </div>

9

  <svg class="position-absolute w-100">

10

    <use xlink:href="#one"></use>

11

  </svg>

12

</section>

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:

1

/*CUSTOM VARIABLES HERE*/

2

3

.hero-section {

4

  height: 100vh;

5

}

6

7

.hero-section video {

8

  width: 100%;

9

  height: 100%;

10

  object-fit: cover;

11

 }

12

13

.hero-section svg {

14

  bottom: 0;

15

  left: 0;

16

  height: 30vh;

17

}

Sección 1 JavaScript

1

const hero = document.querySelector(".hero-section");

2

hero.style.height = window.innerHeight + "px";

3

4

window.addEventListener("resize", function () {

5

  hero.style.height = this.innerHeight + "px";

6

});

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í:

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

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

Sección 2 HTML

1

<section class="photos-section py-5 d-flex justify-content-center">

2

  <div class="container">

3

    <div class="row">

4

      <div class="col-12 col-sm-6 col-xl-3 d-flex card-outer">

5

        <div class="card">

6

          <div class="position-relative">

7

            <img src="unsplash_nature11.jpg" class="card-img-top" alt="">

8

            <svg class="position-absolute w-100">

9

              <use xlink:href="#two"></use>

10

            </svg>

11

          </div>

12

          <div class="card-body">

13

            <h5 class="card-title">...</h5>

14

            <p class="card-text">Photo by <a href="" target="_blank">...</a></p>

15

          </div>

16

        </div>

17

      </div>

18

      <div class="col-12 col-sm-6 col-xl-3 d-flex card-outer">

19

        <div class="card">

20

          <div class="position-relative">

21

            <svg class="position-absolute w-100">

22

              <use xlink:href="#three"></use>

23

            </svg>

24

            <img src="unsplash_nature2.jpg" class="card-img-top" alt="">

25

          </div>

26

          <div class="card-body">

27

            <h5 class="card-title">...</h5>

28

            <p class="card-text">Photo by <a href="" target="_blank">...</a></p>

29

          </div>

30

        </div>

31

      </div>

32

      <div class="col-12 col-sm-6 col-xl-3 d-flex card-outer">

33

        <div class="card">

34

          <div class="position-relative">

35

            <img src="unsplash_nature4.jpg" class="card-img-top" alt="">

36

            <svg class="position-absolute w-100">

37

              <use xlink:href="#four"></use>

38

            </svg>

39

          </div>

40

          <div class="card-body">

41

            <h5 class="card-title">...</h5>

42

            <p class="card-text">Photo by <a href="" target="_blank">...</a></p>

43

          </div>

44

        </div>

45

      </div>

46

      <div class="col-12 col-sm-6 col-xl-3 d-flex card-outer">

47

        <div class="card">

48

          <div class="position-relative">

49

            <img src="unsplash_nature6.jpg" class="card-img-top" alt="">

50

            <svg class="position-absolute w-100">

51

              <use xlink:href="#five"></use>

52

            </svg>

53

          </div>

54

          <div class="card-body">

55

            <h5 class="card-title">...</h5>

56

            <p class="card-text">Photo by <a href="" target="_blank">...</a></p>

57

          </div>

58

        </div>

59

      </div>

60

    </div>

61

    <div class="row mt-5">

62

      <div class="col-12 text-center">

63

        <a href="" class="btn btn-outline-success" role="button" target="_blank">See More Photos</a>

64

      </div>

65

    </div>

66

  </div>

67

</section>

Sección 2 CSS

1

/*CUSTOM VARIABLES HERE*/

2

3

.photos-section .card-outer {

4

  margin-bottom: 30px;

5

}

6

7

.photos-section .card {

8

  border: none;

9

  box-shadow: var(--box-shadow);

10

}

11

12

 .photos-section .card svg {

13

  bottom: 0;

14

  left: 0;

15

  height: 55px;

16

}

17

18

@media screen and (min-width: 1200px) {

19

  .photos-section .card-outer {

20

    margin-bottom: 0;

21

  }

22

}

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:

Sección 3 HTML

1

<section class="cover-section position-relative">

2

  <div class="cover" style="background-image: url(nature-pexels.jpg);">

3

    <img src="nature-pexels.jpg" class="img-fluid invisible" alt="" />

4

  </div>

5

  <div class="caption position-absolute h4 mb-0">

6

    Image from <a href="" target="_blank">...</a>

7

  </div>

8

  <svg class="position-absolute w-100">

9

    <use xlink:href="#six"></use>

10

  </svg>

11

</section>

Sección 3 CSS

1

.cover-section .cover {

2

  background-attachment: fixed;

3

}

4

5

.cover-section .caption {

6

  bottom: 30px;

7

  left: 15px;

8

  z-index: 1;

9

}

10

11

.cover-section svg {

12

  bottom: 0;

13

  left: 0;

14

  height: 30vh;

15

}

16

17

@media screen and (min-width: 768px) { 

18

  .cover-section .caption {

19

    bottom: 50px;

20

  }

21

22

  .cover-section svg {

23

    height: 50vh;

24

  }

25

}

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í:

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.

• 

  SVG Viewport y viewBox (para principiantes absolutos)

  En este breve consejo, vamos a desglosar exactamente qué son viewport y viewBox en SVG.

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:

• 
  Bootstrap 4
  Cómo crear una página de aterrizaje animada con Bootstrap y Material Kit
  George Martsoukos
• 
  Bootstrap 4
  Cómo crear una plantilla para página de aterrizaje con Bootstrap 4
  George Martsoukos