Защо правим това остиляване:

Браузърът може всичко. Горният запис може да бъде заменен с width: 18px; height: 18px; background-color: #00aaff; и ефектът ще е същият. Въпрос само на избор и това как е еволюирал кодът докато е бил писан. Няма правилен или грешен начин.

Защо пин-четата станаха 2?

Колега Попзлатев, Вие имате два h2 тага на редове 15 и 16 в html файла: Profile и Contacts. Пинчето се отнася за всички h2 тагове в html файла и тъй като при Вас са два, затова имате и две пинчета.

Защо кръгчето е after, а триъгълничето е before?

before и after са псевдо елементи и имената им показват къде се намират спрямо елемента, който им е родител. Съответно ако ги позиционираме един върху друг, after ще покрие before. Това е и смисълът кръгчето да е after, а триъгълничето да е before (то искаме да се подпъхне под кръгчето и да не закрива иконката). Разбира се можем със z-index да им сменим местата, но за краткост просто избираме този елемент, който знаем, че ще се нарисува отгоре, за да го остилим като кръгче.

Как се появяват кръгчето и триъгълничето?

Всъщност има цял урок за псевдо елементите тук: aula.bg/html-css-psevdo-elementi.

Защо ромбчето и кръгчето са позиционирани с почти еднакви мерни единици в левият край?

Изгледай урока за позициониране и си припомни разликата между position: absolute; и position: relative;

Какво е практическото приложение на фигурки като тази?

Точно така. Идеята е с помощта на примерния проект да демонстрираме максимално възможностите на HTM и CSS. Пинчето е просто пример за това как може да се създават сложни елементи без нуждата от картинки.

Безплатно! Онлайн събитие: AI за 10x продуктивност Регистрация тук.

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

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

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

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

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