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

Воскресенье, 01 Февраля 2015 г. 23:11 + в цитатник

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

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

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

С помощью 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 - Как сделать бегущий текст на картинке, без всякого редактора
Часть 2 - Как разделить текст на 2 части
...
Часть 7 - Тег "Marquee" - Двигаюшийся текст и не только
Часть 8 - КАК БЫСТРО СДЕЛАТЬ ОТКРЫТКИ В ОНЛАЙН
Часть 9 - Рамка вокруг изображения
Часть 10 - Анимация сборник (салют, сердечки и т.д.)
Часть 11 - Как наложить ФЛЕШ, на прозрачном фоне, на любую картинку
...
Часть 37 - Красивые слайд-шоу в ваш дневник
Часть 38 - Бегущий текст
Часть 39 - Создать анимацию онлайн

Метки: работа с картинками

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

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

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

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

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

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

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

LiveInternetLiveInternet

-Метки

-Цитатник

-Приложения

-Рубрики

-Ссылки

-Музыка

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

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

-Друзья

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

-Сообщества

-Статистика

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