Рамки, украшенные картинкой

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

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

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

Рамки, украшенные картинкой

С помощью CSS можно сделать вот такие лёгкие симпатичные рамки с картинкой слева, либо справа от текста.
Не буду вдаваться в подробности, как их собрать с нуля, а поясню самое необходимое. Под каждой рамкой стоит готовый код шаблона.

Ваша картинка будет располагаться слева от текста. При заполнении рамки текстом последний будет обтекать картинку. Если картинка большого размера, то и запись должна быть объёмной, иначе часть изображения выпадет за границы рамки, поскольку за разворот рамки отвечает именно текст.

Ваша подпись

Ваш текст будет располагаться слева направо. При заполнении им рамки текст будет обтекать картинку. Если картинка большого размера, то и запись должна быть объёмной, иначе часть изображения выпадет за границы рамки, поскольку за разворот рамки отвечает именно текст.

Ваша подпись

Рассмотрим, что можно менять внутри рамки.

Итак, ищем строку "img src="ВАША КАРТИНКА" style="float: right; margin: 0px 0px 15px 15px" и аккуратно вставляем адрес изображения.
Атрибут margin: 0px 0px 15px 15px в этой строке — это 4 отступа вокруг изображения в пикселях:
Первая цифра — верхний отступ,
Вторая цифра — правый отступ,
Третья цифра — нижний отступ,
Четвёртая цифра — левый отступ.

За ним в следующей строке видим настройку самого текста:
font-family: Georgia; — это стиль шрифта,
color:#000000; — цвет шрифта,
font-size: 18px; — размер шрифта.

Теперь рассмотрим рамку. Нас интересует самая верхняя строка. Всё по-порядку:

background-color: #F4FC03; — это цвет внутри рамки,
border: 3px #00B344 ridge; — это ширина (3px) бордюра и его цвет (#00B344),
width: 650px; — это ширина нашей рамки, и, наконец,
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
Это четыре внутренних отступа от края рамки (бордюра) до текста.

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

Серия сообщений "создаем рамочки по формуле":
Часть 1 - Простые рамки для выделения текста
Часть 2 - Рамочки с круглыми краями
...
Часть 10 - Фоновое изображение в рамке. Часть 1
Часть 11 - Рамки оригинальные
Часть 12 - Рамки, украшенные картинкой
Часть 13 - Генератор рамочек
Часть 14 - Две рамочки с эффектом движения
...
Часть 19 - Стильные рамки (блоки)
Часть 20 - Рамки оригинальные
Часть 21 - Простые ОБЪЕМНЫЕ рамочки разной формы

Метки: создание рамочки
Понравилось: 1 пользователю

<a href="https://www.liveinternet.ru/users/5667228/post352101017/">Р Р°РјРєРё, СѓРєСЂР°С€РµРЅРЅС‹Рµ РєР°СЂС‚РёРЅРєРѕР№</a><br/>Р Р°РјРєРё, СѓРєСЂР°С€РµРЅРЅС‹Рµ РєР°СЂС‚РёРЅРєРѕР№

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

Р’Р°С€Р° РєР°СЂС‚РёРЅРєР° Р±СѓРґРµС‚ СЂР°СЃРїРѕР»Р°РіР°С‚СЊСЃСЏ СЃР»РµРІР° РѕС‚ С‚РµРєСЃС‚Р°. РџСЂРё Р·Р°РїРѕР»РЅРµРЅРёРё СЂР°РјРєРё С‚РµРєСЃС‚РѕРј РїРѕСЃР»РµРґРЅРёР№ Р±СѓРґРµС‚ РѕР±С‚РµРєР°С‚СЊ РєР°СЂС‚РёРЅРєСѓ. Р•СЃР»Рё РєР°СЂС‚РёРЅРєР° Р±РѕР»СЊС€РѕРіРѕ СЂР°Р·РјРµСЂР°, С‚Рѕ Рё Р·Р°РїРёСЃСЊ РґРѕР»Р¶РЅР° Р±С‹С‚СЊ РѕР±СЉС‘РјРЅРѕР№, РёРЅР°С‡Рµ С‡Р°СЃС‚СЊ РёР·РѕР±СЂР°Р¶РµРЅРёСЏ РІС‹РїР°РґРµС‚ Р·Р° РіСЂР°РЅРёС†С‹ СЂР°РјРєРё, РїРѕСЃРєРѕР»СЊРєСѓ Р·Р° СЂР°Р·РІРѕСЂРѕС‚ СЂР°РјРєРё РѕС‚РІРµС‡Р°РµС‚ РёРјРµРЅРЅРѕ С‚РµРєСЃС‚. 
Р’Р°С€Р° РїРѕРґРїРёСЃСЊ
Р’Р°С€Р° РєР°СЂС‚РёРЅРєР° Р±СѓРґРµС‚ СЂР°СЃРїРѕР»Р°РіР°С‚СЊСЃСЏ... <a href="https://www.liveinternet.ru/users/5667228/post352101017/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Метки

-Цитатник

-Приложения

-Рубрики

-Ссылки

-Музыка

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

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

-Друзья

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

-Сообщества

-Статистика

Рамки, украшенные картинкой