Рамки оригинальные

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

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

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

Рамки оригинальные

Такие вот оригинальные рамки (блоки) увидела на одном сайте.

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

Ваша подпись

<center><div style="background: #8FD532; width: 590px; padding:14px; border-radius: 18px; box-shadow: inset 5px 6px 3px rgba(203,255,144,0.4), 3px 3px 4px rgba(0,0,0,0.6), -2px -2px 4px rgba(223,152,0,0.7), 0 0 20px 3px Yellow; font-family: Georgia; font-size: 21px; font-style: italic; color:#006600;">Здесь будет ваш текст<br /> <br /> <center><a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=ССЫЛКА НА ВАШ БЛОГ" target="_blank"><span style="font-size: 0.9em">Ваша подпись</span></a></center></div></center>

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

Ваша подпись

<center><div style="background: #87CEFA; width: 590px; border-radius: 18px; color: White; padding: 14px; border: 1px solid Yellow; text-align: center; font-family: Georgia; font-size: 23px; text-shadow: -4px 3px 8px rgba(0,0,0,0.6); box-shadow: 0 0 40px rgba(255,217,0,0.9); ">Здесь будет ваш текст<br /> <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>

Думаю, в них целесообразно менять лишь несколько значений:

Верхняя рамка:

Меняем цвет фона background: #8FD532;.
Обозначение цвета: #8FD532, просто оставляем решётку #,
убираем 8FD532, и ставим свой цвет.
Обратили внимание на внутреннюю тень, создающую скос? Она
на самом деле жёлтого цвета, поэтому цвета для фона подбирайте
зелёно-голубого диапазона. Другие просто не подойдут.

Далее по-порядку стоит размер рамки width: 590px;, вместо 590 подставляем своё значение.

И, наконец, меняем вид шрифта, его размер и цвет. Это строка
font-family: Georgia; font-size: 21px; font-style: italic; color:#003366;,
где Georgia — вид шрифта, 21 — размер, #003366 — цвет.

Нижняя рамка:

Меняем цвет фона background: #87CEFA;. Тут можно указать
любой цвет, на котором будет хорошо смотреться белый шрифт.

Далее видим размер рамки width: 590px;, вместо 590 подставляем
своё значение.

У шрифта не трогаем цвет (он красивый белый с тенью), но можем поменять вид шрифта — font-family: Georgia; и его размер — font-size: 23px;

источник: http://olocoder.ru/CSS26.html

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

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

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

<a href="https://www.liveinternet.ru/users/5667228/post352100276/">Р Р°РјРєРё РѕСЂРёРіРёРЅР°Р»СЊРЅС‹Рµ</a><br/>Р Р°РјРєРё РѕСЂРёРіРёРЅР°Р»СЊРЅС‹Рµ

РўР°РєРёРµ РІРѕС‚ РѕСЂРёРіРёРЅР°Р»СЊРЅС‹Рµ СЂР°РјРєРё (Р±Р»РѕРєРё) СѓРІРёРґРµР»Р° РЅР° РѕРґРЅРѕРј СЃР°Р№С‚Рµ.

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

Р’Р°С€Р° РїРѕРґРїРёСЃСЊ

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

Р’Р°С€Р° РїРѕРґРїРёСЃСЊ

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

Р’Р°С€Р° РїРѕРґРїРёСЃСЊ

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

Р’Р°С€Р° РїРѕРґРїРёСЃСЊ 
Р”СѓРјР°СЋ, РІ РЅРёС… С†РµР»РµСЃРѕРѕР±СЂР°Р·РЅРѕ РјРµРЅСЏС‚СЊ Р»РёС€СЊ РЅРµСЃРєРѕР»СЊРєРѕ Р·РЅР°С‡РµРЅРёР№:

Р’РµСЂС…РЅСЏСЏ СЂР°РјРєР°:
 
РњРµРЅСЏРµРј С†РІРµС‚ С„РѕРЅР° background: #8FD532;. 
РћР±РѕР·РЅР°С‡РµРЅРёРµ С†РІРµС‚Р°: #8FD532, РїСЂРѕСЃС‚Рѕ РѕСЃС‚Р°РІР»СЏРµРј СЂРµС€С‘С‚РєСѓ #, 
СѓР±РёСЂР°РµРј 8FD532, Рё СЃС‚Р°РІРёРј СЃРІРѕР№ С†РІРµС‚.
РћР±СЂР°С‚РёР»Рё РІРЅРёРјР°РЅРёРµ РЅР° РІРЅСѓС‚СЂРµРЅРЅСЋСЋ С‚РµРЅСЊ, СЃРѕР·РґР°СЋС‰СѓСЋ СЃРєРѕСЃ? РћРЅР° 
РЅР° СЃР°РјРѕРј РґРµР»Рµ Р¶С‘Р»С‚РѕРіРѕ С†РІРµС‚Р°, РїРѕСЌС‚РѕРјСѓ С†РІРµС‚Р° РґР»СЏ С„РѕРЅР° РїРѕРґР±РёСЂР°Р№С‚Рµ 
Р·РµР»С‘РЅРѕ... <a href="https://www.liveinternet.ru/users/5667228/post352100276/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Метки

-Цитатник

-Приложения

-Рубрики

-Ссылки

-Музыка

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

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

-Друзья

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

-Сообщества

-Статистика

Рамки оригинальные