Создаем красивые обьемные 3D тэги при помощи CSS3

Объемные теги

Сегодня мы собираемся создать объемные теги на CSS. Для этого нам понадобится свойства box-shadow, text-shadow и border-radius. Метод, показанный в этом уроке, вы сможете легко добавить на любой веб-сайт.

Мы создадим теги в форме 3D-кнопки. Если у вас есть сайт под управлением WordPress, то вам понадобится этот пример или подобный ему, чтобы стилизовать облако тегов.

HTML

HTML-структура нашего облака тегов:

<div class="tags" id="tags">
    <ul class="tags-list">
        <!-- Разметка тега -->
        <li><a href="#">3D Тег</a></li>
        <!-- ... -->
        <li><a href="#">...</a></li>
    </ul>
</div>

Это простой неупорядоченный список из ссылок на страницы со статьями, помеченные определенными тегами.

CSS

Начнем стилизовать все с облака тегов .tag-list

.tags-list {
overflow: hidden;
line-height: 1.5em;
list-style: none;
display: block;
margin: 0;
padding: 0
}
.tags-list > li {
float: left;
margin: 0 .8em .8em 0
}

Этими стилями мы сначала “слепили” теги в один “комок”, а потом через margin разрезали этот комок “обратно”, и теперь теги показаны в линии, а не в столбик.

Теперь время самих тегов. Придадим ссылкам на теги вид объемных кнопок.

.tags-list a {
display: block;
padding: 0 .6em 3px;
font-size: .9375em;
font-weight: normal;
color: #778187;
background: #f2f2f3;
text-align: center;
text-shadow: 0 1px rgba(255,255,255,0.5);
vertical-align: top;
line-height: 2em;
border: 0px white;
border-radius: 2px;

-webkit-box-shadow: inset 0 -2px rgba(255,255,255,0.1), inset 0 -3px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 -2px rgba(255,255,255,0.1), inset 0 -3px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.05);
box-shadow: inset 0 -2px rgba(255,255,255,0.1), inset 0 -3px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.05);

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

При наведении на ссылку изменим ее цвет, а клике по ней будет выглядеть как нажатие на реальную кнопку

.tags-list a:hover {
color: white;
background: #20aae5;
text-decoration: none;
text-shadow: 0 1px rgba(0,0,0,0.15);
outline: none
}
.tags-list a:active {
padding-bottom: 2px;
border-top: 1px solid white;
-webkit-box-shadow: inset 0 -2px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.05);
box-shadow: inset 0 -2px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.05)
}

Заключение

Теперь у нас есть красивый теги в 3D стиле.
Высоких конверсий!

05-03-2016