Como criar: Barras de habilidades CSS

Aprenda a usar CSS para criar barras de habilidades.

Minhas habilidades

As barras de habilidades são frequentemente usadas em currículos online para exibir suas habilidades em diferentes áreas:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Experimente você mesmo

Como criar barras de habilidades

Primeiro passo - Adicionar 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 passo - Adicionar CSS:

/* Garantir que o preenchimento funcione conforme esperado */
* {caixa-de-cauda: border-box}
/* Contêiner da barra de habilidades */
.container {
  largura: 100%; /* Largura total */
  cor-fundo: #ddd; /* Fundo cinza */
}
.skills {
  alinhamento-texto: direita; /* Alinhamento de texto à direita */
  margem-superior: 10px; /* Adicionar margem superior interna */
  margem-inferior: 10px; /* Adicionar margem inferior interna */
  cor: branco; /* Cor de texto branca */
}
.html {largura: 90%; cor-fundo: #04AA6D;} /* Verde */
.css {largura: 80%; cor-fundo: #2196F3;} /* Azul */
.js {largura: 65%; cor-fundo: #f44336;} /* Vermelho */
.php {largura: 60%; cor-fundo: #808080;} /* Cinzento escuro */

Experimente você mesmo