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

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 Справочник


W3.CSS Классы


Контейнерные классы

Класс Определяет
w3-container HTML-контейнер с отступом 16 пикселей влево и вправо Попробуй это
  Используется как заголовок Попробуй это
  Используется как нижний колонтитул Попробуй это
w3-panel Контейнер HTML с отступом 16px слева и справа и верхним и нижним полем 16px Попробуй это
  Используется для отображения заметки Попробуй это
  Используется для отображения цитаты Попробуй это
w3-badge Круглый значок Попробуй это
w3-tag Прямоугольная бирка Попробуй это
w3-ul Неупорядоченный список Попробуй это
w3-display-container Контейнер для w3-display-классов (позволяет позиционировать элементы внутри контейнера) Попробуй это
w3-block Класс, который можно использовать для определения полной ширины для любого элемента Попробуй это
w3-code Кодовый контейнер Попробуй это
w3-codespan Контейнер встроенного кода (для фрагментов кода) Попробуй это
w3-content Контейнер для содержимого с фиксированным размером Попробуй это
w3-auto Контейнер для адаптивного по размеру контента Попробуй это
w3-stretch Класс, который удаляет правое и левое поля (особенно полезно для растягивания дополненных строк (w3-row-padding)) Попробуй это

Классы таблицы

Класс Определяет
w3-table Контейнер для таблицы HTML Попробуй это
w3-striped Полосатая таблица Попробуй это
w3-border Таблица с границами Попробуй это
w3-bordered Граничные линии Попробуй это
w3-centered Центрированная таблица Попробуй это
w3-hoverable Таблица при наведении Попробуй это
w3-table-all Установка всех свойств Попробуй это
  Из w3-striped, w3-border и w3-bordered Попробуй это
  Из цветным head Попробуй это
  Из w3-responsive Попробуй это
  Из w3-tiny Попробуй это
  Из w3-small Попробуй это
  Из w3-large Попробуй это
  Из w3-xlarge Попробуй это
  Из w3-xxlarge Попробуй это
  Из w3-xxxlarge Попробуй это
  Из color Попробуй это
  Из w3-jumbo Попробуй это
w3-responsive Создание адаптивной таблицы Попробуй это

Классы карточек

Класс Определяет
w3-card То же, что w3-card-2 Попробуй это
w3-card-2 Контейнер для любого HTML-контента (граничная 2px тень) Попробуй это
w3-card-4 Контейнер для любого HTML-контента (граничная 4px тень) Попробуй это

Классы адаптивности

Класс Определяет
w3-row Контейнер для однорядного жидкого адаптивного контента Попробуй это
w3-row-padding Строка, где все столбцы имеют отступ по умолчанию Попробуй это
w3-auto Контейнер для адаптивного по размеру контента Попробуй это
w3-stretch Класс, который удаляет правую и левую границу Попробуй это
w3-half Половинна (1/2) экрана колонки контейнера Попробуй это
w3-third Треть (1/3) контейнера столбца экрана Попробуй это
w3-twothird Две третих (2/3) экрана столбца контейнера Попробуй это
w3-quarter Четверть (1/4) контейнера столбца экрана Попробуй это
w3-threequarter Три четверти (3/4) контейнера столбца экрана Попробуй это
w3-col Контейнер столбца для любого содержимого HTML Попробуй это
w3-rest Занимает остальную часть ширины столбца Попробуй это
     
l1 - l12 Адаптивные размеры для больших экранов Попробуй это
m1 - m12 Адаптивные размеры для средних экранов Попробуй это
s1 - s12 Адаптивные размеры для маленьких экранов Попробуй это
   
w3-hide-small Скрыть контент на маленьких экранах (менее 601 пикселей) Попробуй это
w3-hide-medium Скрыть контент на средних экранах Попробуй это
w3-hide-large Скрыть контент на больших экранах (более 992 пикселей) Попробуй это
   
w3-image Адаптивное изображение Попробуй это
   
w3-mobile Добавляет адаптивность в первую очередь для мобильных устройств к любому элементу.
Отображает элементы в виде блочных элементов на мобильных устройствах.
Попробуй это

