W3.CSS Метки / Tags (Ярлыки и Знаки)
Tag (в переводе с английского) - тег, метка, ярлык, бирка.
Метки: Выполнено Новый! Узнать больше!
Метки как знаки: Falcon Ridge Parkway STOP! WATCH OUT!
W3.CSS Классы меток
W3.CSS предоставляет один класс для меток, ярлыков и знаков:
| Класс | Определяет |
|---|---|
| w3-tag | Прямоугольная черная метка/ярлык |
Метки, ярлыки и знаки
В мире W3.CSS нет реальной разницы между меткой, ярлыком или знаком.
Метки прямоугольные
Класс w3-tag создает прямоугольную метку (ярлык или знак). Цвет по умолчанию черный:
Статус: Выполнено
Цветные метки
Используйте класс w3-цвет чтобы изменить цвет метки:
Новый!
Узнать больше!
Пример
<p><span class="w3-tag w3-blue">Новый!</span></p>
<p><span class="w3-tag w3-teal">Узнать больше!</span></p>
Попробуйте сами »
Размеры меток
По умолчанию метка наследует размер своего контейнера.
Классы w3-размер (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo) можгут быть использованы для изменения размера метки:
6 6 6
66 66 66
66 66
Возможно, вы захотите добавить некоторые дополнительные отступы (padding) к большим меткам:
Пример
<span class="w3-tag w3-jumbo w3-blue">66</span>
<span class="w3-tag w3-jumbo w3-blue w3-padding-large">66</span>
Попробуйте сами »
Буквенные метки
Пример
<span class="w3-tag w3-xlarge">A</span>
<span class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">G</span>
<span
class="w3-tag w3-xlarge">U</span>
<span class="w3-tag w3-xlarge">S</span>
<span class="w3-tag w3-xlarge">T</span>
Попробуйте сами »
Пример
<span class="w3-tag w3-jumbo w3-red">S</span>
<span class="w3-tag w3-jumbo">A</span>
<span
class="w3-tag w3-jumbo w3-yellow">L</span>
<span class="w3-tag w3-jumbo">E</span>
Попробуйте сами »
Знаки
Знаки - это ничто иное, как большие метки.
Дорожные знаки
Пример
<div class="w3-tag w3-round w3-green" style="padding:3px">
<div
class="w3-tag w3-round w3-green w3-border w3-border-white">
Falcon
Ridge Parkway
</div>
</div>
Попробуйте сами »
Большие знаки
Классы w3-размер могут быть использованы для отображения больших знаков:
В СЛУЧАЕЧРЕЗВЫЧАЙНОГО ПРОИСШЕСТВИЯ:
БЕЖАТЬ СЛОМЯ ГОЛОВУ!
Пример
<span class="w3-tag w3-xxlarge w3-padding w3-orange w3-center">
<strong>
В СЛУЧАЕ<br>
ЧРЕЗВЫЧАЙНОГО ПРОИСШЕСТВИЯ:<br>
БЕЖАТЬ СЛОМЯ ГОЛОВУ!
</strong>
</span>
Попробуйте сами »
Пример
<span class="w3-tag w3-jumbo w3-green">
49<span class="w3-xlarge">,99</span>
</span>
Попробуйте сами »
Округлые знаки
Классы w3-round-размер могут быть использованы для добавления закругленных углов к знаку:
НИ В КОЕМ СЛУЧАЕНЕ ДЫШИТЕ
ПОД ВОДОЙ
Пример
<span class="w3-tag w3-padding w3-round-large w3-red w3-center">
НИ В КОЕМ СЛУЧАЕ<br>
НЕ ДЫШИТЕ<br>
ПОД ВОДОЙ
</span>
Попробуйте сами »
Вращающиеся метки
Используйте стандартное свойство CSS transform для поворота (вращения) знака:
STOPПример
<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">
STOP
</span>
Попробуйте сами »
Примечание: transform:rotate() не работает в IE 9 и более ранних версиях.
Спиннинг метки
Класс w3-spin может использоваться, чтобы позволить знаку вращаться на 360 градусов:
STOP
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
