Hoe te maken: CSS vaardigheidsstreep

Leer hoe je een vaardigheidsstreep maakt met CSS.

Mijn vaardigheden

In een online CV wordt vaak een 'vaardigheidsstreep' gebruikt om uw vaardigheden in verschillende domeinen te tonen:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Try it yourself

Hoe een vaardigheidsstreep te maken

Eerste stap - Voeg HTML toe:

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

Tweede stap - Voeg CSS toe:

/* Zorg ervoor dat de binnenste padding zoals verwacht werkt */
* {omvangsbegrenzing:border-box}
/* Het container voor de vaardigheidsstrepen */
.container {
  breedte: 100%; /* Volledige breedte */
  achtergrondkleur: #ddd; /* Grijs achtergrond */
}
.skills {
  tekst-uitlijning: recht; /* Tekst recht uitlijnen */
  ondersteuning-boven: 10px; /* Voeg ondersteuning van boven toe */
  ondersteuiging-beneden: 10px; /* Voeg ondersteuning van beneden toe */
  kleur: wit; /* Wit tekstkleur */
}
.html {breedte: 90%; achtergrondkleur: #04AA6D;} /* Groen */
.css {breedte: 80%; achtergrondkleur: #2196F3;} /* Blauw */
.js {breedte: 65%; achtergrondkleur: #f44336;} /* Rood */
.php {breedte: 60%; achtergrondkleur: #808080;} /* Diep grijs */

Try it yourself