Классы макета

Класс Определяет
w3-cell-row Контейнер для размещения столбцов (ячеек). Попробуй это
w3-cell Столбец (ячейка) макета. Попробуй это
w3-cell-top Выравнивает содержимое в верхней части столбца (ячейки). Попробуй это
w3-cell-middle Выравнивает содержимое по вертикальной середине столбца (ячейки). Попробуй это
w3-cell-bottom Выравнивает содержимое внизу столбца (ячейки). Попробуй это

Классы панелей - Навигация

Класс Определяет
w3-bar Горизонтальная панель Попробуй это
w3-bar-block Вертикальная панель Попробуй это
w3-bar-item Обеспечивает общий стиль для элементов панели Попробуй это
w3-sidebar Боковая панель (Сайдбар) Попробуй это
  Боковая панель может содержать все типы контента Попробуй это
  Боковая панель, перекрывающая основной контент Попробуй это
  Боковая панель, перекрывающая весь основной контент Попробуй это
  Боковая панель, смещающая основной контент вправо Попробуй это
  Боковая панель с наложенным фоном Попробуй это
  Боковая панель на правой стороне Попробуй это
w3-collapse Используется вместе с w3-sidebar для создания полностью автоматической адаптивной боковой навигации. Чтобы этот класс работал, содержимое страницы должно быть в классе "w3-main" Попробуй это
w3-main Контейнер для содержимого страницы при использовании класса w3-collapse для адаптивной боковой навигации Попробуй это
  Полностью автоматическая правосторонняя адаптивная боковая навигация Попробуй это

Классы выпадающего элемента (Dropdown)

w3-dropdown-click Кликабельный dropdown-элемент Попробуй это
w3-dropdown-hover Элемент dropdown при наведении Попробуй это
  Элемент dropdown при наведении (используется в w3-bar) Попробуй это
  Элемент dropdown при наведении (используется в w3-bar-block) Попробуй это
  Элемент dropdown при наведении (используется в w3-sidebar) Попробуй это

Классы кнопок

Класс Определяет
w3-button Прямоугольная кнопка с серым цветом фона при наведении Попробуй это
w3-btn Прямоугольная кнопка с тенями при наведении Попробуй это
w3-circle Может быть использован для создания круглой кнопки Попробуй это
w3-ripple Прямоугольная кнопка с эффектом ряби Попробуй это
  Круглая плавающая кнопка с эффектом ряби Попробуй это
w3-bar Может использоваться для группировки элементов (например, кнопок) в горизонтальной панели Попробуй это
w3-block Класс, который можно использовать для определения полной ширины w3-button Попробуй это
  Полная ширина w3-btn Попробуй это
  Круглая кнопка на всю ширину Попробуй это

Классы ввода / Input

Класс Определяет
w3-input Элементы ввода Попробуй это
  Форма ввода в виде карточки Попробуй это
  Элементы ввода (верхние метки) Попробуй это
  Элементы ввода (нижние метки) Попробуй это
w3-check Тип ввода Флажок (Checkbox) Попробуй это
w3-radio Тип ввода радиокнопка (Radio) Попробуй это
w3-select Элемент выбора ввода Попробуй это
w3-animate-input Анимирует ширину входа до 100% Попробуй это

Классы модала

Класс Определяет
w3-modal Контейнер модала Попробуй это
w3-modal-content pop-up элемент модала Попробуй это
w3-tooltip Элемент всплывающая подсказка Попробуй это
w3-text Текст всплывающей подсказки Попробуй это

Классы анимации

Класс Определяет
w3-animate-top Анимирует элемент сверху от -300px до 0px Попробуй это
w3-animate-left Анимирует элемент слева от -300px до 0px Попробуй это
w3-animate-bottom Анимирует элемент снизу от -300px до 0px Попробуй это
w3-animate-right Анимирует элемент справа от -300px до 0px Попробуй это
w3-animate-opacity Анимирует непрозрачность элемента от 0 до 1 Попробуй это
w3-animate-zoom Анимирует элемент размером от 0 до 100% Попробуй это
w3-animate-fading Анимирует непрозрачность элемента от 0 до 1 и от 1 до 0 (исчезает и появляется) Попробуй это
w3-spin Поворачивает иконку на 360 градусов Попробуй это
  Поворачивает любой элемент на 360 градусов Попробуй это
