Фоновое изображение в рамке. Часть 1

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

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

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

Фоновое изображение в рамке. Часть 1

На этот раз хочу поделиться более сложными шаблонами, в которых можно не только менять цвет фона, но и сделать фоном изображение.
В представленной рамке фон-изображение вставляется в верхний слой снаружи.

Здесь будет ваш текст

Ваша подпись

<center><div style="border:2px solid #EBE3D4; width:650px; padding:18px; background-image: url('https://img-fotki.yandex.ru/get/6846/163781271.c8/0_dce0f_53e73c4b_XXS.jpg'); box-shadow:rgba(0,0,0,.8) 0 5px 11px -5px;"><div style="border:2px solid #EBE3D4; padding:18px; background:#E2D6C1; border-radius:32px; box-shadow:inset 0 0 20px #000000; box-shadow:inset 0 0 20px #000000; box-shadow:inset 0 0 20px #000000; font-family:Georgia; font-size:19px; font-style:italic; color:#663300;">Здесь будет ваш текст<br /> <br /> <center><center><a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=ССЫЛКА НА ВАШ БЛОГ" target="_blank"><span style="font-size: 0.9em">Ваша подпись</span></a></center></center></div></div></center>

Итак, первым в коде рамки стоит атрибут border:2px solid #EBE3D4; (тонкий бордюр-обводка), где 2 — его ширина в пикселях, а #EBE3D4 — его цвет.
Обозначение цвета: #EBE3D4 , просто оставляем решётку # , убираем EBE3D4 , и ставим свой цвет.

Далее стоит атрибут width:635px; (ширина рамки), вместо 635 указываем нужный размер.

Затем padding:18px; — это ширина верхнего слоя (расстояние от наружнего тонкого бордюра до внутреннего), при необходимости меняем 18 на другую цифру.

Дальше видим строку для вставки фона-изображения:
background-image: url('https:/ /img-fotki.yandex.ru/get/6846/163781271.c8/0_dce0f_53e73c4b_XXS.jpg');.
Я специально не стала убирать код фона, чтоб было видно, какую часть кода нужно вставлять внутри скобок. Всё, что в скобках, удаляем ( не затрагивая одинарных кавычек ) и подставляем своё изображение (код).

Затем задаём цвет тонкому бордюрчику border:2px solid #EBE3D4;,
как и в самом начале.

Далее меняем значение цвета тут: background:#E2D6C1; , это фон для записи.

Осталось выделить строку стиля, размера и цвета шрифта:
font-family:Georgia; font-size:19px; font-style:italic; color:#663300; ,
где font-family:Georgia; — стиль. Можно поменять Georgia , например, на Monotype Corsiva .
font-size:19px; — размер. Вместо 19 любой другой.
color:#663300; — цвет.

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

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

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

<a href="https://www.liveinternet.ru/users/5667228/post352100088/">Р¤РѕРЅРѕРІРѕРµ РёР·РѕР±СЂР°Р¶РµРЅРёРµ РІ СЂР°РјРєРµ. Р§Р°СЃС‚СЊ 1</a><br/>Р¤РѕРЅРѕРІРѕРµ РёР·РѕР±СЂР°Р¶РµРЅРёРµ РІ СЂР°РјРєРµ. Р§Р°СЃС‚СЊ 1

РќР° СЌС‚РѕС‚ СЂР°Р· С…РѕС‡Сѓ РїРѕРґРµР»РёС‚СЊСЃСЏ Р±РѕР»РµРµ СЃР»РѕР¶РЅС‹РјРё С€Р°Р±Р»РѕРЅР°РјРё, РІ РєРѕС‚РѕСЂС‹С… РјРѕР¶РЅРѕ РЅРµ С‚РѕР»СЊРєРѕ РјРµРЅСЏС‚СЊ С†РІРµС‚ С„РѕРЅР°, РЅРѕ Рё СЃРґРµР»Р°С‚СЊ С„РѕРЅРѕРј РёР·РѕР±СЂР°Р¶РµРЅРёРµ. 
Р’ РїСЂРµРґСЃС‚Р°РІР»РµРЅРЅРѕР№ СЂР°РјРєРµ С„РѕРЅ-РёР·РѕР±СЂР°Р¶РµРЅРёРµ РІСЃС‚Р°РІР»СЏРµС‚СЃСЏ РІ РІРµСЂС…РЅРёР№ СЃР»РѕР№ СЃРЅР°СЂСѓР¶Рё.

Р—РґРµСЃСЊ Р±СѓРґРµС‚ РІР°С€ С‚РµРєСЃС‚

Р’Р°С€Р° РїРѕРґРїРёСЃСЊ
Р—РґРµСЃСЊ Р±СѓРґРµС‚ РІР°С€ С‚РµРєСЃС‚

Р’Р°С€Р° РїРѕРґРїРёСЃСЊ 
 РС‚Р°Рє, РїРµСЂРІС‹Рј РІ РєРѕРґРµ СЂР°РјРєРё СЃС‚РѕРёС‚ Р°С‚СЂРёР±СѓС‚  border:2px solid #EBE3D4;  (С‚РѕРЅРєРёР№ Р±РѕСЂРґСЋСЂ-РѕР±РІРѕРґРєР°), РіРґРµ  2 вЂ” РµРіРѕ С€РёСЂРёРЅР° РІ РїРёРєСЃРµР»СЏС…, Р°  #EBE3D4 вЂ” РµРіРѕ С†РІРµС‚.
РћР±РѕР·РЅР°С‡РµРЅРёРµ С†РІРµС‚Р°:  #EBE3D4 , РїСЂРѕСЃС‚Рѕ РѕСЃС‚Р°РІР»СЏРµРј СЂРµС€С‘С‚РєСѓ  # , СѓР±РёСЂР°РµРј  EBE3D4 , Рё СЃС‚Р°РІРёРј СЃРІРѕР№ С†РІРµС‚.

Р”Р°Р»РµРµ СЃС‚РѕРёС‚ Р°С‚СЂРёР±СѓС‚... <a href="https://www.liveinternet.ru/users/5667228/post352100088/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Метки

-Цитатник

-Приложения

-Рубрики

-Ссылки

-Музыка

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

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

-Друзья

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

-Сообщества

-Статистика

Фоновое изображение в рамке. Часть 1