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="Alps">
<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>
Попробуйте сами »
