Рамка с круглыми углами

Суббота, 01 Марта 2014 г. 09:03 + в цитатник

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

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

РАМКИ С КРУГЛЫМИ УГЛАМИ

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

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

Заготовка 1

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

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

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

Код "скелетика" рамки-заготовки

Заготовка 2

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

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

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

Код "скелетика" рамки-заготовки

<table style=" solid silver; border-radius:РАЗМЕР УГЛОВpx;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table style=" solid silver; border-radius:РАЗМЕР УГЛОВpx;" background="ФОН 1" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style=" solid silver; border-radius:РАЗМЕР УГЛОВpx;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table width="600" style=" solid silver; border-radius:РАЗМЕР УГЛОВpx;" background="ФОН 2" 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"><a href="http://www.egorovatatiana.ru/" target="_blank">.</a><a href="АДРЕС ВАШЕГО БЛОГА" target="_blank">ВАША ПОДПИСЬ</a></span></td></tr></table></td></tr></table></td></tr></table></td></tr></table>

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

Если добавить этот код в дневник, то кроме слов "Здесь будет Ваш текст" и "ВАША ПОДПИСЬ" вы больше НИ-ЧЕ-ГО не увидите. В код надо вставить свои изображения и параметры, чтобы стало видно рамку.

Смотрите на скрине ниже ЧТО отражают в рамке слова ОБВОДКА, ФОН 1, ФОН 2, РАЗМЕР УГЛОВ.
Вместо ОБВОДКА, ФОН 1, ФОН 2 вставляем URL своих изображений-фонов. Вместо РАЗМЕР УГЛОВ ставим цифру от 20 до 180. Меньше 20 закругление будет плохо видно. В моих рамках стоит 80.

Заменяете мои слова ЦВЕТ ШРИФТА на код нужного цвета, вместо РАЗМЕР ШРИФТА ставите нужную цифру. У меня стоит 20. Вместо АДРЕС ВАШЕГО БЛОГА вставляете ссылку на ваш блог, вместо ВАША ПОДПИСЬ вписываете свой ник или имя-фамилию.

Вы можете изменять, выделенные красным, значения на большие или меньшие для видоизменения рамки.

Добавляете вместо слов "Здесь будет Ваш текст" свой текст, видео, аудио, флеш, картинки - всё что захотите. Сохраняете.

Всё!

Примеры рамок.

Рамка 1

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

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

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

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

<table style="border:0px none #000000" 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="border:0px none #000000" 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="border:0px none #000000" 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="border:0px none #000000" background="//img0.liveinternet.ru/images/attach/c/10/110/555/110555002_m3.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" 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:4px"><table style=" solid silver; border-radius:80px;" 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=" 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:4px"><table width="600" style=" solid silver; border-radius:80px;" background="//img0.liveinternet.ru/images/attach/c/10/110/555/110555002_m3.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"><a href="http://www.egorovatatiana.ru/" target="_blank"></a> </span></td></tr></table></td></tr></table></td></tr></table></td></tr></table><br /><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:4px"><table style=" solid silver; border-radius:80px;" 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=" 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:4px"><table width="600" style=" solid silver; border-radius:80px;" background="//img0.liveinternet.ru/images/attach/c/10/110/555/110555002_m3.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"><a href="http://www.egorovatatiana.ru/" target="_blank"></a> </span></td></tr></table></td></tr></table></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"><a href="http://www.egorovatatiana.ru/" target="_blank">Егорова Татьяна</a> </span></td></tr></table></td></tr></table></td></tr></table></td></tr></table>

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

