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

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

РАМКА А

Здесь будет Ваш текст Егорова Татьяна

РАМКА Б

Здесь будет Ваш текст Егорова Татьяна

РАМКА В

Здесь будет Ваш текст Егорова Татьяна

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

Здесь будет Ваш текст Егорова Татьяна

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

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

РАМКА с круглыми углами
Код готовой рамки <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="http://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>Здесь будет Ваш текст</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><br />

Код "скелетика" рамки <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="ФОН 1" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#ЦВЕТ ШРИФТА;font-size:РАЗМЕР ШРИФТАpx"><b>Здесь будет Ваш текст</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><br />

РАМКА с прямыми углами
Код готовой рамки <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:4px"><table width="600" style="solid silver; border-radius:0px;box-shadow: 5px 5px 40px #000000 inset;" background="http://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>Здесь будет Ваш текст</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><br />

Код "скелетика" рамки <table style=" solid silver; border-radius:0px;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table width="600" style="solid silver; border-radius:0px;box-shadow: 5px 5px 40px #000000 inset;" background="ФОН 1" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#ЦВЕТ ШРИФТА;font-size:РАЗМЕР ШРИФТАpx"><b>Здесь будет Ваш текст</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><br />
Пользоваться "скелетиками" очень просто. Берете из окошка код и вместо моих слов ОБВОДКА, ФОН 1, ЦВЕТ ШРИФТА, РАЗМЕР ШРИФТА ставите свои фоны и значения. Так же вставляете ССЫЛКУ НА ВАШ БЛОГ и ВАШУ ПОДПИСЬ. Как изменить кривизну углов вы можете посмотреть в предыдущих уроках по ссылке в начале поста.

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

[420x117]

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

Код готовой рамки <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="http://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="http://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="http://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="http://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></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="http://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"><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="http://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="http://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></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></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></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 target="_blank" href="http://urls.by/1uzy"></a></b></span></td></tr></table></td></tr></table>