Как вставить изображение в рамочку?

Суббота, 25 Февраля 2023 г. 10:41 + в цитатник

Цитата сообщения Юлия_Гурбер

Прочитать целиком В свой цитатник или сообщество!

Как вставить изображение в рамочку?
Рамка вокруг изображения

С помощью CSS можно вокруг любого изображения сделать симпатичную
рамку-обводку. Поскольку у стилевого свойства border есть несколько значений,
то и рамочки могут быть разными по стилю, цвету и толщине.

Название цвета указываем по-английски. Значения меняем в строке:
style="border: 10px double Blue", где 10 — толщина, double — стиль, Blue — цвет.
Сначала покажу примеры рамок, а ниже представлю их коды.

Вариант 1

Изображение
заключено в двойную
рамку: стиль double;

Вариант 2

Левый край рамки
темнее правого:
стиль inset;

Вариант 3

Правый край рамки
темнее левого:
стиль outset;

Вариант 4

Пунктирная рамка
вокруг изображения
из точек: стиль dotted;

Вариант 5

Пунктирная рамка
вокруг изображения
из коротких отрезков:
стиль dashed;

Вариант 6

Сплошная рамка
вокруг изображения:
стиль solid;

Вариант 7

А эта рамка весьма
необычная. У неё
левая и верхняя
сторона имеют свой
тип, цвет и размер.

Вариант 1:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px double Blue" /></p>

Вариант 2:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px inset Pink" /></p>

Вариант 3:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px outset Orange" /></p>

Вариант 4:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px dotted Red" /></p>

Вариант 5:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px dashed Green" /></p>

Вариант 6:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px solid Gold" /></p>

Вариант 7:

<p><img src="Адрес изображения" width="Ширина изображения" height="Высота изображения" align="absmiddle" style="border: 10px solid Green; border-top-style: dashed; border-top-color: Orange; border-left: 3px solid Red; border-left-style: dotted; padding: 5px; border=" /></p>

Подготовила Юлия Гурбер

Рубрики:

оформление дневника,/рамки,
оформление дневника,/мой дневник, всё для блога,

<a href="http://www.tanyusha100.ru/post498315672/">РљР°Рє РІСЃС‚Р°РІРёС‚СЊ РёР·РѕР±СЂР°Р¶РµРЅРёРµ РІ СЂР°РјРѕС‡РєСѓ?</a><br/>РљР°Рє РІСЃС‚Р°РІРёС‚СЊ РёР·РѕР±СЂР°Р¶РµРЅРёРµ РІ СЂР°РјРѕС‡РєСѓ?
Р Р°РјРєР° РІРѕРєСЂСѓРі РёР·РѕР±СЂР°Р¶РµРЅРёСЏ

РЎ РїРѕРјРѕС‰СЊСЋ CSS РјРѕР¶РЅРѕ РІРѕРєСЂСѓРі Р»СЋР±РѕРіРѕ РёР·РѕР±СЂР°Р¶РµРЅРёСЏ СЃРґРµР»Р°С‚СЊ СЃРёРјРїР°С‚РёС‡РЅСѓСЋ 
СЂР°РјРєСѓ-РѕР±РІРѕРґРєСѓ. РџРѕСЃРєРѕР»СЊРєСѓ Сѓ СЃС‚РёР»РµРІРѕРіРѕ СЃРІРѕР№СЃС‚РІР° border РµСЃС‚СЊ РЅРµСЃРєРѕР»СЊРєРѕ Р·РЅР°С‡РµРЅРёР№, 
С‚Рѕ Рё СЂР°РјРѕС‡РєРё РјРѕРіСѓС‚ Р±С‹С‚СЊ СЂР°Р·РЅС‹РјРё РїРѕ СЃС‚РёР»СЋ, С†РІРµС‚Сѓ Рё С‚РѕР»С‰РёРЅРµ.

РќР°Р·РІР°РЅРёРµ С†РІРµС‚Р° СѓРєР°Р·С‹РІР°РµРј РїРѕ-Р°РЅРіР»РёР№СЃРєРё. Р—РЅР°С‡РµРЅРёСЏ РјРµРЅСЏРµРј РІ СЃС‚СЂРѕРєРµ: 
style="border: 10px double Blue", РіРґРµ 10 вЂ” С‚РѕР»С‰РёРЅР°, double вЂ” СЃС‚РёР»СЊ, Blue вЂ” С†РІРµС‚.
РЎРЅР°С‡Р°Р»Р° РїРѕРєР°Р¶Сѓ РїСЂРёРјРµСЂС‹ СЂР°РјРѕРє, Р° РЅРёР¶Рµ РїСЂРµРґСЃС‚Р°РІР»СЋ РёС… РєРѕРґС‹.

Р’Р°СЂРёР°РЅС‚ 1РР·РѕР±СЂР°Р¶РµРЅРёРµ 
Р·Р°РєР»СЋС‡РµРЅРѕ РІ РґРІРѕР№РЅСѓСЋ 
СЂР°РјРєСѓ: СЃС‚РёР»СЊ double;
Р’Р°СЂРёР°РЅС‚ 2Р›РµРІС‹Р№ РєСЂР°Р№ СЂР°РјРєРё 
С‚РµРјРЅРµРµ РїСЂР°РІРѕРіРѕ: 
СЃС‚... <a href="http://www.tanyusha100.ru/post498315672/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Хитр_из_Дупла обратиться по имени Среда, 01 Марта 2023 г. 21:30 (ссылка)

Tanyusha100, спасибо большое! эти шаблоны мне пригодятся. и не раз!

Ответить С цитатой В цитатник

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Рубрики

-Ссылки

-Цитатник

-Новости

-Музыка

-Приложения

-Помощь новичкам

-

-Метки

-Фотоальбом

-Я - фотограф

Замок коварства и любви

-Поиск по дневнику

-Подписка по e-mail

-Друзья

-Постоянные читатели

-Сообщества

-Трансляции

-Статистика

Как вставить изображение в рамочку?