Come creare: Barra delle competenze CSS

Impara come creare una barra delle competenze utilizzando CSS.

Le mie competenze

Nella maggior parte dei curriculum vitae online, le "barre delle competenze" vengono utilizzate per mostrare le tue competenze in diversi campi:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Prova tu stesso

Come creare una barra delle competenze

Primo passo - Aggiungi 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>

Secondo passo - Aggiungi CSS:

/* Assicurarsi che i margini funzionino come previsto */
* {ragione del riquadro: bordo-incluso}
/* Contenitore per le barre delle competenze */
.container {
  larghezza: 100%; /* Larghezza piena */
  colore di sfondo: #ddd; /* Sfondo grigio */
}
.skills {
  allineamento del testo: destra; /* Allineamento del testo a destra */
  margine superiore: 10px; /* Aggiungi margine superiore */
  margine inferiore: 10px; /* Aggiungi margine inferiore */
  colore: bianco; /* Testo bianco */
}
.html {larghezza: 90%; colore di sfondo: #04AA6D;} /* Verde */
.css {larghezza: 80%; colore di sfondo: #2196F3;} /* Blu */
.js {larghezza: 65%; colore di sfondo: #f44336;} /* Rosso */
.php {larghezza: 60%; colore di sfondo: #808080;} /* Grigio scuro */

Prova tu stesso