Стилизация изображений с помощью CSS
CSS предлагает несколько способов стилизации изображений, и этот урок разбирает их по порядку.
Скруглённые изображения
Скруглённые изображения создаются с помощью свойства border-radius.
Совет: О том, как придавать изображениям форму (обрезать их) в виде кругов, эллипсов и многоугольников, рассказывается в главе «Формы изображений CSS».
Скруглённое изображение
Для скруглённых углов изображения достаточно border-radius: 8px.
Prompt
Создайте страницу, отображающую изображение со скруглёнными углами с помощью border-radius: 8px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded Image</title>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Rounded Image</h2>
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
</body>
</html>
Круглое изображение
Изображение становится кругом при border-radius: 50%.
Prompt
Создайте страницу, отображающую изображение, оформленное в виде круга с помощью border-radius: 50%.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circled Image</title>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Circled Image</h2>
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="300">
</body>
</html>
Изображения-миниатюры
Изображения-миниатюры создаются на основе свойства border.
Изображение-миниатюра
Рамка, border-radius и padding вместе превращают это изображение в миниатюру.
Prompt
Создайте страницу, отображающую изображение, оформленное в виде миниатюры со светлой рамкой, border-radius и padding.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Image</title>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<h2>Thumbnail Image</h2>
<img src="img_5terre.jpg" alt="Cinque Terre">
</body>
</html>
Миниатюра как ссылка
Если поместить изображение-миниатюру в тег anchor, оно становится ссылкой, а box-shadow добавляет ему эффект наведения.
Prompt
Создайте страницу, отображающую миниатюру изображения, обёрнутую в ссылку. Добавьте эффект наведения с box-shadow на изображении.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Image as Link</title>
<style>
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);
}
</style>
</head>
<body>
<h2>Thumbnail Image as Link</h2>
<a href="https://prompt-cookbook.com" target="_blank">
<img src="img_5terre.jpg" alt="Cinque Terre">
</a>
</body>
</html>
Адаптивные изображения
Изображение является адаптивным, когда само подстраивается под размер экрана.
Если задать max-width: 100% и height: auto, изображение будет уменьшаться при необходимости, но не вырастет сверх своего исходного размера.
Совет: Адаптивному веб-дизайну посвящён отдельный материал в учебнике CSS RWD.
Пример
Prompt
Создайте страницу с адаптивным изображением, которое уменьшается при необходимости, но никогда не превышает свой исходный размер, используя max-width: 100% и height: auto.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect.</p>
<img src="img_5terre.jpg" alt="Cinque Terre" width="1000" height="300">
</body>
</html>
Изображения / карточки в стиле Polaroid
Эффект box-shadow и текстовая подпись под изображением дают карточку изображения в стиле Polaroid.
Пример
Prompt
Создайте страницу с двумя карточками изображений в стиле полароид. У каждой карточки изображение сверху и текстовая подпись снизу, с box-shadow для эффекта карточки.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polaroid Images / Cards</title>
<style>
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);
margin-bottom: 25px;
}
img {
width: 100%;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>Polaroid Images / Cards</h2>
<div class="polaroid">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="container">
<p>Cinque Terre</p>
</div>
</div>
<div class="polaroid">
<img src="img_lights.jpg" alt="Northern Lights">
<div class="container">
<p>Northern Lights</p>
</div>
</div>
</body>
</html>
Адаптивная галерея изображений
Галереи изображений тоже можно сделать адаптивными с помощью CSS: медиазапросы переупорядочивают изображения для экранов разного размера.
Совет: Адаптивному веб-дизайну посвящён отдельный материал в учебнике CSS RWD.
Пример
Prompt
Создайте с помощью CSS адаптивную галерею изображений. Отображайте четыре изображения в ряд на больших экранах, по два в ряд на средних экранах (max-width: 768px) и по одному в ряд на маленьких экранах (max-width: 480px). Используйте медиазапросы.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
div.gallery-item {
width: calc(25% - 20px);
margin: 10px;
}
div.gallery-item img {
width: 100%;
border-radius: 4px;
}
div.gallery-item .desc {
text-align: center;
padding: 8px;
}
@media only screen and (max-width: 768px) {
div.gallery-item {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 480px) {
div.gallery-item {
width: calc(100% - 20px);
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<p>Resize the browser window to see the effect.</p>
<div class="gallery">
<div class="gallery-item">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<img src="https://prompt-cookbook.com" alt="Green Forest">
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<img src="img_lights.jpg" alt="Northern Lights">
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<img src="img_mountains.jpg" alt="Mountains">
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>