Рамки с объемным фоном без фотошопа!

Четверг, 06 Ноября 2014 г. 14:43 + в цитатник

Цитата сообщения Егорова_Таня

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

РАМКИ С ОБЪЕМНЫМ ФОНОМ

Не так давно здесь и здесь я давала уроки как делать без фотошопа рамки с круглыми углами и тенью. Сегодня даю небольшое дополнение к предыдущим урокам. Расскажу как сделать объемно-выпуклым центральный фон и вообще любой фон в рамке. Сравните. Рамка А без эффекта объема, рамка Б с таким эффектом и рамка В с усиленным эффектом.

РАМКА А

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

Егорова Татьяна

РАМКА Б

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

Егорова Татьяна

РАМКА В

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

Егорова Татьяна

Можно сделать рамку и с прямыми углами

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

Егорова Татьяна

Эффект круглых углов виден в браузерах Google Chrome, Mozilla Firefox. В Internet Explorer рамка будет отражаться как обычная с прямыми углами. В других не знаю. Я дам "скелетик" кода такой рамки, чтобы подставляя свои фоны и параметры, вы могли без особого труда собрать свою рамочку и объясню как им пользоваться.

ИТАК.
Ниже в окошках даю коды готовых рамочек и "скелетики" , которые можно использовать в любых вариантах. Их можно использовать как самостоятельную рамку, а можно вставлять в прямоугольные рамки или в такие же рамки с закругленными углами, или в такие круглые рамки вставлять прямоугольные. Можно брать заготовки и из этого урока и из предыдущих. Все зависит от вашей фантазии.

РАМКА с круглыми углами
Код готовой рамки

Код "скелетика" рамки

РАМКА с прямыми углами
Код готовой рамки

Код "скелетика" рамки
Пользоваться "скелетиками" очень просто. Берете из окошка код и вместо моих слов ОБВОДКА, ФОН 1, ЦВЕТ ШРИФТА, РАЗМЕР ШРИФТА ставите свои фоны и значения. Так же вставляете ССЫЛКУ НА ВАШ БЛОГ и ВАШУ ПОДПИСЬ. Как изменить кривизну углов вы можете посмотреть в предыдущих уроках по ссылке в начале поста.

За объем отвечают вот такие параметры в коде рамки- box-shadow: 5px 5px 40px #000000 inset;. Цифры можно менять в большие и меньшие стороны. Цифра 5 отвечает за глубину объема(см. фото А-1), а цифра 40 за плавность перехода объема(см. фото А-2). Тень в "скелетиках" установлена черного цвета, но его можно поменять на любой другой. Для этого надо изменить 6 цифр 000000(см. фото А-3) на нужный код цвета.

Вот такая рамочка получилась у меня после комбинирования разных по конфигурации рамок и добавления нового фона.

Егорова Татьяна

Код готовой рамки

<table style=" solid silver; border-radius:0px;" background="http://content.foto.my.mail.ru/mail/tiotia-tania/14266/i-16088.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:7px"><table width="600" style="solid silver; border-radius:0px;box-shadow:  5px 5px 40px #000000 inset;" background="//img1.liveinternet.ru/images/attach/c/0/117/839/117839129_4.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#FFF799;font-size:20px"><b><table style=" solid silver; border-radius:80px;" background="http://content.foto.my.mail.ru/mail/tiotia-tania/14266/i-16088.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:6px"><table width="600" style="solid silver; border-radius:80px;box-shadow:  5px 5px 40px #000000 inset;" background="//img1.liveinternet.ru/images/attach/c/0/117/807/117807919_large_SS.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><b>Здесь будет Ваш текст <br />
</b></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><b><a href="http://www.egorovatatiana.ru/" target="_blank"><font color="#3e441c"></font></a></b></span></td></tr></table></td></tr></table></b></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><b><a href="http://www.egorovatatiana.ru/" target="_blank"><font color="#b7c381">Егорова Татьяна</font></a></b></span></td></tr></table></td></tr></table>

Код "скелетика" рамки

КОД<table style=" solid silver; border-radius:0px;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:7px"><table width="600" style="solid silver; border-radius:0px;box-shadow:  5px 5px 40px #000000 inset;" background="//img0.liveinternet.ru/images/attach/c/0/117/834/117834120_colorfulflowersbzsackground05vector_7997994Ff11.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#FFF799;font-size:20px"><b><table style=" solid silver; border-radius:80px;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:6px"><table width="600" style="solid silver; border-radius:80px;box-shadow:  5px 5px 40px #000000 inset;" background="//img1.liveinternet.ru/images/attach/c/0/117/807/117807919_large_SS.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><b>Здесь будет Ваш текст <br />
</b></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><b><a href="http://www.egorovatatiana.ru/" target="_blank"></a></b></span></td></tr></table></td></tr></table></b></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><b><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">ВАША ПОДПИСЬ</a></b></span></td></tr></table></td></tr></table>

Вот такая необычная рамочка получилась у меня после комбинирования разных по конфигурации рамок и добавления нового фона.

Егорова Татьяна

Код готовой рамки

