W3.CSS Картки
Василь
Архітектор та інженер
W3.CSS Класи карток
W3.CSS надає наступні класи для відображення паперових карток:
| Клас | Визначає |
|---|---|
| w3-card | Те саме, що w3-card-2 |
| w3-card-2 | Контейнер для будь-якого HTML-контенту (тінь від 2px) |
| w3-card-4 | Контейнер для будь-якого HTML-контенту (тінь від 4px) |
Кольорові картки
Щоб відобразити кольорові картки, просто додайте клас w3-color:
w3-card
w3-card-2
w3-card-4
Зміст картки
Header
Якийсь текст.. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Додати контейнери всередині картки для створення різних розділів:
Приклад
<div class="w3-card-4">
<header class="w3-container w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
</div>
<footer class="w3-container w3-blue">
<h5>Footer</h5>
</footer>
</div>
Спробуйте самі »
Фото-картки
Італійські / Австрійські Альпи
Приклад
<div class="w3-card-4">
<img src="img_snowtops.jpg"
alt="Альпи">
<div class="w3-container w3-center">
<p>Італійські / Австрійські Альпи</p>
</div>
</div>
Спробуйте самі »
Ефект при наведенні миші
Клас w3-hover-shadow додає ефект тіні при наведенні курсору - при наведенні миші будь-який елемент буде виглядати як картка (в тому ж стилі, що і w3-card-4).
Наведіть на мене курсор!
Приклад
<div class="w3-green w3-hover-shadow w3-center">
<p>Наведіть на мене!</p>
</div>
Спробуйте самі »
Більше прикладів
Запит в друзі
John Doe
Приклад
<div class="w3-card-4 w3-dark-grey">
<div class="w3-container w3-center">
<h3>Запит в друзі</h3>
<img src="img_avatar3.png" alt="Avatar" style="width:80%">
<h5>John Doe</h5>
<button class="w3-button w3-green">Прийняти</button>
<button class="w3-button w3-red">Відмовити</button>
</div>
</div>
Спробуйте самі »
John Doe
1 новий запит в друзі
Генеральний директор Mighty Schools. Маркетинг та реклама. Шукаю нову роботу й нові можливості.
Приклад
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div class="w3-container">
<p>1 новий запит в друзі</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>Генеральний директор Mighty Schools...</p>
</div>
<button class="w3-button w3-block w3-dark-grey">+ Connect</button>
</div>
Спробуйте самі »
Віджет Погоди
MON
TUE
WED
Приклад
<div class="w3-card-4">
<div class="w3-display-container w3-text-white">
<img src="img_london.jpg" alt="Lights" style="width:100%">
<div class="w3-xlarge w3-display-bottomleft w3-padding">LONDON 60° F</div>
</div>
<div class="w3-row">
<div class="w3-third w3-center">
<h3>MON</h3>
<img src="img_weather_sun.jpg" alt="sun">
</div>
<div class="w3-third w3-center">
<h3>TUE</h3>
<img src="img_weather_cloud.jpg" alt="cloud">
</div>
<div class="w3-third w3-center w3-margin-bottom">
<h3>WED</h3>
<img src="img_weather_clouds.jpg" alt="clouds">
</div>
</div>
</div>
Спробуйте самі »