w3-animate-input Анимирует ширину поля ввода до 100% Попробуй это

Классы шрифта и текста

Класс Определяет
w3-tiny Определяет размер шрифта в 10 пикселей Попробуй это
w3-small Определяет размер шрифта в 12 пикселей Попробуй это
w3-large Определяет размер шрифта 18 пикселей Попробуй это
w3-xlarge Определяет размер шрифта 24 пикселей Попробуй это
w3-xxlarge Определяет размер шрифта 32 пикселей Попробуй это
w3-xxxlarge Определяет размер шрифта 48 пикселей Попробуй это
w3-jumbo Определяет размер шрифта 64 пикселей Попробуй это
w3-wide Определяет более широкий текст Попробуй это
w3-serif Меняет обычный шрифт на шрифт из засечками Попробуй это

Классы отображения / Display

Класс Определяет
w3-center Центрирование контента Попробуй это
w3-left Плавающий элемент влево (float: left) Попробуй это
w3-right Плавающий элемент вправо (float: right) Попробуй это
w3-left-align Выровненный по левому краю текст Попробуй это
w3-right-align Выровненный по правому краю текст Попробуй это
w3-justify Выровненный по правому и левому краю текст Попробуй это
w3-block Класс, который можно использовать для определения полной ширины для любого элемента Попробуй это
w3-circle Округление контента Попробуй это
w3-hide Скрытие контента (display:none) Попробуй это
w3-show Отображение контента (display:block) Попробуй это
w3-show-block Псевдоним w3-show (display:block) Попробуй это
w3-show-inline-block Отображает содержимое в виде встроенного блока (display:inline-block) Попробуй это
w3-top Фиксирует контент вверху страницы Попробуй это
w3-bottom Фиксирует контент внизу страницы Попробуй это
w3-display-container Контейнер для w3-display-классов (position: relative) Попробуй это
w3-display-topleft Отображает содержимое в верхнем левом углу w3-display-container Попробуй это
w3-display-topright Отображает содержимое в верхнем правом углу w3-display-container Попробуй это
w3-display-bottomleft Отображает содержимое в левом нижнем углу w3-display-container Попробуй это
w3-display-bottomright Отображает контент в правом нижнем углу w3-display-container Попробуй это
w3-display-left Отображает содержимое слева (в середине слева) от w3-display-container Попробуй это
w3-display-right Отображает содержимое справа (в центре справа) от w3-display-container Попробуй это
w3-display-middle Отображает контент в середине (в центре) w3-display-container Попробуй это
w3-display-topmiddle Отображает содержимое в верхней середине w3-display-container Попробуй это
w3-display-bottommiddle Отображает содержимое в нижней середине w3-display-container Попробуй это
w3-display-position Отображает содержимое в указанной позиции в контейнере w3-display-container Попробуй это
w3-display-hover Отображает контент при наведении курсора внутри w3-display-container Попробуй это

Классы эффектов

Класс Определяет
w3-opacity Добавляет непрозрачность/прозрачность к элементу (opacity: 0.6) Попробуй это
  Добавьте непрозрачность/прозрачность к тексту Попробуй это
w3-opacity-off Отключает непрозрачность/прозрачность (opacity: 1) Попробуй это
w3-opacity-min Добавляет непрозрачность / прозрачность к элементу (opacity: 0.75) Попробуй это
w3-opacity-max Добавляет непрозрачность/прозрачность к элементу (opacity: 0.25) Попробуй это
w3-grayscale-min Добавляет эффект серого к элементу (grayscale: 50%) Попробуй это
w3-grayscale Добавляет эффект серого к элементу (grayscale: 75%) Попробуй это
w3-grayscale-max Добавляет эффект серого к элементу (grayscale: 100%) Попробуй это
w3-sepia-min Добавляет эффект сепии к элементу (sepia: 50%) Попробуй это
w3-sepia Добавляет эффект сепии к элементу (sepia: 75%) Попробуй это
w3-sepia-max Добавляет эффект сепии к элементу (sepia: 100%) Попробуй это
w3-overlay Создает эффект наложения Попробуй это

