Crea un portafolio estático con un gráfico de barras avanzado en CSS

() translation by (you can also view the original English article)

En una publicación previa, te enseñé cómo crear una hermosa página de portafolio a pantalla completa. Durante ese tutorial, también aprendimos a crear un gráfico de columnas responsivo con CSS. En este tutorial vamos a crear otra atractiva página estática para portafolio, esta vez con un gráfico de barras hecho con CSS puro, ¡y sin utilizar ninguna biblioteca externa de JavaScript, SVG o el elemento canvas!

Lo que vamos a crear

Aquí está el proyecto que crearemos:

Tenemos muchas cosas interesantes que tratar, ¡así que vamos a comenzar!

Nota: Este tutorial asume que posees un buen conocimiento de CSS. Por ejemplo, debes estar familiarizado con el posicionamiento CSS y los conceptos básicos de flexbox.

1. Empieza con el marcado de la página

El marcado de la página consta de una cabecera y tres secciones a pantalla completa:

1	<header class="position-fixed text-lightblue page-header">...</header>
2	<section class="d-flex justify-content-center align-items-center vh-100">...</section>
3	<section class="d-flex vh-100 bg-lightwhite">...</section>
4	<section class="d-flex flex-column justify-content-center align-items-center vh-100 position-relative">...</section>

Nota: además de las clases específicas de los elementos, nuestro marcado contiene una serie de clases de utilidad (auxiliares). Usaremos esta metodología para mantener nuestro CSS lo más DRY (No te repitas, por sus siglas en inglés. También se le conoce como: Una vez y solo una) posible. No obstante, en aras de la legibilidad, dentro del CSS no agruparemos las reglas comunes de CSS.

2. Define algunos estilos básicos

Cumpliendo con lo que acabamos de comentar, primero especificamos algunas reglas de reinicio junto con una serie de clases auxiliares:

:root {
  --gray: #cbcfd3;
  --white: white;
  --black: #1a1a1a;
  --lightwhite: whitesmoke;
  --lightblue: #009dd3;
  --peach: #ff9469;
  --transition-delay: 0.3s;
  --transition-delay-step: 0.3s;
  --skills-width: 120px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.flex-grow-1 {
  flex-grow: 1;
}

.vh-100 {
  height: 100vh;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.text-center {
  text-align: center;
}

.text-gray {
  color: var(--gray);
}

.text-lightblue {
  color: var(--lightblue);
}

.text-peach {
  color: var(--peach);
}

.bg-white {
  background: var(--white);
}

.bg-lightwhite {
  background: var(--lightwhite);
}

.h1 {
  font-size: 2.5rem;
}

.h2 {
  font-size: 2rem;
}

Las nomenclaturas para nuestras clases auxiliares están inspiradas en los nombres de las clases de Bootstrap 4.

3. Crea la cabecera (header) de la página

La cabecera de la página incluye:

El logotipo
La navegación principal

HTML de la cabecera

<header class="position-fixed bg-white page-header">
  <nav class="d-flex justify-content-between align-items-center">
    <a href="" class="text-peach logo">
      <strong>DM</strong>
    </a>
    <ul class="d-flex">
      <li>
        <a href="#skills">Skills</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

CSS de la cabecera

.page-header {
  left: 0;
  right: 0;
  top: 0;
  padding: 20px;
  z-index: 10;
}

.page-header .logo {
  font-size: 1.7rem;
}

.page-header li:not(:last-child) {
  margin-right: 20px;
}

.page-header a {
  font-size: 1.1rem;
}

4. Crea la sección hero

La primera sección de nuestra página incluye:

Un encabezado o título
Una llamada a la acción

Así es como se verá:

Sección 1 HTML

1	<section class="d-flex justify-content-center align-items-center vh-100">
2	<h1 class="text-center h1">...</h1>
3	<div class="position-absolute scroll-down">...</div>
4	</section>

Sección 1 CSS

La llamada a la acción incluye una línea delgada que se anima infinitamente, lo que obliga al usuario a desplazarse hacia abajo para ver qué hay debajo del «pliegue» (que puede existir o no).

Sus estilos:

.scroll-down {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  text-transform: uppercase;
  transition: all 0.5s;
}

.scroll-down.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.scroll-down::after {
  content: '';
  display: block;
  margin: 3px auto 0;
  width: 1px;
  height: 60px;
  background: var(--black);
  transform-origin: bottom;
  animation: pulse 3.5s infinite linear;
}

@keyframes pulse {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.65);
  }
  100% {
    transform: scaleY(1);
  }
}

Sección 1 JavaScript

Al principio, la llamada a la acción será visible. Pero cuando el usuario empiece a desplazarse, desaparecerá. De manera más específica, recibirá la clase is-hidden que acabamos de definir en los estilos anteriores.

