Cómo crear: Barra de habilidades CSS

Aprende a usar CSS para crear barras de habilidades.

Mis habilidades

A menudo se utiliza "barra de habilidades" en los currículos en línea para mostrar sus habilidades en diferentes campos:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Prueba personalmente

Cómo crear una barra de habilidades

Primer paso - Añadir HTML:

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

Segundo paso - Añadir CSS:

/* Asegura que el margen interno funcione como se espera */
* {caja de contorno:border-box}
/* Contenedor de la barra de habilidades */
.container {
  ancho: 100%; /* Ancho completo */
  color de fondo: #ddd; /* Fondo gris */
}
.skills {
  alineación de texto: derecha; /* Alineación de texto a la derecha */
  margen superior: 10px; /* Añadir margen superior */
  margen inferior: 10px; /* Añadir margen inferior */
  color: blanco; /* Color de texto en blanco */
}
.html {ancho: 90%; color de fondo: #04AA6D;} /* Verde */
.css {ancho: 80%; color de fondo: #2196F3;} /* Azul */
.js {ancho: 65%; color de fondo: #f44336;} /* Rojo */
.php {ancho: 60%; color de fondo: #808080;} /* Gris oscuro */

Prueba personalmente