Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
HTML5 и CSS3
5. Създаване и модифициране на изображения

Решение: Умения и интереси

Курсове HTML5 и CSS3 Седмица 5 - Създаване и модифициране на изображения
-51,13 € за ВЕЛИКДЕН: Вземи курс "HTML5 и CSS3" за    127,31 € 76,18 €  ВИЖ ТУК

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Как работи точковата система за умения и езици

Оценяването на езиците и софтуерните умения е реализирано чрез визуална точкова система, изградена изцяло с CSS. Вместо изображения се използват псевдо-елементи и radial-gradient, които рисуват сини и сиви точки. Класовете за ранг (например 5, 6, 7) контролират колко точки се виждат, като променят ширината на покриващия слой. Така с чист CSS се постига гъвкав и лесен за поддръжка ефект.

Стъпка по стъпка: как да изградите ефекта

  1. В main добавете aside, съдържащ подреден списък (ol) с езици и софтуерни умения.
  2. Премахнете номерацията с list-style: none.
  3. Добавете padding-right, за да осигурите място за точките.
  4. Ограничете дългия текст с overflow: hidden и text-overflow: ellipsis.
  5. Създайте ::before и ::after псевдо-елементи:
    • ::before – сините точки чрез radial-gradient, повтарящ се по хоризонтала.
    • ::after – сивите точки, които припокриват сините.
  6. Чрез класове за ранг променяйте ширината на сивия слой, за да скривате съответен брой сини точки.

За секцията „Интереси“ използвайте ul, като преизползвате стилизирането на пинчетата от h2, но с по-малък размер и без заострената част.

Използвани CSS техники

  • list-style: none – премахва стандартната номерация
  • text-overflow: ellipsis – добавя многоточие при дълъг текст
  • overflow: hidden – скрива излизащото съдържание
  • ::before и ::after – създават декоративни елементи
  • radial-gradient() – рисува кръгли точки без изображения

Допълнително, иконките към контактите са реализирани с background-image и filter: invert, за да се адаптират към светъл фон.

Дискусия към урока