<table style=" width:10px;-webkit-border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px;border-radius: 20px 20px 20px 20px;-webkit-box-shadow: #000000 6px 6px 6px;-moz-box-shadow: #000000 6px 6px 6px; box-shadow: #000000 6px 6px 6px;" background="http://content.foto.my.mail.ru/mail/tiotia-tania/14266/i-16088.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table width="600" style="width:630px;-webkit-border-radius:  20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px;border-radius: 20px 20px 20px 20px;box-shadow:  5px 5px 40px #000000 inset;" background="//img1.liveinternet.ru/images/attach/c/0/117/807/117807919_large_SS.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><a target="_blank" href="http://www.egorovatatiana.ru/"></a><table style="  width:630px;-webkit-border-radius: 2px 180px 2px 180px;-moz-border-radius:  2px 180px 2px 180px;border-radius:  2px 180px 2px 180px;-webkit-box-shadow: #000000 44px 44px 44px;-moz-box-shadow: #000000 14px 14px 14px; box-shadow: #000000 2px 4px 6px;" background="http://content.foto.my.mail.ru/mail/tiotia-tania/14266/i-16088.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table style=" width:630px;-webkit-border-radius: 2px 180px 2px 180px;-moz-border-radius:  2px 180px 2px 180px;border-radius:  2px 180px 2px 180px;" background="http://content.foto.my.mail.ru/mail/tiotia-tania/14266/i-16063.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style="  width:630px;-webkit-border-radius:2px 180px 2px 180px;-moz-border-radius:  2px 180px 2px 180px;border-radius:  2px 180px 2px 180px;" background="http://content.foto.my.mail.ru/mail/tiotia-tania/14266/i-16088.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table width="600" style=" width:630px;-webkit-border-radius:2px 180px 2px 180px;-moz-border-radius:  2px 180px 2px 180px;border-radius:  2px 180px 2px 180px;" background="//img0.liveinternet.ru/images/attach/c/0/117/838/117838886_large_15488.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><b><table style=" width:600px;-webkit-border-radius: 180px 2px 180px 2px;-moz-border-radius: 180px 2px 180px 2px;border-radius: 180px 2px 180px 2px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" background="http://content.foto.my.mail.ru/mail/tiotia-tania/14266/i-16088.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style="width:600px;-webkit-border-radius: 180px 2px 180px 2px;-moz-border-radius: 80px 80px 2px 2px;border-radius: 180px 2px 180px 2px;box-shadow:  5px 5px 40px #000000 inset;" background="//img1.liveinternet.ru/images/attach/c/0/117/807/117807919_large_SS.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:2px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><table width="450" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><b><br />Здесь будет Ваш текст<br />
<br /></b></span></td></tr></table></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><b><a href="http://www.egorovatatiana.ru/" target="_blank">Егорова Татьяна</a><a target="_blank" href="http://www.egorovatatiana.ru/"></a></b></span></td></tr></table></td></tr></table></b></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"></span></td></tr></table></td></tr></table></td></tr></table></td></tr></table></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><b><a href="http://www.egorovatatiana.ru/" target="_blank"></a><a target="_blank" href="http://urls.by/1uzy"></a></b></span></td></tr></table></td></tr></table>

Код "скелетика" рамки

<table style=" width:10px;-webkit-border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px;border-radius: 20px 20px 20px 20px;-webkit-box-shadow: #000000 6px 6px 6px;-moz-box-shadow: #000000 6px 6px 6px; box-shadow: #000000 6px 6px 6px;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table width="600" style="width:630px;-webkit-border-radius:  20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px;border-radius: 20px 20px 20px 20px;box-shadow:  5px 5px 40px #000000 inset;" background="ФОН 2" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><a target="_blank" href="http://urls.by/1uzy"></a><table style="  width:630px;-webkit-border-radius: 2px 180px 2px 180px;-moz-border-radius:  2px 180px 2px 180px;border-radius:  2px 180px 2px 180px;-webkit-box-shadow: #000000 44px 44px 44px;-moz-box-shadow: #000000 14px 14px 14px; box-shadow: #000000 2px 4px 6px;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table style=" width:630px;-webkit-border-radius: 2px 180px 2px 180px;-moz-border-radius:  2px 180px 2px 180px;border-radius:  2px 180px 2px 180px;" background="ФОН 3" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style="  width:630px;-webkit-border-radius:2px 180px 2px 180px;-moz-border-radius:  2px 180px 2px 180px;border-radius:  2px 180px 2px 180px;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table width="600" style=" width:630px;-webkit-border-radius:2px 180px 2px 180px;-moz-border-radius:  2px 180px 2px 180px;border-radius:  2px 180px 2px 180px;" background="ФОН 1" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><b><table style=" width:600px;-webkit-border-radius: 180px 2px 180px 2px;-moz-border-radius: 180px 2px 180px 2px;border-radius: 180px 2px 180px 2px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style="width:600px;-webkit-border-radius: 180px 2px 180px 2px;-moz-border-radius: 80px 80px 2px 2px;border-radius: 180px 2px 180px 2px;box-shadow:  5px 5px 40px #000000 inset;" background="ФОН 2" cellspacing="0" cellpadding="0"><tr><td style="padding:2px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><table width="450" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><span style="font-family:Verdana;color:#ЦВЕТ ШРИФТА;font-size:РАЗМЕР ШРИФТАpx"><b><br />Здесь будет Ваш текст<br /></b></span></td></tr></table></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><b><a href="АДРЕС ВАШЕГО БЛОГА" target="_blank">ВАША ПОДПИСЬ</a><a target="_blank" href="http://www.egorovatatiana.ru/"></a></b></span></td></tr></table></td></tr></table></b></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"></span></td></tr></table></td></tr></table></td></tr></table></td></tr></table></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><b><a href="http://www.egorovatatiana.ru/" target="_blank"></a><a target="_blank" href="http://urls.by/1uzy"></a></b></span></td></tr></table></td></tr></table>

