Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

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

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Carlos (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:

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:

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
The header layout

HTML de la cabecera

CSS de la cabecera

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

The layout of the first section

Sección 1 HTML

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:

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:

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:

The second section layout

Sección 2 HTML

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:

WordPress Code Backgrounds
Fondos con código de Wordpress

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:

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).

The chart axes

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:

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:

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

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:

Así es como se ve:

The after pseudo-element

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

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:

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.

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:

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:

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:

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:

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.
The position of the span elements

Los estilos asociados para esa lista:

6. Crea la Sección 3

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

  • Un encabezado
  • Un enlace mailto

Así se ve:

The layout of the third section

Sección 3 HTML

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:

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!

Más proyectos prácticos para aumentar tus habilidades de front-end

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.