Бесплатный вебинар
23 января в 16:00 (по мск)

Сквозная аналитика. Почему не получается?

Записаться на вебинар

Создаем красивые обьемные 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
blog comments powered by Disqus

Практический online-курс

copyright © 2011–2018 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".