Рамка вокруг изображений
Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.
Рис. 1. Пример паспарту
Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?
За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс :hover . Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.
Как изменить цвет рамки вокруг изображения-ссылки?
Рамка вокруг изображения появляется в том случае, когда к тегу добавляется свойство border с ненулевым значением и при создании изображения-ссылки. При этом тег
хранится внутри контейнера . Независимо от ситуации цвет рамки устанавливается автоматически, однако через стили можно задать любой желаемый цвет границы.
Как убрать рамку вокруг изображений-ссылок?
Как добавить рамку к изображению?
Для добавления рамки вокруг картинки применяется стилевое свойство border , которое следует добавлять к селектору IMG . В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как добавить рамку к изображению?
Установить вокруг изображения рамку заданного цвета и толщины.
Решение
Для добавления рамки вокруг картинки применяется стилевое свойство border , которое следует добавить к селектору IMG . В качестве значения одновременно указывается толщина границы, её стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать img . В примере 1 приведен полный код для добавления рамки к изображениям на странице.
Пример 1. Добавление рамки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Винни-Пух img Результат данного примера показан на рис. 1.
Рис. 1. Изображение с рамкой
В данном случае рамка будет добавляться ко всем изображениям на странице. Чтобы установить рамку только для выбранных рисунков, можно воспользоваться стилевым классом, указывая его для определенных тегов (пример 2).
Пример 2. Добавление рамки к избранным рисункам
HTML5 CSS 2.1 IE Cr Op Sa Fx
Винни-Пух .frame
В данном примере введён стилевой класс frame , который добавляется к выбранным рисункам с помощью атрибута class .
Рамка вокруг изображения
Кроме регулировки расстояния до текста, есть еще один способ отделить картинку от остального содержимого страницы.
Отделить изображение от текста можно, поступив с ним, как с обычной картиной: поставив в рамку. Это делается с помощью атрибута border, значение которого указывает ширину рамки в пикселах.
В листинге 4.6 задана рамка шириной 10 пикселов, а слева и справа указаны разумные расстояния по 50 пикселов. На рис. 4.6 видно, что с такими параметрами изображение выглядит намного лучше, чем в предыдущем примере, и текст гораздо проще воспринимать.
Рис. 4.6. Рамка
Листинг 4.6. Задание рамки вокруг изображения
Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРес
Читайте также
Вокруг модулей
Вокруг модулей В этой главе были рассмотрены особенности написания, сборки, загрузки и выгрузки модулей ядра. Мы обсудили, что такое модули и каким образом ядро операционной системы Linux, несмотря на то что оно является монолитным, может загружать код динамически. Были
Рамка
Рамка Инструмент Рамка предназначен для подрезки краев изображения. Чтобы подрезать края, выберите данный инструмент и поместите указатель на левую верхнюю точку изображения, которое должно остаться после подрезки. Далее, нажав и удерживая левую кнопку мыши,
Frame (Рамка)
Frame (Рамка) Это один из самых простых фильтров пакета. Он позволяет помещать изображение в рамку. Материал рамки можно выбрать из большого количества изображений: рамка может быть из дерева, из геометрических объектов или выполнена в виде декоративных виньеток.Фильтр не
Edges, Round (Круглая рамка) иEdges, Square (Прямоугольная рамка)
Edges, Round (Круглая рамка) иEdges, Square (Прямоугольная рамка) В эти две группы входят более 30 фильтров, создающих обрамляющие рамки для изображения. Фильтры группы Edges, Round (Круглая рамка) создают круглые рамки, а фильтры категории Edges, Square (Прямоугольная рамка) – прямоугольные.
Поворот вокруг оси
Поворот вокруг оси В двумерном пространстве команда ROTATE производит поворот объекта вокруг указанной точки; при этом направление поворота определяется текущей ПСК. При работе в трехмерном пространстве объект поворачивается вокруг оси. Ось может определяться указанием
Window (Рамка)
Window (Рамка) Этот режим служит для выделения объектов, полностью попадающих внутрь прямоугольной рамки. Рамку определяют указанием начальной точки в любом месте области рисования и перемещением указателя мыши вправо. При этом в командном окне выводится приглашение
Window Polygon (Рамка-многоугольник)
Window Polygon (Рамка-многоугольник) Этот режим подобен Window (Рамка), но в отличие от него позволяет указывать область в виде многоугольника. Многоугольник формируется путем последовательного выбора точек около объектов, которые вы хотите выделить. Форма многоугольника может
10.4.6. Обертка вокруг DBI
10.4.6. Обертка вокруг DBI Теоретически интерфейс DBI обеспечивает доступ к любым базам данных. Иными словами, один и тот же код должен работать и с Oracle, и с MySQL, и с PostgreSQL, и с любой другой СУБД, стоит лишь изменить одну строку, в которой указан нужный адаптер. Иногда эта идеология
Поворот вокруг оси
Поворот вокруг оси В двумерном пространстве команда ROTATE производит поворот объекта вокруг указанной точки; при этом направление поворота определяется текущей ПСК. При работе в трехмерном пространстве объект поворачивается вокруг оси. Ось может определяться указанием
Поворот вокруг оси
Поворот вокруг оси В двумерном пространстве команда ROTATE производит поворот объекта вокруг указанной точки; при этом направление поворота определяется текущей ПСК. При работе в трехмерном пространстве объект поворачивается вокруг оси. Ось может определяться указанием
3D-рамка для текстовых компонентов
3D-рамка для текстовых компонентов Один из примеров создания текстового компонента с трехмерной декоративной контурной рамкой (для создания компонента потребовалось около получаса. Он демонстрирует только принцип получения рамки. Я не стал колдовать над свойствами
Поворот вокруг оси
Поворот вокруг оси Команда 3DROTATE вращает объекты вокруг базовой точки, при этом на трехмерном виде отображает ручку поворота. Вызывается команда из падающего меню Modify ? 3D Operations ? 3D Rotate или щелчком на пиктограмме 3D Rotate на панели инструментов Modeling.Запросы команды 3DR0TATE:Current
18.2. Оригинальная рамка
18.2. Оригинальная рамка В данном разделе мы рассмотрим простой, но в то же время необычный способ создания рамки для фотографии. Для этого примера подойдет любое изображение, но желательно подобрать снимок, цвета и яркость которого заметно отличаются от цвета
18.4. Рамка из фотопленки
18.4. Рамка из фотопленки Рамка для фотографии не обязательно должна быть прямоугольной. Оформить фото можно, учитывая сюжет снимка. Например, если изображен осенний парк, то вполне уместно будет сделать в Photoshop рамку из пожелтевших листьев, а для фотографии со дня рождения
Как сделать такую рамку вокруг картинки?
Как сделать такую рамку вокруг картинки?
Отслеживать
задан 7 мар 2015 в 23:00
7 мар 2015 в 23:04
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
img.rounded < border-radius: 100px; /* половина длины картинки */ border: 5px solid #3333cc; /* например */ >Картинка (или контейнер) — квадрат
Отслеживать
ответ дан 7 мар 2015 в 23:14
525 3 3 серебряных знака 11 11 бронзовых знаков
@densmith если поставить border-radius половину длины картинки, то рамка не круглая.
8 мар 2015 в 0:25
для этого необходимо ставить border-radius: 50% or добавить половину border
8 мар 2015 в 4:04
8 мар 2015 в 4:11
@soledar10 я вижу, что Ваш пример прекрасно работает. Но у меня почему-то рамка не становиться как положено! dental2.brandivo.com
8 мар 2015 в 9:46
вы задаете контейнеру border, а необходимо img — т.е там контейнер и не нужен
8 мар 2015 в 10:03
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.