| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Зробити навколо зображення паспарту, що складається з рамки і кольоровий області.
Рішення
Паспарту називається картонна рамка для фотографії або малюнка. Використання паспарту візуально збільшує зображення, привертає до нього увагу і робить картину більш ефектною. Звичайно, на веб-сторінці немає потреби імітувати таку рамку, тому паспарту в даному випадку будемо називати кольорову прямокутну область навколо зображення. На рис. 1 продемонстрована фотографія з паспарту.
Рис. 1. Приклад паспарту
Існує кілька способів отримати бажаний результат, способи розрізняються підходом і, природно, кодом.
Застосування padding і background
Найшвидший метод отримання результату полягає в додаванні до селектору IMG стильових властивостей padding і background. Властивість padding задає простір навколо картинки, а background заповнює цей простір бажаним кольором. У прикладі 1 показано, як використовувати ці стильові атрибути спільно з тегом <img>.
Приклад 1. Простий спосіб створення паспарту
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Паспарту</title>
<style>
.passe-partout {
padding: 30px; /* Ширина паспарту */
background: #f0f0f0; /* Колір фону паспарту */
border: 2px solid #666; /* Параметри рамки */
}
</style>
</head>
<body>
<p ><img src="images/mufta.jpg" alt="Дівчинка з муфтою" class="passe-partout"></p>
</body>
</html>
В даному прикладі навколо фотографії додається паспарту сірого кольору, а навколо нього встановлюється рамка товщиною два пікселя.
Плюсом наведеного методу є простота реалізації, а також той момент, що крім тега <img> не потрібно вводити додаткові елементи. Достатньо для зображення вказати введений нами клас passe-partout і навколо картинки автоматично з'явиться паспарту. Мінуси теж є, так, можна додати рамку навколо самого зображення.
Використання width
У тому випадку, коли рамка навколо зображення повинна бути обов'язкова, доведеться скористатися іншим способом створення паспарту. При цьому зображення поміщається всередину тега <цифра>, і всі бажані стильові властивості додаються для нього. Але тут є одна особливість, щоб браузери коректно відображали паспарту, <figure> слід встановити терміново-блоковим елементом, як показано в прикладі 2. Браузер IE до версії 9.0 не розуміє нові теги HTML5, тому для нього додається скрипт, щоб приклад працював в старих версіях IE.
Приклад 2. Ускладнений спосіб створення паспарту
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Паспарту</title>
<style>
.passe-partout {
padding: 40px; /* Розмір паспарту */
background: #f0f0f0; /* Колір фону паспарту */
border: 2px solid #800000; /* Параметри рамки */
display: inline-block; /* Терміново-блочний елемент */
margin: 0; /* Прибираємо відступи */
}
.passe-partout img {
border: 2px solid #666; /* Рамка навколо зображення */
}
</style>
<!--[if lt IE 9]>
<script>document.createElement('figure');</script>
<![endif]-->
</head>
<body>
<figure class="passe-partout">
<img src="images/siberia.jpg" width="200" height="231" alt="Полярник">
</figure>
</body>
</html>
Результат цього прикладу показано на рис. 2.
Рис. 2. Паспарту з рамкою навколо фотографії
Навколо <figure> браузери Chrome і Firefox додають автоматичні відступи по 40 пікселів, щоб наше паспарту виглядало однаково у всіх браузерах, в прикладі додано властивість margin з нульовим значенням.