Miten luodaan: CSS-taitosarja

Opi, miten luodaan taitosarjoja CSS:n avulla.

Minun taitoni

Verkkoresumeissa käytetään usein 'taitosarjoja' esittääksesi taitosi eri aloilla:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Kokeile itse

Miten luodaan taitosarja

Ensimmäinen vaihe - Lisää 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>

Toinen vaihe - Lisää CSS:

/* Varmista, että sisätilat toimivat odotetusti */
* {box-sizing:border-box}
/* Taidon listan konteinereiden */
.container {
  leveys: 100%; /* Täysleveys */
  taustaväri: #ddd; /* Harmaa tausta */
}
.skills {
  tekstiTasaus: oikea; /* Teksti oikealle tasaukseen */
  yläPadding: 10px; /* Lisää yläpuolen sisätila */
  alapADDING: 10px; /* Lisää alapuolen sisätila */
  väri: valkoinen; /* Valkoinen tekstin väri */
}
.html {leveys: 90%; taustaväri: #04AA6D;} /* Vihreä */
.css {leveys: 80%; taustaväri: #2196F3;} /* Sininen */
.js {leveys: 65%; taustaväri: #f44336;} /* Punainen */
.php {leveys: 60%; taustaväri: #808080;} /* Syvä harmaa */

Kokeile itse