Рамки вокруг изображения

Среда, 18 Марта 2015 г. 07:44 + в цитатник

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

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

Рамка вокруг изображения

С помощью 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>

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

Серия сообщений "Уроки по рамочкам+коды":
Часть 1 - Рамочки для текста от Vladarxipoff
Часть 2 - Рамочка новая, поздравительная, новогодняя
...
Часть 24 - Без заголовка
Часть 25 - Без заголовка
Часть 26 - Рамки вокруг изображения
Часть 27 - Рамочки - линии для выделения текста
Часть 28 - Без заголовка
...
Часть 41 - Без заголовка
Часть 42 - Без заголовка
Часть 43 - Без заголовка

Рубрики:

РАМОЧКИ

Понравилось: 3 пользователям

<a href="https://www.liveinternet.ru/users/vladarxipoff/post356686482/">Р Р°РјРєРё РІРѕРєСЂСѓРі РёР·РѕР±СЂР°Р¶РµРЅРёСЏ</a><br/>Р Р°РјРєР° РІРѕРєСЂСѓРі РёР·РѕР±СЂР°Р¶РµРЅРёСЏ

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

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

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

Юлия_Гурбер обратиться по имени Среда, 18 Марта 2015 г. 11:59 (ссылка)

Очень признательна за цитирование!

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

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

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

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

LiveInternetLiveInternet

-Музыка

-Цитатник

-Метки

-Приложения

-Резюме

Архипов Владимир Афанасьевич

-Ссылки

-Фотоальбом

-Рубрики

-Я - фотограф

Мои коллажи

-Всегда под рукой

-

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

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

-Интересы

-Друзья

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

-Сообщества

-Трансляции

-Статистика

Рамки вокруг изображения