Классы цвета фона / Background Color

Класс Определяет
w3-red Цвет фона красный Попробуй это
w3-pink Цвет фона розовый Попробуй это
w3-purple Цвет фона фиолетовый Попробуй это
w3-deep-purple Цвет фона темно-фиолетовый Попробуй это
w3-indigo Цвет фона индиго Попробуй это
w3-blue Цвет фона синий Попробуй это
w3-light-blue Цвет фона светло-синий Попробуй это
w3-cyan Цвет фона голубой Попробуй это
w3-aqua Цвет фона аква Попробуй это
w3-teal Цвет фона бирюзовый Попробуй это
w3-green Цвет фона зеленый Попробуй это
w3-light-green Цвет фона светло-зеленый Попробуй это
w3-lime Цвет фона салатовый Попробуй это
w3-sand Цвет фона песочный Попробуй это
w3-khaki Цвет фона хаки Попробуй это
w3-yellow Цвет фона желтый Попробуй это
w3-amber Цвет фона янтарный Попробуй это
w3-orange Цвет фона оранжевый Попробуй это
w3-deep-orange Цвет фона темно-оранжевый Попробуй это
w3-blue-grey Цвет фона сине-серый Попробуй это
w3-brown Цвет фона коричневый Попробуй это
w3-light-grey Цвет фона светло-серый Попробуй это
w3-grey Цвет фона серый Попробуй это
w3-dark-grey Цвет фона темно-серый Попробуй это
w3-black Цвет фона черный Попробуй это
w3-pale-red Цвет фона бледно-красный Попробуй это
w3-pale-yellow Цвет фона бледно-желтый Попробуй это
w3-pale-green Цвет фона бледно-зеленый Попробуй это
w3-pale-blue Цвет фона бледно-синий Попробуй это
w3-transparent Прозрачный фоновый цвет  

Цветовые классы при наведении

Приведенные выше цвета также можно использовать как классы при наведении:

Класс Определяет
w3-hover-white Белый цвет при наведении Попробуй это
w3-hover-black Черный цвет при наведении Попробуй это
w3-hover-red Красный цвет при наведении Попробуй это
w3-hover-blue Синий цвет при наведении Попробуй это
w3-hover-green Зеленый цвет при наведении Попробуй это
w3-hover-aqua Аква цвет при наведении Попробуй это
w3-hover-orange Оранжевый цвет при наведении Попробуй это
w3-hover-grey Серый цвет при наведении Попробуй это
w3-hover-pale-green Бледно-зеленый цвет при наведении Попробуй это

Цветовые классы текста

Класс Определяет
w3-text-red Красный цвет текста Попробуй это
w3-text-green Зеленый цвет текста Попробуй это
w3-text-blue Синий цвет текста Попробуй это
w3-text-yellow Желтый цвет текста Попробуй это
w3-text-light-grey Светло-серый цвет текста Попробуй это
w3-text-grey Серый цвет текста Попробуй это
w3-text-dark-grey Темно-серый цвет текста Попробуй это
w3-text-black Черный цвет текста Попробуй это
w3-text-white Белый цвет текста Попробуй это
w3-text-pink Розовый цвет текста Попробуй это
w3-text-purple Цвет текста фиолетовый Попробуй это
w3-text-teal Цвет текста бирюзовый Попробуй это
w3-text-light-green Цвет текста светло-зеленый Попробуй это
w3-text-lime Цвет текста салатовый Попробуй это
w3-text-deep-purple Цвет текста темно-фиолетовый Попробуй это
w3-text-indigo Цвет текста индиго Попробуй это
w3-text-light-blue Цвет текста светло-синий Попробуй это
w3-text-blue-grey Цвет текста сине-серый Попробуй это
w3-text-cyan Цвет текста голубой Попробуй это
w3-text-aqua Цвет текста аква Попробуй это
w3-text-amber Цвет текста янтарный Попробуй это
w3-text-orange Цвет текста оранжевый Попробуй это
w3-text-deep-orange Цвет текста темно-оранжевый Попробуй это
w3-text-sand Цвет текста песочный Попробуй это
w3-text-khaki Цвет текста хаки Попробуй это
w3-text-brown Цвет текста коричневый Попробуй это

