W3.CSS Ярлики (мітки та знаки)
Ярлики: Вивчай Програмування! Кожен день!
Ярлики як знаки: Falcon Ridge Parkway STOP! ОБЕРЕЖНО!
W3.CSS Класи ярликів
W3.CSS надає один клас для ярликів, міток і знаків:
| Клас | Визначає |
|---|---|
| w3-tag | Прямокутний чорний ярлик/мітка |
Ярлики, мітки та знаки
У світі W3.CSS немає реальної різниці між ярликом, міткою чи знаком.
Ярлики прямокутні
Клас w3-tag створює прямокутний ярлик (мітку або знак). За замовчуванням колір чорний:
Статус: Виконано
Кольорові ярлики
Використовуйте клас w3-color, щоб змінити колір ярлика:
СЛАВА
УКРАЇНІ!
Приклад
<p><span class="w3-tag w3-blue">СЛАВА</span></p>
<p><span class="w3-tag w3-yellow">УКРАЇНІ!</span></p>
Спробуйте самі »
Розміри ярликів
За умовчанням ярлик успадковує розмір свого контейнера.
Класи w3-size (w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo ) можна використовувати для зміни розміру ярлика:
6 6 6
66 66 66
66 66
Можливо, ви захочете додати додатковий відступ до великих тегів:
Приклад
<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">П</span>
<span class="w3-tag w3-xlarge">Т</span>
<span class="w3-tag w3-xlarge">Н</span>
<span class="w3-tag w3-xlarge">П</span>
<span class="w3-tag w3-xlarge">Н</span>
<span class="w3-tag w3-xlarge">Х</span>
Спробуйте самі »
Приклад
<span class="w3-tag w3-jumbo w3-red">С</span>
<span class="w3-tag w3-jumbo">А</span>
<span class="w3-tag w3-jumbo w3-yellow">Л</span>
<span class="w3-tag w3-jumbo">О</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-size можна використовувати для відображення великих знаків:
У ВИПАДКУНЕБЕЗПЕЧНОЇ СИТУАЦІЇ:
БІЖІТЬ, ЯК БОЖЕВІЛЬНІ!
Приклад
<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-size можна використовувати для додавання округлених кутів до знака:
ПРОХАННЯ:НЕ ПУКАЙТЕ
ПІД ВОДОЮ!
Приклад
<span class="w3-tag w3-padding w3-round-large w3-blue 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() не працює в Internet Explorer 9 та раніших версіях.
Ярлики, що обертаються
Клас w3-spin можна використовувати, щоб ярлик обертався на 360 градусів:
STOP