<table style="border:0px none #000000" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table style="border:0px none #000000" background="ФОН 1" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style="border:0px none #000000" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table width="600" style="border:0px none #000000" background="ФОН 2" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#fff799;font-size:20px"><b><table style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ФОН 1" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table width="600" style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ФОН 2" 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"><a href="http://www.egorovatatiana.ru/" target="_blank"></a> </span></td></tr></table></td></tr></table></td></tr></table></td></tr></table><br /><table style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ФОН 1" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table width="600" style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ФОН 2" 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"><a href="http://www.egorovatatiana.ru/" target="_blank"></a> </span></td></tr></table></td></tr></table></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"><a href="АДРЕС ВАШЕГО БЛОГА" target="_blank">ВАША ПОДПИСЬ</a><a href="http://www.egorovatatiana.ru/" target="_blank">.</a> </span></td></tr></table></td></tr></table></td></tr></table></td></tr></table>

Рамка 2

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

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

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

Рамка 3

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

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

<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:4px"><table style=" solid silver; border-radius:80px;" 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=" 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:4px"><table width="600" style=" solid silver; border-radius:80px;" background="//img0.liveinternet.ru/images/attach/c/10/110/555/110555002_m3.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="border:0px none #000000" 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="border:0px none #000000" 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="border:0px none #000000" 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="500" style="border:0px none #000000" background="//img0.liveinternet.ru/images/attach/c/10/110/555/110555002_m3.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"><a href="http://www.egorovatatiana.ru/" target="_blank">Егорова Татьяна</a> </span></td></tr></table></td></tr></table></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"><a href="http://www.egorovatatiana.ru/" target="_blank"></a> </span></td></tr></table></td></tr></table></td></tr></table></td></tr></table>

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

<table style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ФОН 1" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table width="600" style=" solid silver; border-radius:РАЗМЕР УГЛАpx;" 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"><b><table style="border:0px none #000000" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table style="border:0px none #000000" background="ФОН 1" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style="border:0px none #000000" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:4px"><table width="500" style="border:0px none #000000" background="ФОН 2" 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"><a href="АДРЕС ВАШЕГО БЛОГА" target="_blank">ВАША ПОДПИСЬ</a><a href="http://www.egorovatatiana.ru/" target="_blank">.</a> </span></td></tr></table></td></tr></table></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"><a href="http://www.egorovatatiana.ru/" target="_blank"></a> </span></td></tr></table></td></tr></table></td></tr></table></td></tr></table>

Рамка 4

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

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

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

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

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

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

Рамка 5

Вот такая рамочка получилась у меня после добавления картинок. Думаю их код можно усовершенствовать, а варианты рамок разнообразить. Испытала только на Лиру. Для Яру и других сайтов нужен другой код. Может кто-то сделает. Была бы рада посмотреть на ваши рамки, которые вы сделаете по этому уроку.

Удачи!

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

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

<table style="border:0px none #000000" 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="border:0px none #000000" 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="border:0px none #000000" 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="border:0px none #000000" background="//img0.liveinternet.ru/images/attach/c/10/110/555/110555002_m3.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:8px" zzz="zzz" align="center"><table border="0" cellspacing="0" cellpadding="0"><tr><td style="padding:4px" align="center"><table border="0" cellspacing="0" cellpadding="0"><tr><td 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:4px"><table style=" solid silver; border-radius:80px;" 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=" 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:4px"><table width="600" style=" solid silver; border-radius:80px;" background="//img0.liveinternet.ru/images/attach/c/10/110/555/110555002_m3.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><a href="http://www.egorovatatiana.ru/" target="_blank"><img src="//img1.liveinternet.ru/images/attach/c/10/110/565/110565999_110557408_87648966_element55_ks.png" width="310" height="95" border="0" /></a><br />
Здесь будет Ваш текст<br /><br /><a href="http://www.egorovatatiana.ru/" target="_blank"><img src="//img1.liveinternet.ru/images/attach/c/10/110/565/110565999_110557408_87648966_element55_ks.png" width="310" height="95" border="0" /></a></b></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><a href="http://www.egorovatatiana.ru/" target="_blank"></a> </span></td></tr></table></td></tr></table></td></tr></table></td></tr></table> </b></span></td></tr></table></td></tr><tr><td style="padding:4px" align="center"><table width="600" height="240" style="border:0px none #000000" background="//img1.liveinternet.ru/images/attach/c/10/110/557/110557223_82296535_0_49cdf_d7b1032f_M.png" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="color:#000000;font-size:20px"></span></td></tr></table></td></tr></table></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"><a href="http://www.egorovatatiana.ru/" target="_blank">Егорова Татьяна</a> </span></td></tr></table></td></tr></table></td></tr></table></td></tr></table>

