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

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

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

CSS Стилизация изображений


Узнайте, как стилизовать изображения с помощью CSS.


Округлые изображения

Используйте свойство border-radius для создания округленных изображений:


Paris

Пример

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

img {
  border-radius: 8px;
}
Попробуйте сами »
Paris

Пример

Обведенное изображение:

img {
  border-radius: 50%;
}
Попробуйте сами »

Миниатюрные изображения

Используйте свойство border для создания уменьшенных изображений.

Миниатюрное изображение:

Paris

Пример

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

<img src="paris.jpg" alt="Paris">
Попробуйте сами »

Миниатюрное изображение как ссылка:

Миниатюрное изображение

Пример

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>
Попробуйте сами »

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

Адаптивные изображения автоматически подстраиваются под размер экрана.

Измените размер окна браузера, чтобы увидеть эффект:

Cinque Terre

Если вы хотите, чтобы изображение уменьшалось, но оно не должно быть больше исходного размера, добавьте следующее:

Пример

img {
  max-width: 100%;
  height: auto;
}
Попробуйте сами »

Совет: Узнайте больше об адаптивном веб-дизайне в нашем CSS RWD Учебнике.


Центрировать изображение

Чтобы центрировать изображение, установите для левого и правого поля значение auto и добавьте его в элемент block:

Paris

Пример

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
Попробуйте сами »

Polaroid изображения / Карточки

Cinque Terre

Cinque Terre

Norway

Northern Lights

Пример

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
  text-align: center;
  padding: 10px 20px;
}
Попробуйте сами »

Прозрачное изображение

Свойство opacity может принимать значение от 0,0 до 1,0. Чем ниже значение, тем прозрачнее:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(по умолчанию)

Примечание: IE8 и более ранние версии используют filter:alpha(opacity=x). Значение x может принимать значение от 0 до 100. Более низкое значение делает элемент более прозрачным.

Пример

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}
Попробуйте сами »

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

Как разместить текст на изображении:

Пример

Cingue Terre
Внизу слева
Вверху слева
Вверху справа
Внизу справа
В центре

Попробуйте сами:

Вверху слева » Вверху справа » Внизу слева » Внизу справа » В центре »

Фильтры изображений

CSS свойство filter добавляет визуальные эффекты (такие как размытие и насыщенность) к элементу.

Примечание: Свойство filter не поддерживается в Internet Explorer, Edge 12 или Safari 5.1 и более ранних версиях.

Пример

Изменить цвет всех изображений на черно-белый (100% серый):

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
Попробуйте сами »

Совет: Перейдите в наш CSS filter Справочник, чтобы узнать больше о CSS-фильтрах.


Наложение при наведении на изображение

Создать эффект наложения при наведении:

Пример

Исчезновение за текстом:

Avatar
Hello World
Попробуйте сами »

Пример

Исчезновение за блоком:

Avatar
John
Попробуйте сами »

Пример

Вставка (сверху):

Avatar
Hello World
Попробуйте сами »

Пример

Вставка (снизу):

Avatar
Hello World
Попробуйте сами »

Пример

Вставка (слева):

Avatar
Hello World
Попробуйте сами »

Пример

Вставка (справа):

Avatar
Hello World
Попробуйте сами »

Отразить изображение

Наведите указатель мыши на изображение:

Paris

Пример

img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
Попробуйте сами »

Адаптивная галерея изображений

CSS можно использовать для создания галерей изображений. В этом примере используются медиазапросы для переупорядочения изображений на экранах разных размеров. Измените размер окна браузера, чтобы увидеть эффект:

Cinque Terre
Добавить описание изображения здесь
Forest
Добавить описание изображения здесь
Northern Lights
Добавить описание изображения здесь
Mountains
Добавить описание изображения здесь

Пример

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}
Попробуйте сами »

Совет: Узнайте больше об адаптивном веб-дизайне в нашем CSS RWD Учебнике.


Модальное изображение (дополнительно)

Это пример, демонстрирующий, как CSS и JavaScript могут работать вместе.

Во-первых, используйте CSS, чтобы создать модальное окно (диалоговое окно), и скрыть его по умолчанию.

Затем используйте JavaScript, чтобы показать модальное окно и отобразить изображение внутри модального окна, когда пользователь нажимает на изображение:

Northern Lights, Norway

Пример

// Получить модальное окно
var modal = document.getElementById('myModal');

// Получите изображение и вставьте его в модальное окно - используйте его текст "alt" как подпись
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Получить элемент <span> чтобы закрыть модальное окно
var span = document.getElementsByClassName("close")[0];

// Когда пользователь нажимает на <span> (x), закрывается модальное окно
span.onclick = function() {
  modal.style.display = "none";
}
Попробуйте сами »