Aquí está el código JavaScript que se requiere:

const scrollDown = document.querySelector(".scroll-down");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  window.pageYOffset > 0
    ? scrollDown.classList.add("is-hidden")
    : scrollDown.classList.remove("is-hidden");
}

5. Crea la Sección 2

La segunda sección de nuestra página incluye:

Una imagen de fondo
El gráfico de barras que muestra las habilidades web

Así es como se ve:

Sección 2 HTML

<section class="d-flex vh-100 bg-lightwhite" id="skills">
  <div class="position-relative flex-grow-1 bg-img"></div>
  <div class="d-flex justify-content-center align-items-center flex-grow-1">
    <div class="position-relative chart-wrapper">
      <ul class="d-flex flex-column chart-skills">
        <li class="position-relative">
          <span>CSS</span>
        </li>
        ...
      </ul>
      <ul class="d-flex position-absolute chart-levels">
        <li class="flex-grow-1 position-relative">
          <span class="position-absolute">Novice</span>
        </li>
        ...
      </ul> 
    </div>
  </div>
</section>

Estiliza la imagen de fondo

La parte izquierda de esta sección contiene una imagen que fue tomada de los fondos con código de Wordpress (Wordpress Code Backgrounds) en Envato Elements. Nos proporcionará la atmósfera que estamos buscando, a la vez que complementará los colores que usamos en otras partes del diseño:

Algunos puntos importantes:

La imagen aparecerá en pantallas de más de 900 px
usaremos CSS (mediante la propiedad background-image) y no HTML (a través del elemento img) para colocar la imagen dentro de la página. Elegimos este método porque nos brinda una formas fácil de mejorar la apariencia de la imagen. Por ejemplo, la sesgaremos aprovechando su pseudoelemento :: after. Incluso podrías jugar con sus colores utilizando background-blend-mode: luminosity.

Nota: De forma predeterminada, img es un elemento vacío y no tiene pseudoelementos.

Los estilos correspondientes:

.bg-img {
  background: #fff url(bg-programming.jpg) no-repeat center / cover;
}

.bg-img::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 7rem;
  background: var(--lightwhite);
  transform: skew(-5deg);
  transform-origin: left bottom;
}

@media screen and (max-width: 900px) {
  .bg-img {
    display: none;
  }
}

Estiliza el gráfico

En este punto nos concentraremos en la parte más desafiante de nuestra demostración; cómo crear el gráfico de barras.

El gráfico tendrá dos ejes. En el eje y colocaremos las habilidades web (CSS, HTML, JavaScript, Python, Ruby). En el otro eje x colocaremos los niveles de habilidad (Novato, Principiante, Intermedio, Avanzado y Experto).

El eje Y

En términos de marcado, cada habilidad es un elemento de la lista situado dentro de la lista .chart-skills. Después, cada elemento de la lista mantendrá su texto dentro de un elemento span, de esta forma:

<ul class="chart-skills">
  <li class="position-relative">
    <span>CSS</span>
  </li>
  ...
</ul>

Definimos un ancho fijo para el elemento span igual a 120 px. Para evitar la repetición y poder cambiar fácilmente este valor (ya que otros valores dependerán de él), vamos a almacenarlo dentro de una variable CSS:

:root {
  --skills-width: 120px;
}

.chart-wrapper .chart-skills span {
  display: inline-block;
  width: var(--skills-width);
  padding: 15px;
}

Cada elemento de la lista contendrá sus propios pseudoelementos :: before y :: after:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-skills li::before,
.chart-wrapper .chart-skills li::after {
  content: '';
  position: absolute;
  top: 25%;
  left: var(--skills-width);
  height: 50%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 2;
}

El pseudoelemento :: after tendrá un color gris claro y un ancho estático que se calcula restando el ancho de span del ancho del elemento de la lista:

1	.chart-wrapper .chart-skills li::after {
2	width: calc(100% - var(--skills-width));
3	background: rgba(211, 211, 211, 0.3);
4	}

Así es como se ve:

El ancho inicial de todos los pseudoelementos ::before será 0:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-skills li::before {
  width: 0;
  background: var(--lightblue);
  transition: width 0.65s ease-out;
}

Pero tan pronto como el gráfico se haga visible en la ventana gráfica, su anchura será animada y recibirá un valor que será determinado por el nivel de habilidad asociado:

Añadir una clase cuando esté a la vista

Existen múltiples formas de detectar si un elemento está visible en la ventana gráfica o no. Aprovechemos la siguiente función útil extraída de un antiguo, aunque popular, hilo de StackOverflow:

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Si has leído mis tutoriales pasados, quizá recuerdes que también he utilizado esta función para animar una línea de tiempo vertical.

