Як зробити паспарту
Як зробити паспарту
проблема
Зробити навколо зображення паспарту, що складається з рамки і кольоровий області.
Рішення
Паспарту називається картонна рамка для фотографії або малюнка. Використання паспарту візуально збільшує зображення, привертає до нього увагу і робить картину більш ефектною. Звичайно, на веб-сторінці немає потреби імітувати подібну рамку, тому паспарту в даному випадку будемо називати кольорову прямокутну область навколо зображення. На малюнку нижче продемонстрована фотографія з паспарту.
приклад паспарту
Існує кілька способів отримати бажаний результат, способи розрізняються підходом і, природно, кодом.
Застосування padding і background
Найшвидший метод отримання результату полягає в додаванні до селектора IMG стильових властивостей padding і background. Властивість padding задає простір навколо картинки, а background заповнює цей простір бажаним кольором. У прикладі 1 показано, як використовувати ці стильові атрибути спільно з тегом <img>.
Приклад 1. Простий спосіб створення паспарту
<! 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 і навколо картинки автоматично з'явиться паспарту. Мінуси теж є, так, не можна додати рамку навколо самого зображення.
У тому випадку, коли рамка навколо картинки повинна бути обов'язкова, доведеться скористатися іншим способом створення паспарту. При цьому зображення поміщається всередину тега <figure>, і всі бажані стильові властивості додаються для нього. Але тут є одна особливість, щоб браузери коректно відображали паспарту, <figure> слід встановити рядково-блоковим елементом, як показано в прикладі 2. Браузер IE до версії 9.0 не розуміє нові теги HTML5, тому для нього додається скрипт, щоб приклад працював в старих версіях IE.
Приклад 2. Ускладнений спосіб створення паспарту
<! 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>Результат даного прикладу показаний на малюнку.
Малюнок. Паспарту з рамкою навколо фотографії
Навколо <figure> браузери Chrome і Firefox додають автоматичні відступи по 40 пікселів, щоб наше паспарту виглядало у всіх браузерах однаково, в прикладі додано властивість margin з нульовим значенням.
Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.