Классы текста при наведении

Приведенные выше текстовые классы также можно использовать как классы при наведении:

Класс Определяет
w3-hover-text-red Цвет текста при наведении красный Попробуй это
w3-hover-text-green Цвет текста при наведении зеленый Попробуй это
w3-hover-text-blue Цвет текста при наведении синий Попробуй это
w3-hover-text-yellow Цвет текста при наведении желтый Попробуй это

Другие классы при наведении

Класс Определяет
w3-hover-border-цвет Цвет границы при наведении Попробуй это
w3-hover-opacity Добавляет прозрачность элементу при наведении (opacity: 0.6) Попробуй это
w3-hover-opacity-off Удаляет прозрачность из элемента при наведении (непрозрачность 100%) Попробуй это
w3-hover-shadow Добавляет тень к элементу при наведении Попробуй это
w3-hover-grayscale Добавляет черно-белый (100% оттенки серого) эффект к элементу Попробуй это
w3-hover-sepia Добавляет эффект сепии к элементу при наведении Попробуй это
w3-hover-none Удаляет эффекты при наведении на элемент Попробуй это

Классы округлости

Класс Определяет
w3-round Элемент закругленный (граница-радиус) 4px Попробуй это
w3-round-small Элемент закругленный (граница-радиус) 2px Попробуй это
w3-round-medium Элемент закругленный (граница-радиус) 4px Попробуй это
w3-round-large Элемент закругленный (граница-радиус) 8px Попробуй это
w3-round-xlarge Элемент закругленный (граница-радиус) 16px Попробуй это
w3-round-xxlarge Элемент закругленный (граница-радиус) 32px Попробуй это

Классы отступов / Padding

Класс Определяет
w3-padding-small Отступ 4px сверху и снизу, 8px слева и справа. Попробуй это
w3-padding Отступ 8px сверху и снизу, 16px слева и справа. Попробуй это
w3-padding-large Отступ 12px сверху и снизу, 24px слева и справа. Попробуй это
w3-padding-16 Отступ 16px сверху и снизу Попробуй это
w3-padding-24 Отступ 24px сверху и снизу Попробуй это
w3-padding-32 Отступ 32px сверху и снизу Попробуй это
w3-padding-48 Отступ 48px сверху и снизу Попробуй это
w3-padding-64 Отступ 64px сверху и снизу Попробуй это

Классы полей / Margin

Класс Определяет
w3-margin Добавляет поле в 16 пикселей к элементу Попробуй это
w3-margin-top Добавляет верхнее поле размером 16px к элементу Попробуй это
w3-margin-right Добавляет правое поле размером 16px к элементу Попробуй это
w3-margin-bottom Добавляет нижнее поле размером 16px к элементу Попробуй это
w3-margin-left Добавляет левое поле размером 16px к элементу Попробуй это
w3-section Добавляет верхнее и нижнее поле размером 16px к элементу Попробуй это

Классы границ / Border

Класс Определяет
w3-border Границы (сверху, справа, снизу, слева) Попробуй это
w3-border-top Граница сверху Попробуй это
w3-border-right Граница справа Попробуй это
w3-border-bottom Граница снизу Попробуй это
w3-border-left Граница слева Попробуй это
w3-border-0 Удаляет все границы Попробуй это
w3-border-color Отображает любые определенные границы в указанном цвете (например, красном и т.д.) Попробуй это
w3-bottombar Добавляет толстую нижнюю границу (бар) к элементу Попробуй это
w3-leftbar Добавляет толстую левую границу (бар) к элементу Попробуй это
w3-rightbar Добавляет толстую правую границу (бар) к элементу Попробуй это
w3-topbar Добавляет толстую верхнюю границу (бар) к элементу Попробуй это
w3-hover-border-цвет Цвет границы при наведении Попробуй это