Серия сообщений "XTMLка":
Часть 1 - Бегущий текст
Часть 2 - Сделать слайд-шоу
...
Часть 6 - Как быстро найти нужное в коде
Часть 7 - Как сделать бегущий текст на картинке, без всякого редактора
Часть 8 - Рамки с объемным фоном без фотошопа!
Часть 9 - Онлайн HTML - редактор
Часть 10 - Все формулы в одном месте
Часть 11 - Приглашаю вас в рубрику Формулы и Коды

Понравилось: 2 пользователям

<a href="https://www.liveinternet.ru/users/milledimalinovskaya/post342499846/">Р Р°РјРєРё СЃ РѕР±СЉРµРјРЅС‹Рј С„РѕРЅРѕРј Р±РµР· С„РѕС‚РѕС€РѕРїР°!</a><br/>Р РђРњРљР РЎ РћР‘РЄР•РњРќР«Рњ Р¤РћРќРћРњ

РќРµ С‚Р°Рє РґР°РІРЅРѕ Р·РґРµСЃСЊ Рё Р·РґРµСЃСЊ СЏ РґР°РІР°Р»Р° СѓСЂРѕРєРё РєР°Рє РґРµР»Р°С‚СЊ Р±РµР· С„РѕС‚РѕС€РѕРїР° СЂР°РјРєРё СЃ РєСЂСѓРіР»С‹РјРё СѓРіР»Р°РјРё Рё С‚РµРЅСЊСЋ. РЎРµРіРѕРґРЅСЏ РґР°СЋ РЅРµР±РѕР»СЊС€РѕРµ РґРѕРїРѕР»РЅРµРЅРёРµ Рє РїСЂРµРґС‹РґСѓС‰РёРј СѓСЂРѕРєР°Рј. Р Р°СЃСЃРєР°Р¶Сѓ РєР°Рє СЃРґРµР»Р°С‚СЊ РѕР±СЉРµРјРЅРѕ-РІС‹РїСѓРєР»С‹Рј С†РµРЅС‚СЂР°Р»СЊРЅС‹Р№ С„РѕРЅ  Рё РІРѕРѕР±С‰Рµ Р»СЋР±РѕР№ С„РѕРЅ РІ СЂР°РјРєРµ. РЎСЂР°РІРЅРёС‚Рµ. Р Р°РјРєР° Рђ Р±РµР· СЌС„С„РµРєС‚Р° РѕР±СЉРµРјР°, СЂР°РјРєР° Р‘ СЃ С‚Р°РєРёРј СЌС„С„РµРєС‚РѕРј  Рё СЂР°РјРєР° Р’ СЃ СѓСЃРёР»РµРЅРЅС‹Рј СЌС„С„РµРєС‚РѕРј.

Р РђРњРљРђ Рђ
Р—РґРµСЃСЊ Р±СѓРґРµС‚ Р’Р°С€ С‚РµРєСЃС‚ Р•РіРѕСЂРѕРІР° РўР°С‚СЊСЏРЅР°

Р РђРњРљРђ Р‘
Р—РґРµСЃСЊ Р±СѓРґРµС‚ Р’Р°С€ С‚РµРєСЃС‚ Р•РіРѕСЂРѕРІР° РўР°С‚СЊСЏРЅР°

Р РђРњРљРђ Р’
Р—РґРµСЃСЊ Р±СѓРґРµС‚ Р’Р°С€ С‚РµРєСЃС‚Р•РіРѕСЂРѕРІР° РўР°С‚СЊСЏРЅР°

РњРѕР¶РЅРѕ СЃРґРµР»Р°С‚СЊ СЂР°РјРєСѓ Рё СЃ РїСЂСЏРјС‹РјРё СѓРіР»Р°РјРё 
Р—РґРµСЃСЊ Р±СѓРґРµС‚ Р’Р°С€ С‚РµРєСЃС‚Р•РіРѕСЂРѕРІР° РўР°С‚СЊСЏРЅР°

РС„С„РµРєС‚ РєСЂ... <a href="https://www.liveinternet.ru/users/milledimalinovskaya/post342499846/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Приложения

-Рубрики

-Метки

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

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

-Друзья

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

-Статистика

Рамки с объемным фоном без фотошопа!