Оформление тегов на CSS3
Теги используются обычно под контентом для его категоризации. Сегодня мы красиво оформим теги используя только CSS3 и HTML.
HTML
Как видим, для создания треугольника на css используется border, но градиенты при этом работать не будут. И идея состояла в использовании box-shadow, чтобы создать своего рода псевдо-градиент, который позволит реализовать иллюзию глубины.
<a href="#" class="tag">
Текст
</a>CSS
Мы использовали псевдо свойства before и after, чтобы получить стрелку и маленький кружок.
.tag {
font-family: Helvetica, Arial, sans-serif;
background: #588fe5;
display: inline-block;
color: #fff;
position: relative;
padding: 10px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin: 0 70px 0 0;
text-decoration: none;
}
.tag:hover {
background-color: #739fe4;
}
.tag:before {
background: #fff;
width: 10px;
height: 10px;
content: "";
display: inline-block;
border-radius: 20px;
margin: 0 5px 0 0;
}
.tag:after {
display: inline-block;
border: 20px solid;
border-color: transparent transparent transparent #588fe5;
height: 0;
width: 0;
position: absolute;
right: -40px;
top: 0;
content: "";
}
.tag:hover:after {
border-color: transparent transparent transparent #739fe4;
}Но в итоге нам пришлось отказаться от идеи использования box-shadow, так как стрелка у нас имела абсолютное позиционирование и располагалась немного правее основного box (тега). То есть любая тень окружила бы текст, кружок, но не стрелку. Применение же тени к border - стрелке, так же не привело бы к желаемому результату.
Пример 2
HTML
<a href="https://pcvector.net" class="tag">
<span class="arrow"></span>
Текст
</a>CSS
Во втором примере, который является развитием предыдущего мы использовали различные методы. Мы добавили отступ padding около текста, и вместо того, чтобы создать стрелку, мы создали её инверсию (см. рисунок ниже). Поместили стрелку около .tag и установили свойство pointer-events: none; - чтобы мы не могли кликать вне .tag.
Единственная проблема этого примера в том, что нужно добавить тег SPAN к анкору и для стрелки должны быть установлены в ручную цвета фона и вдобавок эта инвертированная стрелка блокирует тень. Но в целом нас это устроило, и мы даже добавили эффект скольжения - transition.
.tag {
font-family: Helvetica, Arial, sans-serif;
display: inline-block;
color: #fff;
position: relative;
padding: 10px 35px 10px 10px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin: 0 40px 20px 0;
text-decoration: none;
-webkit-transition: right 0.2s ease-in;
-moz-transition: right 0.2s ease-in;
-ms-transition: right 0.2s ease-in;
background: #d63838;
}
.tag:before {
background: #fff;
width: 10px;
height: 10px;
content: "";
display: inline-block;
border-radius: 20px;
box-shadow: inset 0px 2px 5px rgba(0,0,0,0.2);
margin: 0 5px 0 0;
}
.tag:after {
content: "";
border-radius: 5px;
width: 100%;
height: 100%;
box-shadow: inset 0px 5px 40px rgba(255,255,255,0.4), 0px 0px 10px rgba(0,0,0,0.3);
position: absolute;
left: 0;
top: 0;
}
.tag .arrow {
display: inline-block;
border: 30px solid;
border-color: #fff #fff #fff transparent;
height: 2px;
z-index: 5000;
pointer-events: none;
position: absolute;
-webkit-transition: right 0.2s ease-in;
right: -20px;
top: -12px;
}
.tag:hover {
position: relative;
right: 8px;
}
.tag:hover .arrow {
right: -28px;
}
.tag:hover:after {
box-shadow: inset 0px -5px 30px rgba(255,255,255,0.4), 0px 0px 5px rgba(0,0,0,0.2);
}
.tag:active:after {
box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2);
}Есть также и дополнительное преимущество. Мы можем легко изменить цвет фона просто добавляя другой класс CSS: class="tag orange"
.orange {
background-color: #e45c21;
}