Patrones

Creando una línea de tiempo vertical con CSS y un toque de JavaScript

George Martsoukos

Así que, ¡regresando al trabajo en proceso! Cuando el gráfico se haga visible en la ventana gráfica, le daremos la clase in-view.

Aquí está el código JavaScript que hace este trabajo:

const chartWrapper = document.querySelector(".chart-wrapper");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  if (isElementInViewport(chartWrapper)) chartWrapper.classList.add("in-view");
}

Los pseudoelementos :: before deben ser animados de manera secuencial. Para darles la velocidad de transición deseada, utilizaremos otras dos variables CSS junto con la función calc().

Estos son los estilos CSS responsables de mostrar esos pseudoelementos:

:root {
  ...
  --transition-delay: 0.3s;
  --transition-delay-step: 0.3s;
  --skills-width: 120px;
}

.chart-wrapper.in-view .chart-skills li:nth-child(1)::before {
  width: calc(90% - var(--skills-width));
  transition-delay: var(--transition-delay);
}

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
  width: calc(75% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
  width: calc(62% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(4)::before {
  width: calc(49% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(5)::before {
  width: calc(38% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

Recuerda que Microsoft Edge no soporta las operaciones matemáticas anteriores, por lo que si necesitas admitirlo, solamente pasa algunos valores estáticos, de esta forma:

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
  transition-delay: 0.6s;
}

.chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
  transition-delay: 0.9s;
}

El eje X

En términos de marcado, cada nivel es un elemento de lista ubicado dentro de la lista .chart-levels. Después, cada elemento de la lista mantendrá su texto dentro de un elemento span, de esta manera:

<ul class="d-flex position-absolute chart-levels">
  <li class="flex-grow-1 position-relative">
    <span class="position-absolute">Novice</span>
  </li>
  ...
</ul>

Algunos puntos a tener en cuenta:

Definimos la lista como un contenedor flexible. Además, lo posicionamos de manera absoluta y le damos un margen izquierdo igual al ancho de los spans de la primera lista.
Le damos a los elementos de la lista flex-grow: 1 para acrecentarlos y que ocupen todo el espacio disponible.
Los spans se colocan en la parte inferior del elemento de la lista principal.

Los estilos asociados para esa lista:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-levels {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-left: var(--skills-width);
}

.chart-wrapper .chart-levels li {
  border-right: 1px solid rgba(211, 211, 211, 0.3);
}

.chart-wrapper .chart-levels li:last-child {
  border-right: 0;
}

.chart-wrapper .chart-levels span {
  bottom: 0;
  transform: translateY(50px) rotate(45deg);
  padding: 10px;
  width: 100%;
}

6. Crea la Sección 3

La tercera sección de nuestra página incluye:

Un encabezado
Un enlace mailto

Así se ve:

Sección 3 HTML

1	<section class="d-flex flex-column justify-content-center align-items-center vh-100 position-relative" id="contact">
2	<h2 class="h1">...</h2>
3	<a href="mailto:hello@digitalmonsters.com" class="text-gray h2">...</a>
4	</section>

7. Volviéndola responsiva

¡Ya casi terminamos! Como último punto, asegurémonos de que el texto tenga una apariencia sólida en todas las pantallas. Aplicaremos una regla dirigida a pantallas angostas:

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
}

Una nota importante aquí es que en nuestros estilos hemos utilizado rem para ajustar el tamaño de las fuentes. Este enfoque es realmente útil porque los tamaños de las fuentes son relativos al elemento raíz (html). Si disminuimos el tamaño de la fuente como en el código anterior, los tamaños de las fuentes ajustadas en rem serán disminuidos de manera dinámica. Por supuesto, también pudimos haber utilizado rems para las otras propiedades CSS.

El estado final de nuestro proyecto:

Conclusión

En este tutorial mejoramos nuestro conocimiento de CSS aprendiendo a crear una atractiva página estática para portafolio. Fuimos un paso más allá y creamos un gráfico de barras responsivo sin utilizar ninguna biblioteca externa de JavaScript, SVG, o el elemento canvas. ¡Únicamente con CSS simple!

Esperemos que este tutorial te haya brindado suficiente inspiración para crear un impresionante sitio para un portafolio. Me encantaría ver tu trabajo, ¡asegúrate de compartirlo con nosotros!

Los próximos pasos

Si quieres mejorar o extender esta demostración, aquí hay dos cosas que puedes hacer:

Añadir un desplazamiento suave a los enlaces del menú sin utilizar ninguna biblioteca externa de JavaScript.
Usar la API Intersection Observer, que es más eficaz, en lugar del evento scroll para verificar si el gráfico es visible en la ventana gráfica o no.

Como siempre, ¡gracias por leer!