Обводка внутри рамки (блока)...

Воскресенье, 08 Января 2017 г. 21:58 + в цитатник

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

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

Хочу представить вам вот такую симпатичную рамку с пунктирной обводкой внутри.
Не правда ли, похоже на прошивку? Этим можно играть, подбирая тканевые цвета. Например, голубой (чем не джинс?)

Текст
Ваша подпись

<center><div style="padding: 10px 10px; background: #FE9980; width: 610px; font-size: 27px; font-family: Monotype Corsiva; color: #fff; border: 2px dashed #fff; border-radius: 3px; box-shadow: 0 0 0 5px #FE9980, 3px 2px 7px 4px rgba(10,10,0,.5); text-shadow: -1px -1px #aa3030;">Текст<br /> <center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank"><font face="Georgia" color="#ffffff" style="font-size:18px">Ваша подпись</font></a></center></div></center>

Рассмотрим значения по порядку написания их в коде.

padding: 10px 10px; — расстояние от края рамки (бордюра) до текста. При необходимости меняем "10" на другую цифру.

background: #FE9980; — фон для записи. Можно вместо #FE9980 подставить другой цвет.

width: 610px; — ширина рамки. Вместо "610" указываем своё значение.

font-size: 27px; — размер шрифта.
font-family: Monotype Corsiva; — вид шрифта. Можно поменять Monotype Corsiva, например, на Georgia.
color: #fff; — цвет шрифта.

border: 2px dashed #fff; — это пунктирная обводка. Можно вместо "2" указать другой размер, а вместо "fff" подставить другой цвет.

border-radius: 3px; — скругление углов в рамке.

box-shadow: 0 0 0 5px #FE9980, 3px 2px 7px 4px rgba(10,10,0,.5); — Внимание! В этой строке меняем обязательно только цвет #FE9980. Он должен быть идентичен с фоном для записи. Это будет продолжением нашего фона над пунктирной обводкой.

text-shadow: -1px -1px #aa3030; — возвращаемся к шрифту... Это его тень, то есть величина "-1" и цвет тени "#aa3030".

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

Серия сообщений "________ - Делаем рамочки -":
Часть 1 - Делаем рамочку для текста без ФШ...
Часть 2 - Учимся делать рамочки (вникаем в суть)... Урок № 1 от bloginja...
...
Часть 9 - Рамки с объемным фоном без фотошопа!
Часть 10 - ...Тени в рамочке и на картинках без ФШ (оригинальные рамочки для текста и картинок)...
Часть 11 - Обводка внутри рамки (блока)...
Часть 12 - Простые рамочки-обводки для текста
Часть 13 - Рамка с картинкой сверху (учимся делать рамки - классный урок!!!)...
...
Часть 18 - Поговорим о рамочке для текста "Рамочка-книжка"
Часть 19 - *** ДВЕ рамочки с вертикальными бордюрами...
Часть 20 - И снова — «Рамочка-книжка»

Понравилось: 1 пользователю

<a href="https://www.liveinternet.ru/users/6133629/post430757397/">РћР±РІРѕРґРєР° РІРЅСѓС‚СЂРё СЂР°РјРєРё (Р±Р»РѕРєР°)...</a><br/>

РҐРѕС‡Сѓ РїСЂРµРґСЃС‚Р°РІРёС‚СЊ РІР°Рј РІРѕС‚ С‚Р°РєСѓСЋ СЃРёРјРїР°С‚РёС‡РЅСѓСЋ СЂР°РјРєСѓ СЃ РїСѓРЅРєС‚РёСЂРЅРѕР№ РѕР±РІРѕРґРєРѕР№ РІРЅСѓС‚СЂРё. 
РќРµ РїСЂР°РІРґР° Р»Рё, РїРѕС…РѕР¶Рµ РЅР° РїСЂРѕС€РёРІРєСѓ? РС‚РёРј РјРѕР¶РЅРѕ РёРіСЂР°С‚СЊ, РїРѕРґР±РёСЂР°СЏ С‚РєР°РЅРµРІС‹Рµ С†РІРµС‚Р°. РќР°РїСЂРёРјРµСЂ, РіРѕР»СѓР±РѕР№ (С‡РµРј РЅРµ РґР¶РёРЅСЃ?)

РўРµРєСЃС‚
Р’Р°С€Р° РїРѕРґРїРёСЃСЊ
РўРµРєСЃС‚
Р’Р°С€Р° РїРѕРґРїРёСЃСЊ

Р Р°СЃСЃРјРѕС‚СЂРёРј Р·РЅР°С‡РµРЅРёСЏ РїРѕ РїРѕСЂСЏРґРєСѓ РЅР°РїРёСЃР°РЅРёСЏ РёС… РІ РєРѕРґРµ.
 
padding: 10px 10px; вЂ” СЂР°СЃСЃС‚РѕСЏРЅРёРµ РѕС‚ РєСЂР°СЏ СЂР°РјРєРё (Р±РѕСЂРґСЋСЂР°) РґРѕ С‚РµРєСЃС‚Р°. РџСЂРё РЅРµРѕР±С…РѕРґРёРјРѕСЃС‚Рё РјРµРЅСЏРµРј "10" РЅР° РґСЂСѓРіСѓСЋ С†РёС„СЂСѓ.

background: #FE9980; вЂ” С„РѕРЅ РґР»СЏ Р·Р°РїРёСЃРё. РњРѕР¶РЅРѕ РІРјРµСЃС‚Рѕ #FE9980 РїРѕРґСЃС‚Р°РІРёС‚СЊ РґСЂСѓРіРѕР№ С†РІРµС‚.

width: 610px; вЂ” С€РёСЂРёРЅР° СЂР°РјРєРё. Р’РјРµСЃС‚Рѕ "610" СѓРєР°Р·С‹РІР°РµРј СЃРІРѕС‘ Р·РЅР°С‡РµРЅРёРµ.

font-size: 27px; вЂ” СЂР°Р·Рј... <a href="https://www.liveinternet.ru/users/6133629/post430757397/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Фотоальбом

-Рубрики

-Цитатник

-Метки

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

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

-Статистика

Обводка внутри рамки (блока)...