Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

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

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

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

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


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


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

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


Париж

Пример

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

img {
  border-radius: 8px;
}
Париж

Пример

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

img {
  border-radius: 50%;
}

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

Используйте это borderсвойство для создания эскизов изображений.

Уменьшенное изображение:

Париж

Пример

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>


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

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

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

Пять земель

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

Пример

img {
  max-width: 100%;
  height: auto;
}

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


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

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

Париж

Пример

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Изображения/карты Polaroid

Пять земель

Пять земель

Норвегия

Северное сияние

Пример

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. Чем меньше значение, тем прозрачнее:

лес

непрозрачность 0,2

лес

opacity 0.5

лес

opacity 1
(default)

Example

img {
  opacity: 0.5;
}

Image Text

How to position text in an image:

Example

Cingue Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Try it Yourself:


Image Filters

The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: The filter property is not supported in Internet Explorer or Edge 12.

Example

Change the color of all images to black and white (100% gray):

img {
  filter: grayscale(100%);
}

Tip: Go to our CSS filter Reference to learn more about CSS filters.


Image Hover Overlay

Create an overlay effect on hover:

Example

Fade in text:

Аватар
Hello World

Example

Fade in a box:

Аватар
John

Example

Slide in (top):

Аватар
Hello World

Example

Slide in (bottom):

Аватар
Hello World

Example

Slide in (left):

Аватар
Hello World

Example

Slide in (right):

Аватар
Hello World

Flip an Image

Move your mouse over the image:

Париж

Example

img:hover {
  transform: scaleX(-1);
}

Responsive Image Gallery

CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:

Пять земель
Add a description of the image here
лес
Add a description of the image here
Северное сияние
Add a description of the image here
Горы
Add a description of the image here

Example

.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%;
  }
}

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.


Image Modal (Advanced)

This is an example to demonstrate how CSS and JavaScript can work together.

First, use CSS to create a modal window (dialog box), and hide it by default.

Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:

Северное сияние, Норвегия

Example

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
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;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}