Създаване на етикети с помощта на CSS

Когато започнахме да се създаде прост етикет, той изглеждаше доста добре, но това не беше достатъчно имаме нужда от опции за персонализиране. Както можете да видите, за да се създаде триъгълник, ще трябва да използвате имотните граници, които не работят градиенти собственост. Затова решихме да блокира имота сянка, за да създадете pseudogradient, който най-малко направи възможно да добавите появата на дълбочина или да изберете по-гъвкави настройки на етикета.

Нека да разгледаме първата версия на етикета. HTML код е проста и включва само линка:

Ние използвахме CSS псевдо-елемента: преди и: след това, за да добавите стрела и малък кръг на етикета:

И тогава се натъкнем на проблем. Не успяхме да използвате блок собственост на сенките, тъй като сме решили и преди. Тъй като ние попита посока абсолютно позициониране и го поставете извън блока. Така, че прилагането на имотите в сянка на блок сянка ще бъде около текста и кръг, а не стрела, както бихме искали. свойства прилагането на груповото сянката на границата на имота на е невъзможно.

Изглеждаше като този етикет:

Той е сладък, но това не е нещо, което искаме да направим. Затова решихме да се опитаме да направим нещата по различен начин.

Вторият опит

Вторият път, когато се използва по друг начин. Добавили сме подложка до текста и стрелките вместо това създаденият от него някои от тях, за да изглежда като стрела. След това я постави до етикета, и я попитах на имот показалеца-събития: няма;, че е невъзможно да кликнете върху етикет извън това може да се направи в първия вариант.

Единственият проблем с тази опция - ние трябваше да добавите блок педя етикет и връзка, която имаме на етикета, така че трябваше стрелката и ръчно да зададете цвета на фона на него. Към всичко това се затваря единица на сянка, така че да изглежда изрязаното. Ние харесахме този ефект, така че ние добавена анимацията, за да изглежда, като че ли на етикета, тъй като се изплъзне от мястото си. Този ефект може да бъде изключен, ако е необходимо, с преход премахване имот линия.

CSS код е станало по-сложно, но остава ясно:

Ние добавихме ефекти, когато задържите показалеца на мишката към сянката, но HTML код не се е променила много:

Обърнете внимание на допълнително педя маркер, който е необходим, за да създадете стрелката.

След това, ние получихме следното:

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

На страницата с демонстрация на работата може да се види на етикетите на различни цветове.

Ако имате няколко редове с етикети, трябва да добавите външна облицовка, например, долна граница: 20px; в CSS кода до края на .tag на класа, в противен случай psevdotreugolnik насложен върху етикет на следващия ред.