Рубрики:

уроки по Ли.ру

Все для оформления дневника
Рамочки - уроки

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

<a href="https://www.liveinternet.ru/users/elocjka/post315346574/">Р Р°РјРєР° СЃ РєСЂСѓРіР»С‹РјРё СѓРіР»Р°РјРё</a><br/>Р РђРњРљР РЎ РљР РЈР“Р›Р«РњР РЈР“Р›РђРњР

РќР°РІРµСЂРЅРѕ РјРЅРѕРіРёРµ, РєС‚Рѕ СЃРµР№С‡Р°СЃ СЃРјРѕС‚СЂРёС‚ РЅР° СЂР°РјРєСѓ РЅРёР¶Рµ, РґСѓРјР°СЋС‚, С‡С‚Рѕ РѕРЅР° СЃРґРµР»Р°РЅР° РІ РїСЂРѕРіСЂР°РјРјРµ Р¤РѕС‚РѕС€РѕРї...РќРµС‚. РћРЅР° СЃРґРµР»Р°РЅР° СЃ РїРѕРјРѕС‰СЊСЋ html-РєРѕРґР°, РєР°Рє РѕР±С‹С‡РЅС‹Рµ СЂР°РјРєРё СЃ РїСЂСЏРјС‹РјРё СѓРіР»Р°РјРё. РС„С„РµРєС‚ РєСЂСѓРіР»С‹С… СѓРіР»РѕРІ РІРёРґРµРЅ РІ Р±СЂР°СѓР·РµСЂР°С… Google Chrome, Mozilla Firefox. Р’ Internet Explorer СЂР°РјРєР° Р±СѓРґРµС‚ РѕС‚СЂР°Р¶Р°С‚СЊСЃСЏ РєР°Рє РѕР±С‹С‡РЅР°СЏ СЃ РїСЂСЏРјС‹РјРё СѓРіР»Р°РјРё. Р’ РґСЂСѓРіРёС… РЅРµ Р·РЅР°СЋ. РЇ РґР°Рј "СЃРєРµР»РµС‚РёРє" РєРѕРґР° С‚Р°РєРѕР№ СЂР°РјРєРё, С‡С‚РѕР±С‹ РїРѕРґСЃС‚Р°РІР»СЏСЏ СЃРІРѕРё С„РѕРЅС‹ Рё РїР°СЂР°РјРµС‚СЂС‹, РІС‹ РјРѕРіР»Рё Р±РµР· РѕСЃРѕР±РѕРіРѕ С‚СЂСѓРґР° СЃРѕР±СЂР°С‚СЊ СЃРІРѕСЋ СЂР°РјРѕС‡РєСѓ Рё РѕР±СЉСЏСЃРЅСЋ РєР°Рє РёРј РїРѕР»СЊР·РѕРІР°С‚СЊСЃСЏ.

РРўРђРљ.
Р’РѕС‚ СЌС‚Рё 2 Р·Р°РіРѕС‚РѕРІРєРё РЅРёР¶Рµ РјРѕР¶РЅРѕ РёСЃРїРѕР»СЊР·РѕРІР°С‚СЊ РІ Р»СЋР±С‹С… РІР°СЂРёР°РЅС‚Р°С…. РС… РјРѕР¶РЅРѕ РёСЃРїРѕР»... <a href="https://www.liveinternet.ru/users/elocjka/post315346574/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

LiveInternetLiveInternet

-Музыка

-Метки

-Рубрики

-Ссылки

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

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

-Друзья

-Сообщества

-Статистика

Рамка с круглыми углами