width: 0px; height: 0px; border: 8px solid #00aaff; border-top-width: 9px; border-right-width: 9px; и защо браузерът не може да чете квадрат само със стойности за width и height а им се задават нулеви стойности?
Браузърът може всичко. Горният запис може да бъде заменен с width: 18px; height: 18px; background-color: #00aaff; и ефектът ще е същият. Въпрос само на избор и това как е еволюирал кодът докато е бил писан. Няма правилен или грешен начин.
Злат, твоят index.html се различава доста от този на преподавателя. От ред 16 нататък. Почни от файла в урока и постепенно добавяй ред по ред от това, което е при теб.
Колега Попзлатев, Вие имате два h2 тага на редове 15 и 16 в html файла: Profile и Contacts. Пинчето се отнася за всички h2 тагове в html файла и тъй като при Вас са два, затова имате и две пинчета.
Не разбирам логиката... Кръгчето се намира на реда преди текста, а триъгълничето реално се намира на долния ред... защо са с разменени места и кръгчето е after, а триъгълничето е before?
before и after са псевдо елементи и имената им показват къде се намират спрямо елемента, който им е родител. Съответно ако ги позиционираме един върху друг, after ще покрие before. Това е и смисълът кръгчето да е after, а триъгълничето да е before (то искаме да се подпъхне под кръгчето и да не закрива иконката). Разбира се можем със z-index да им сменим местата, но за краткост просто избираме този елемент, който знаем, че ще се нарисува отгоре, за да го остилим като кръгче.
Сега разбрах. Благодаря за разяснението!
Може и аз да греша, но не си спомням, да сме гледали в някой урок досега, как се добавят елементи, които не са текст или прикачен файл. В случая, от това видео разбирам, че кръгчето и триъгълничето не са прикачен файл, а някакви елементи, които се появяват чрез код. Как става това, няма никакво разяснение...
Всъщност има цял урок за псевдо елементите тук: http://aula.bg/html-css-psevdo-elementi.
и ромбчето и кръгчето са позиционирани с почти еднакви мерни единици в левият край? Логично беше after макар и като празен стринг да се позиционира отдясно на надписа на h2 и препозиционирането което му налагаме да е доста по- различно.
Един от ценните изводи в урока, който не беше споменат ( а с него се започва решението) е, че и в h таговете и в псевдоелементите може да вмъкнем и различни от стрингове елементи.
Изгледай урока за позициониране и си припомни разликата между position: absolute; и position: relative;
Предполагам подобни пинчета в практиката не се правят много често (даже напротив, едва ли ще се наложи). Смисълът на всичко това е да се демонстрират огромните възможности, които предлага CSS. Нали?
Точно така. Идеята е с помощта на примерния проект да демонстрираме максимално възможностите на HTM и CSS. Пинчето е просто пример за това как може да се създават сложни елементи без нуждата от картинки.
на