Приветствуем наших читателей в статье CSS — картинки. Сегодня разберем весьма интересную тему — стилизация изображений. Узнаем как создать галерею, поместить текст на картинке, сделать ее прозрачной, размытой или черно-белой.
CSS — стилизация изображений
1. CSS — картинки: Закругленные изображения
Используйте свойство border-radius, чтобы закруглить изображение по краям. Это сделает его необычным и непохожим на другие изображения.
Закругленные углы:
|
1 2 3 |
img { border-radius: 8px; } |
Закругленное изображение:
|
1 2 3 |
img { border-radius: 50%; } |
2. Миниатюра изображений
Используйте свойство border для создания миниатюрных изображений:
|
1 2 3 4 5 6 |
img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; } |
3. Адаптивные изображения
Если есть необходимость подкорректировать отображения картинки во все окно, воспользуемся известными свойствами width и height:
Не старайтесь сделать изображение больше максимального размера, иначе потеряете качество картинки. Подробнее об адаптивном дизайне вы можете узнать тут.
|
1 2 3 4 |
img { width: 100%; height: auto; } |
4. CSS Картинки — Центрировать изображение
Для того, чтобы сделать отображения изображения по центру, добавьте к нему свойство display: block, и установите отступы margin-left, margin-right: auto:
|
1 2 3 4 5 6 |
img { display: block; margin-left: auto; margin-right: auto; width: 50%; } |
5. Прозрачные изображения
Если вы хотите сделать изображение полупрозрачным или прозрачным используйте свойство opacity.
Чем меньше значение, тем прозрачнее будет изображение.
opacity: 0.3
opacity: 0.8
|
1 2 3 |
img { opacity: 0.5; } |
6. Текст на картинке
Вы можете стилизовать изображение с помощью CSS добавив на него текст. Примеры:
7. Фильтры изображений
Вы можете добавить отличные визуальные эффекты с помощью свойства filter:
|
1 2 3 |
img { filter: grayscale(100%); } |
Более подробный список можете узнать здесь.
8. CSS Картинки — Зеркальное отражение
Вы можете реализовать зеркальное отражение при наведении курсора на изображение с помощью свойства transform:
|
1 2 3 |
img:hover { transform: scaleX(-1); } |
Так же возможно создавать красивые адаптивные галереи с использованием медиа запросов и модальные изображения, с использованием css и javascript.
Чтож, теперь вы можете прекрасно стилизовать картинки на страницах своего сайта с помощью свойств CSS. Надеемся статья была полезной для вас! Подписывайтесь на наш YouTube-канал и группу в ВК! Спасибо за внимание. В дальнейшем мы будем развивать тему по CSS и HTML в рамках обучения новичков-дизайнеров и веб-мастеров, которые хотят расширить свои знания в этой теме. В ближайших двух темах мы опишем свойства display и align.