Рамка вокруг изображений
Для добавления вокруг изображения цветной рамки применяется стилевое свойство border . В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов (пример 1).
Пример 1. Добавление рамки
В данном примере к двум изображениям добавляется класс border , через который устанавливается зелёная рамка (рис. 1).
Рис. 1. Рамка вокруг фотографий
Рамку можно добавлять и при наведении курсора на изображение через псевдокласс :hover . Но это ожидаемо приведёт к сдвигу картинки, поскольку свойство border влияет на общую ширину и высоту элемента. Чтобы избежать такого поведения к селектору img предварительно добавляется невидимая рамка, как показано в примере 2.
Пример 2. Рамка вокруг изображений
Другой способ добавления рамки — использование свойства outline . Оно, в отличие от border , не влияет на размеры элемента, поэтому прозрачная рамка уже не нужна.
img:hover < outline: 3px solid #00af64; /* Цветная рамка */ >Несмотря на схожесть этих свойств, у них есть небольшие различия:
- outline выводится вокруг элемента ( border внутри);
- outline не влияет на размеры элемента ( border добавляется к ширине и высоте элемента);
- outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах ( border можно использовать для любой стороны или всех сразу);
- на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Ещё один способ создания рамки заключается в добавлении фона к . Сам фон сразу не виден, поэтому надо установить ещё свойство padding , его значением выступает толщина рамки (пример 3).
Пример 3. Использование background и padding
Сюда же можно включить свойство border и получить новый вид рамки. Вообще, комбинируя padding , border , outline и background можно сделать множество самых разнообразных рамок.
См. также
- border
- Блочные элементы
- Добавление треугольника
- Колесо для сокращённых свойств
- Открываем блочную модель
- Оформление ссылок
- Повёрнутые рамки
- Свойство border
- Строчные элементы
Рамка вокруг изображений
Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.
Рис. 1. Пример паспарту
Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?
За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс :hover . Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.
Как изменить цвет рамки вокруг изображения-ссылки?
Рамка вокруг изображения появляется в том случае, когда к тегу добавляется свойство border с ненулевым значением и при создании изображения-ссылки. При этом тег
хранится внутри контейнера . Независимо от ситуации цвет рамки устанавливается автоматически, однако через стили можно задать любой желаемый цвет границы.
Как убрать рамку вокруг изображений-ссылок?
Как добавить рамку к изображению?
Для добавления рамки вокруг картинки применяется стилевое свойство border , которое следует добавлять к селектору IMG . В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как сделать паспарту?
Сделать вокруг изображения паспарту, состоящее из рамки и цветной области.
Решение
Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.
Рис. 1. Пример паспарту
Существует несколько способов получить желаемый результат, способы различаются подходом и, естественно, кодом.
Применение padding и background
Самый быстрый метод получения результата состоит в добавлении к селектору IMG стилевых свойств padding и background . Свойство padding задаёт пространство вокруг картинки, а background заполняет это пространство желаемым цветом. В примере 1 показано, как использовать эти стилевые атрибуты совместно с тегом .
Пример 1. Простой способ создания паспарту
HTML5 CSS 2.1 IE Cr Op Sa Fx
Паспарту 
В данном примере вокруг фотографии добавляется паспарту серого цвета, а вокруг него устанавливается рамка толщиной два пиксела.
Плюсом приведенного метода является простота реализации, а также тот момент, что кроме тега не требуется вводить дополнительные элементы. Достаточно для изображения указать введенный нами класс passe-partout и вокруг картинки автоматически появится паспарту. Минусы тоже имеются, так, нельзя добавить рамку вокруг самого изображения.
Использование width
В том случае, когда рамка вокруг картинки должна быть обязательна, придется воспользоваться другим способом создания паспарту. При этом изображение помещается внутрь тега , и все желаемые стилевые свойства добавляются для него . Но здесь имеется одна особенность, чтобы браузеры корректно отображали паспарту, следует установить строчно-блочным элементом, как показано в примере 2. Браузер IE до версии 9.0 не понимает новые теги HTML5, поэтому для него добавляется скрипт, чтобы пример работал в старых версиях IE.
Пример 2. Усложнённый способ создания паспарту
HTML5 CSS 2.1 IE Cr Op Sa Fx
Паспарту
Похожие публикации: