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

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 Изображения


Закругленное изображение:

Northern Lights

Круглое изображение:

Forest

Изображение с границей:

Mountains

Текст на изображении:

Nature
Природа

Закругленное изображение

Norway

Класс w3-round добавляет закругленные углы к изображению:

Пример

<img src="img_snowtops.jpg" class="w3-round" alt="Norway">
Попробуйте сами »

Круглое изображение

Norway

Класс w3-circle формирует изображение в круг:

Пример

<img src="snowtops.jpg" class="w3-circle" alt="Alps">
Попробуйте сами »

Изображение с границей

Norway

Класс w3-border добавляет границы вокруг изображения:

Пример

<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps">
Попробуйте сами »

Изображение как карточка

Оберните любой из классов w3-card-* вокруг элемента <img> чтобы отобразить его как карточку (добавьте тени):

Lights

Админ всех админов

Вася

Админ всех админов

Пример

<div class="w3-card-4">
  <img src="img_avatar.png" alt="Админ всех админов">
</div>
Попробуйте сами »

Текст на изображении

Разместите текст на изображении с помощью w3-display-классов:

Lights

Top Left

Top Right

Bottom Left

Bottom Right

Left

Right

Middle

Top Middle

Bottom Middle

Пример

<div class="w3-display-container">
  <img src="img_lights.jpg" alt="Lights">
  <div class="w3-display-topleft w3-container">Top Left</div>
  <div class="w3-display-topright w3-container">Top Right</div>
  <div class="w3-display-bottomleft w3-container">Bottom Left</div>
  <div class="w3-display-bottomright w3-container">Bottom Right</div>
  <div class="w3-display-left w3-container">Left</div>
  <div class="w3-display-right w3-container">Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
  <div class="w3-display-topmiddle w3-container">Top Middle</div>
  <div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div>
Попробуйте сами »

Адаптивные изображения

Изображение может быть настроено на автоматическое изменение размера в соответствии с размером его контейнера.

Если вы хотите, чтобы изображение уменьшалось, но оно не должно быть больше исходного размера, используйте класс w3-image.

Пример

<img src="img_lights.jpg" alt="Lights" class="w3-image">
Попробуйте сами »

Если вы хотите, чтобы изображение реагировало на увеличение и уменьшение масштаба, установите для CSS свойства width значение 100%:

Пример

<img src="img_lights.jpg" alt="Lights" style="width:100%">
Попробуйте сами »

Если вы хотите ограничить адаптивное изображение максимальным размером, используйте свойство max-width:

Пример

<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">
Попробуйте сами »

Непрозрачность / Opacity

Классы w3-opacity делают изображения прозрачными:

Непрозрачность

Обычное

Непрозрачность

w3-opacity-min

Непрозрачность

w3-opacity

Непрозрачность

w3-opacity-max

Пример

<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">
Попробуйте сами »

Оттенки серого

Классы w3-grayscale добавляют эффект серого к изображению:

Эффект серого на изображении

Обычное

Эффект серого на изображении

w3-grayscale-min

Эффект серого на изображении

w3-grayscale

Эффект серого на изображении

w3-grayscale-max

Пример

<img src="image.jpg" alt="Table" class="w3-grayscale-min">
<img src="image.jpg" alt="Table" class="w3-grayscale">
<img src="image.jpg" alt="Table" class="w3-grayscale-max">
Попробуйте сами »

Примечание: Классы w3-grayscale не поддерживаются в IE 11 и более ранних версиях.


Сепия

Классы w3-sepia добавляют эффект сепии к изображению:

Эффект сепия на изображении отсутствует

Обычное

Минимальный эффект сепия на изображении

w3-sepia-min

Эффект сепия на изображении

w3-sepia

Максимальный эффект сепия на изображении

w3-sepia-max

Пример

<img src="image.jpg" alt="Table" class="w3-sepia-min">
<img src="image.jpg" alt="Table" class="w3-sepia">
<img src="image.jpg" alt="Table" class="w3-sepia-max">
Попробуйте сами »

Примечание: Классы w3-sepia не поддерживаются в IE 11 и более ранних версиях.


Эффекты при наведении

Вы также можете добавить специальные эффекты при наведении курсора мыши.

Norway

w3-hover-opacity

Norway

w3-hover-grayscale

Norway

w3-hover-sepia

Пример

<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia">
Попробуйте сами »

Непрозрачность выключена

Добавить прозрачность при наведении:

Norway

Удалить прозрачность при наведении:

Norway

Класс w3-hover-opacity добавляет прозрачность изображению при наведении мыши, а класс w3-hover-opacity-off удаляет прозрачность при наведении курсора.

Пример

<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Альпы">
Попробуйте сами »

Создание фотоальбома

В этом примере мы используем систему Responsive Grid W3.CSS (адаптивная сетка W3.CSS) для создания фотоальбома, который хорошо выглядит на всех устройствах. Вы узнаете больше об этом позже.

Лето 2015

Создание фотоальбома с помощью W3.CSS

5 Terre

Создание фотоальбома с помощью W3.CSS

Monterosso

Создание фотоальбома с помощью W3.CSS

Vernazza

Создание фотоальбома с помощью W3.CSS

Manarola

Создание фотоальбома с помощью W3.CSS

Corniglia

Создание фотоальбома с помощью W3.CSS

Riomaggiore


Пример

<div class="w3-third">
  <div class="w3-card">
    <img src="img_monterosso.jpg" style="width:100%">
    <div class="w3-container">
      <h4>Monterosso</h4>
    </div>
  </div>
</div>
Попробуйте сами »