ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Карточки (Открытки)


Avatar

Джон

Архитектор и инженер


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.

Footer

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

Пример (Белые карточки)

<div class="w3-card">
  <p>w3-card</p>
</div>
Попробуйте сами »

Пример (Желтые карточки)

<div class="w3-card w3-yellow">
  <p>w3-card</p>
</div>
Попробуйте сами »

Содержание карточки

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.

Footer

Добавить контейнеры внутри карточки для создания различных разделов:

Пример

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

Фото-карточки

Alps

Итальянские / Австрийские Альпы

Пример

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

Больше примеров

Запрос в друзья

Avatar

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 новый запрос о дружбе


Avatar

Генеральный директор 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>
Попробуйте сами »

Виджет Погоды

Lights
LONDON 60° F

MON

sun

TUE

sun cloud

WED

cloud

Пример

<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&deg; 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>
Попробуйте сами »