Уроки по рамкам

Среда, 20 Января 2016 г. 20:17 + в цитатник

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

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

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

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

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

<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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=ССЫЛКА НА ВАШ БЛОГ" 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".

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

Рубрики:

Рамки/полезные советы

Метки: урок

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

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

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

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

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

width: 610px; вЂ” С€РёСЂРёРЅР° СЂР°РјРєРё. Р’РјРµСЃС‚Рѕ "610" СѓРєР°Р·С‹РІР°РµРј СЃРІРѕС‘ Р·РЅР°С‡РµРЅРёРµ... <a href="https://www.liveinternet.ru/users/5974228/post382511208/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Видео

-Цитатник

-Метки

-Рубрики

-Ссылки

-Музыка

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

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

-Статистика

Уроки по рамкам