Уровни навыков

 alexei 09/11/2021 - 10:01

Здесь вы узнаете, как сделать уровни навыков при помощи CSS.


Мои навыки

"Уровни навыков" часто используются в онлайн резюме для графического отображения уровня знаний по различным предметам:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Как сделать уровни навыков

Шаг 1) Добавляем 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>

Шаг 2) Добавляем CSS:


/* Убедимся, что все будет работать как задумано */
* {box-sizing:border-box}

/* Контейнер уровней навыков */
.container {
  width: 100%; /* Во всю ширину */
  background-color: #ddd; /* Серый фон */
}

.skills {
  text-align: right; /* Выравниваем текст по правому краю */
  padding-top: 10px; /* Добавляем верхний отступ */
  padding-bottom: 10px; /* Добавляем нижний отступ */
  color: white; /* Белый цвет текста */
}

.html {width: 90%; background-color: #04AA6D;} /* Зеленый */
.css {width: 80%; background-color: #2196F3;} /* Синий */
.js {width: 65%; background-color: #f44336;} /* Красный */
.php {width: 60%; background-color: #808080;} /* Темно-серый */