Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Решение: Пин пред заглавие

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

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

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

Как се създава пинче пред заглавие само с CSS

Пинчето пред заглавието може да бъде изградено изцяло с CSS, без изображения. То се създава чрез два псевдо-елемента – единият оформя кръгчето, а другият заострената част. Ключът е комбинацията от position: relative на заглавието и position: absolute на псевдо-елементите, за да се позиционират точно спрямо него.

Стъпка по стъпка: създаване на пин пред H2

Добавете position: relative на h2, за да стане отправна точка за абсолютно позициониране.
Задайте ляво отстояние (напр. margin-left: 50px), за да освободите място за пинчето.
Създайте ::after псевдо-елемент за кръгчето:
- празно съдържание (content: "")
- фиксирани width и height
- border-radius, за да стане кръг
- position: absolute
Създайте ::before псевдо-елемент за стрелката:
- квадратен елемент
- transform: rotate(45deg)
- допълнително scale по хоризонтала за ромбовидна форма
- позициониране така, че да се „подпъхне“ под кръгчето
Добавете box-shadow към двата елемента, за да се отделят визуално от фона или текста.

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

::before / ::after – създаване на декоративни елементи без допълнителен HTML
position: relative – отправна точка за абсолютно позиционирани деца
position: absolute – прецизно позициониране спрямо родителя
transform: rotate() – завъртане на елемент (45° за ромб)
box-shadow – визуално отделяне от фона или текста

Този подход показва силата на CSS трансформациите и псевдо-елементите за създаване на графични ефекти без изображения.