Synthwave + CSS + HTML
Tags: synthwave, css, html, tutorial
Published: 2020-08-23 23:34:34

El día de hoy vamos a aprender a crear [esta](https://www.youtube.com/watch?v=pvomDfQmhWQ&list=PL9R15-E_ygVdRXnL_TtLRunDid5eqBU7u) animación del género **Synthwave**

---

### Temario

* Creación del cuerpo _(HTML)_
* Agregar estilos 😎
* Enlace al repositorio 🚀

---

> Empecemos creando el cuerpo de nuestra vista _(HTML)_

`index.html`:

```html
<body class="synthwave-background">
</body>
```

> **Nunca**, pero nunca apliques estilos sobre la etiqueta _body_ del documento si planeas usar estos estilos en producción o en proyectos más grandes ! 🚫


Nuestra página necesita un texto a mostrar, ¡manos a la obra!

```html
<body class="synthwave-background">
    <div class="_80s-text">
        <h1>Synthwave</h1>
    </div>
</body>
```

> Agregar el sol con las líneas características del _synthwave_ fue algo complicado, especialmente si eres nuevo en **css**, la primera opción sería utilizar una imagen, pero no se veía tan bien como se esperaba, sin embargo, **se pueden crear con puros elementos HTML! 😳**

```html
<body class="synthwave-background">
    <div class="_80s-text">
        <h1>Synthwave</h1>
    </div>
    <div class="sun">
        <div class="lines">
            <div class="line" style="--pos:1;"></div>
            <div class="line" style="--pos:2;"></div>
            <div class="line" style="--pos:3;"></div>
            <div class="line" style="--pos:4;"></div>
            <div class="line" style="--pos:5;"></div>
            <div class="line" style="--pos:6;"></div>
            <div class="line" style="--pos:7;"></div>
        </div>
    </div>
</body>
```

Aquí dibujamos línea por línea, y la estilizamos con CSS, además, le indicamos la variable `--pos:N` para _realizar un cálculo_ que más adelante veremos.


> Finalmente, nos queda representar el suelo que se animará, de la misma manera, crear este elemento es un poco complicado, y aunque una imagen parezca la mejor solución, encontramos una forma más eficiente y continuamos con #PURECSS.

```html
<body class="synthwave-background">
    <div class="_80s-text">
        <h1>Synthwave</h1>
    </div>
    <div class="sun">
        <div class="lines">
            <div class="line" style="--pos:1;"></div>
            <div class="line" style="--pos:2;"></div>
            <div class="line" style="--pos:3;"></div>
            <div class="line" style="--pos:4;"></div>
            <div class="line" style="--pos:5;"></div>
            <div class="line" style="--pos:6;"></div>
            <div class="line" style="--pos:7;"></div>
        </div>
    </div>
   <div class="road"></div><!-- Sí, eso es todo 😳 -->
</body>
```

---

> ¡Vamos a estilizar!

`app.css`:

```css
* {
  box-sizing: border-box;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Helvetica Neue", Arial, sans-serif;
}
```

Empecemos especificando unas reglas para una mejor visualización.

A continuación, agregaremos una fuente para que se vea mucho más **S Y N T H W A V E**

```CSS

@font-face {
  src: url("./assets/Neon.ttf");
  font-family: "Neon";
}

```

 > Esa fuente la encontrarás en el repositorio 😉

Ahora sí, vamos a crear el fondo:

```CSS
.synthwave-background {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgb(20, 39, 79) 0px,
    rgb(242, 21, 119) 500px,
    rgb(20, 39, 79) 500px
  );
}
```

Eso dejará un degradado de fondo, continuamos con la creación del suelo:

```CSS
.road {
  width: 100%;
  height: 40em;
  overflow: hidden;
}
```
Lo anterior solo especifica su tamaño, con las siguientes reglas crearemos las líneas del suelo
```CSS
/*.road*/
...
background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(62, 250, 240, 0.5) 0%,
      rgba(62, 250, 240, 0.5) 3px,
      rgba(0, 0, 0, 0) 0px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(62, 250, 240, 0.5) 0%,
      rgba(62, 250, 240, 0.5) 3px,
      rgba(0, 0, 0, 0) 0px
    );
```

Eso creará una malla con cubos trazados como gradientes, genial no?

Para terminar con el suelo, agregamos las siguientes reglas:

```css
  /*.road*/
  ...
  background-size: 2em 1em, 2em 1em;
  background-color: rgb(20, 39, 79);
  perspective: 1000px;
  margin-top: 20em;
  transform: perspective(200px) rotateX(45deg) scale(2);
  animation: road 10s linear infinite;
```

Le especificamos el tamaño del fondo, la perspectiva inclinada con su respectiva transformación y por último, una animación que le dará vida a nuestra página.

> Vamos a continuar creando el sol

```css
.sun {
  width: 400px;
  height: 400px;
  background: linear-gradient(180deg, #faf09d 0%, #fc9093 52.08%, #e92077 100%);
  border-radius: 50%;
  z-index: 1;
  margin: 0 auto;
  position: absolute;
  top: 100px;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
```

Ahí crearemos un **div circular** con el degradado del sol.

Continuamos estilizando el _div_ que contendrá las líneas:

```css
.sun > .lines {
  width: 100%;
  height: 50%;
  position: relative;
  bottom: -60%;
  border-radius: 0 0 50% 50%;
  overflow: hidden;
}
```

Esas reglas nos bastarán para situar las líneas al fondo del sol.

Por último, vamos a estilizar cada línea del sol, como sabrás, cada línea tiene un tamaño mayor a la línea anterior, esto lo logramos con este bloque:

```css
.lines > .line {
  width: 100%;
  height: calc(5px * var(--pos));
  background-color: rgba(0, 0, 0, 0.3);
  mix-blend-mode: overlay;
  margin-bottom: 1rem;
}
```

La variable `--pos` nos servirá para aumentar el tamaño del div siguiente.

> Vamos a animar nuestro suelo:

```css
@keyframes road {
  from {
    transform: perspective(200px) rotateX(45deg) scale(1.5);
  }
  to {
    transform: perspective(200px) rotateX(45deg) scale(2.1);
  }
}
```
Por último, estilizaremos los textos en nuestro sitio:

```css
._80s-text {
  font-size: 6em;
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 4;
}
._80s-text > h1 {
  font-family: "Neon", Arial, Helvetica, sans-serif;
  width: 100%;
  text-align: center;
  color: rgb(252, 121, 218);
  text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px rgb(234, 38, 171),
    0 0 10px rgb(234, 38, 171), 0 0 15px rgb(234, 38, 171),
    0 0 20px rgb(234, 38, 171), 0 0 25px rgb(234, 38, 171);
}
```

# Resultado

![Resultado](https://dev-to-uploads.s3.amazonaws.com/i/ou24ij7oyhbiwyloaazf.png)

> Enlace al repositorio

Podrás descargar y probar este efecto en tu equipo [aquí](https://github.com/BitQuarkApps/ig-synthwave-background-tutorial).


¡Si te gustó síguenos en nuestra redes sociales y aquí para más contenido!