Vitamin – сервис для выгодного управления вашей рекламой
  • Все популярные рекламные сети в одном окне
  • Агентское вознаграждение до 16% на личный счет или рекламу
  • Любые дополнительные услуги под ваши потребности
  1. Главная >
  2. Блог >
  3. Создаем красивые обьемные 3D тэги при помощи CSS3

Создаем красивые обьемные 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 стиле.
Высоких конверсий!

blog comments powered by Disqus
Vitamin – сервис для выгодного управления вашей рекламой
  • Все популярные рекламные сети в одном окне
  • Агентское вознаграждение до 16% на личный счет или рекламу
  • Любые дополнительные услуги под ваши потребности
copyright © 2011–2022 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Феникс-Маркетинг". ИНН:7725812838, КПП:772501001, ОГРН: 513774619323915280, Москва, ул. Ленинская слобода, д. 19, стр. 1, этаж/пом 3/25