CSS Стилізація зображень
Дізнайтесь, як стилізувати зображення за допомогою CSS.
Округлі зображення
Використовуйте властивість border-radius для створення округлених зображень:
Мініатюрні зображення
Використовуйте властивість border для створення зменшених зображень.
Мініатюрне зображення:
Приклад
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="../images/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>
Спробуйте самі »
Адаптивні зображення
Адаптивні зображення автоматично підлаштовуються під розмір екрану.
Змініть розмір вікна браузера, щоб побачити ефект:
Якщо ви хочете, щоб зображення зменшувалось, але воно не повинно бути більше початкового розміру, додайте наступне:
Порада: Дізнайтесь більше про адаптивний веб-дизайн в CSS RWD Підручнику на нашому сайті W3Schools українською.
Центрувати зображення
Щоб відцентрувати зображення, встановіть для лівого і правого поля значення auto і додайте його в елемент block:
Polaroid зображення / Карточки
Cinque Terre
Північне сяйво
Приклад
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. Чим нижче значення, тим прозоріше:
opacity 0.2
opacity 0.5
opacity 1
(за замовчуванням)
Примітка: IE8 та більш ранні версії використовують filter:alpha(opacity=x). Значення x може приймати значення від 0 до 100. Більш низьке значення робить елемент більш прозорим.
Приклад
img {
opacity: 0.5;
filter: alpha(opacity=50); /* Для IE8 і більш ранніх версій */
}
Спробуйте самі »
Текст на зображенні
Як розмістити текст на зображенні:
Приклад
Спробуйте самі:
Вгорі зліва » Вгорі справа » Внизу зліва » Внизу справа » В центрі »Фільтри зображень
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-фільтри.
Накладення при наведенні на зображення
Створити ефект накладення при наведенні:
Відобразити зображення
Наведіть вказівник миші на зображення:
Адаптивна галерея зображень
CSS можна використовувати для створення галерей зображень. В цьому прикладі використовуються медіа-запити для перевпорядкування зображень на екранах різних розмірів. Змініть розмір вікна браузера, щоб побачити ефект:
Приклад
.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 Підручнику на нашому сайті W3Schools українською.
Модальне зображення (додатково)
Це приклад, що демонструє, як CSS та JavaScript можуть працювати разом.
По-перше, використовуйте CSS, щоб створити модальне вікно (діалогове вікно), і сховати його за замовчуванням.
Потім використовуйте JavaScript, щоб показати модальне вікно та відобразити зображення всередині модального вікна, коли користувач натискає на зображення:
Приклад
// Отримати модальне вікно
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";
}
Спробуйте самі »
