Прозрачная рамочка с прокруткой (по просьбам)

 

Код рамочки:

Рамочка с разрывом.

РАМОЧКА С РАЗРЫВОМ

Как то уже давненько не встречала рамок, в которых есть рамочка с разрывом. Но тут мне о них напомнила falconet-n. Благодаря ей и появился этот урок. На фоне показаны несколько примеров таких рамок.

Простая рамочка Выпуклая рамочка Рамочка с круглыми углами Рамочка с тенью Рамочка с заданной шириной

урок провела Егорова Таня

Читать далее

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

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

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

<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>

Смотрим дальше

Стильные рамки (блоки)

Недавно заинтересовалась CSS (Cascading Style Sheets) — каскадные таблицы стилей.
Можно ли, не будучи веб-дизайнером, научиться разбираться в этом сложном наборе
параметров? Для чего? Ну, хотя бы для того, чтобы с помощью языка CSS создавать
блоки (рамочки), где будут размещаться текст, картинки или что нашей душе угодно.
Поэкспериментировала с кодами и получила вот такие стильные, лёгкие блоки.

Под каждым стоит его код. Можно менять размер (атрибут width: 650px), цвет фона,
обводок, чтобы получить разные по цветовому исполнению блоки.
Обозначение цвета: #ABEDF7, просто оставляем решётку #, убираем ABEDF7,
и ставим свой цвет.

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

Ваша подпись

<center><div style="#shed_left; padding: 20px; width: 650px; background: #C3FEAA; border-radius: 12px; box-shadow: 4px 4px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #66CC00; padding:10px; background: #FBFFAC; border-radius: 12px; boxShadow 11: width: 80%; max-width:; margin: 0em auto; padding: 1em; box-shadow: 0 4px 4px #575555 inset;"><span style="font-family: Georgia; color:#000000; font-size: 19px;"><i> Здесь будет ваш текст<br /> <br /> </i></span><center><a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></div></div></center>

Смотрим дальше

Рамочка с картинкой внизу и вверху + скелетик

 

***Здесь пишите свой текст***




 

 

                                                             <center> <img align="left" border="0" height="" data-cke-saved-src="http://imagehost.spark-media.ru/i4/767476C9-0D04-3FAE-EA72-6747F616FEF7.gif" src="http://imagehost.spark-media.ru/i4/767476C9-0D04-3FAE-EA72-6747F616FEF7.gif" width="113" /><br /> <br /> <br /> <br /> <div style="border:2px inset #000099;border-radius:10px;padding:10px;background-image:url('http://imagehost.spark-media.ru/i4/3B730557-8258-A2B2-7F53-A419D88832F1.gif');width:85%;box-shadow: inset 0px 0px 25px #000000;"> <div style="border:2px dashed #000099;border-radius:10px;padding:10px;background-image:url('http://imagehost.spark-media.ru/i4/F1AAA880-0C3E-6A73-87E4-3EC755796D2A.jpg');width:90%;box-shadow: inset 0px 0px 25px #000000;"> <center> <div style="border:6px double #000099;border-radius:10px;padding:10px;background-image:url('http://imagehost.spark-media.ru/i4/09AEB97B-9F5D-C401-CD22-ADA1D025D200.jpg');width:90%;box-shadow: inset 5px 5px 35px #000000;"> <center> <br /> <font face="Times New Roman"><text size="5"><font size="+2"><font color="#000000">***Здесь пишите свой текст***</font></font></text> </font><img align="right" border="0" height="" data-cke-saved-src="http://imagehost.spark-media.ru/i4/28A096C0-FC63-275D-5ADC-21F67AAD0336.gif" src="http://imagehost.spark-media.ru/i4/28A096C0-FC63-275D-5ADC-21F67AAD0336.gif" width="106" /><br /> <br /> <br /> <br /> <br />  </center> </div> </center> </div> </div> </center>

 

 

СКЕЛЕТИК РАМОЧКИ:

***Здесь пишите свой текст***




 

 

                                                          <center> <img align="left" border="0" height="" data-cke-saved-src="Картинка вверху-ссылка прямая" src="Картинка вверху-ссылка прямая" width="Ширина картинки" /><br /> <br /> <br /> <br /> <div style="border:2px inset #000099;border-radius:10px;padding:10px;background-image:url('ФОН-1');width:85%;box-shadow: inset 0px 0px 25px #000000;"> <div style="border:2px dashed #000099;border-radius:10px;padding:10px;background-image:url('ФОН-2');width:90%;box-shadow: inset 0px 0px 25px #000000;"> <center> <div style="border:6px double #000099;border-radius:10px;padding:10px;background-image:url('ФОН для текста');width:90%;box-shadow: inset 5px 5px 35px #000000;"> <center> <br /> <font face="Times New Roman"><text size="5"><font size="+2"><font color="#000000">***Здесь пишите свой текст***</font></font></text> </font><img align="right" border="0" height="" data-cke-saved-src="Картинка внизу" src="Картинка внизу" width="Ширина картинки-ссылка прямая" /><br /> <br /> <br /> <br /> <br />  </center> </div> </center> </div> </div> </center>

Гуляя по Интернету вы наверняка видели музыкальные открытки, сделанные к разным праздникам. Я давно хотела научится делать такие поздравления. И вот вроде научилась...))) А как уж получилось - решать вам. Такие музыкальные открытки можно сделать к любому празднику. И это будет эксклюзивное поздравление. Для ваших родных, друзей, начальников и детей. Поэтому не стесняйтесь, делайте заказы, цена муз. открытки 500 р. А как приятно будет получить именную открытку к празднику вашим друзьям и родственникам. Сделала две открытки для примера, кликайте на картинки ниже. Большая просьба, по возможности перепостить пост и кликнуть прямо в открытках на кнопочки по соц. сетям. Большое спасибо за помощь и поддержку...)))

пост составила

Скелетики моих рамок по формулам Сергея Вам остается только вставить свои фоны

Урок Сергея здесь

Ваш текст



Ваша кликабельная подпись

<center> <div style="box-shadow:1px 2px 7px black,-2px -2px 1px white,-2px -2px 7px white;border:2px inset #00000;border-radius:0px 600px 0px 600px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:15px;background-image:url('ФОН №1');width:70%;"> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black;border:2px inset #000000;border-radius:0px 395px 0px 395px;-moz-border-radius:65px;-webkit-border-radius:1em;padding:22px;background-image:url('ФОН №2');width:85%;"> <center> <div style="box-shadow:2px 2px 7px white,-2px -2px 7px white,2px 2px 7px black;border:1px inset #000000;border-radius:0px 385px 0px 385px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:4px;background-image:url('ФОН №3');width:85%;"> <center> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black; border:2px inset #000000;border-radius:0px 385px 0px 385px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:10px;background-image:url('ФОН №4 для текста');width:95%;"> <center> <br /> <div align="center"> <span style="font-family:Georgia;color:#343A14;font-size:20px" face="Georgia"><br /><br /> Ваш текст<br /></span><br /> <br /><br /> <center>Ваша кликабельная подпись</center> </div></center> </div></center> </div> </center> </div> </div></center>

Ваш текст

Ваша подпись

<center> <div style="box-shadow:1px 2px 7px black,-2px -2px 1px white,-2px -2px 7px white;border:2px inset #00000;border-radius:70px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:8px;background-image:url('ФОН №1');width:70%;"> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black;border:2px inset #000000;border-radius:70px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:30px;background-image:url('ФОН №2');width:85%;"> <center> <div style="box-shadow:2px 2px 9px black,-2px -2px 7px black,-2px -2px 7px black; border:2px inset #000000;border-radius:70px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:15px;background-image:url('ФОН №3');width:95%;"> <center> <br /> <div align="center"> <p><br /> <span style="color:#000000;"><span style="font-weight: 400; text-align: center; font-family: &quot;monotype corsiva&quot;, serif; font-size: 15px; line-height: 150%; rgb(85, 69, 0), 1px 1px 1px rgb(135, 102, 0); column-count: 3;"><font face="Courier New" style="font-size:20px"><span style="font-family:georgia,serif;"><em><strong>Ваш текст</strong></em></span></font></span></span><br /> </p>Ваша подпись<span style="font-family:Georgia;color:#000000;font-size:12px"></span></div></center> </div></center> </div></div></center>

Серия сообщений "без картинки ч.4":

Моя рамочка

Часть 1 - Рамочка ЛЮБА-ЛЮБУШКА №36
Часть 2 - Рамочки с кружевами
...
Часть 23 - Сиреневые рамочки с закругленными краями
Часть 24 - Мои рамочки объемные с тенями по формулам Сергея
Часть 25 - Скелетики моих рамок по формулам Сергея Вам остается только вставить свои фоны

Серия сообщений "скелетики рамок Егоровой":

Рамочки

Часть 1 - РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА
Часть 2 - Номера фонов для скелетиков
...
Часть 20 - Скелетик рамки с закругленными краями
Часть 21 - Генератор необычных рамочек
Часть 22 - Скелетики моих рамок по формулам Сергея Вам остается только вставить свои фоны
Часть 23 - Рамочки с внутренней тенью без ФШ
Часть 24 - Рамки с объемным фоном без фотошопа!

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

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

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

РАМКА А

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

РАМКА Б

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

РАМКА В

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

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

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

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

Читать далее...

Скелетики моих рамок по формулам Сергея Вам остается только вставить свои фоны

Урок Сергея здесь

Ваш текст



Ваша кликабельная подпись

<center> <div style="box-shadow:1px 2px 7px black,-2px -2px 1px white,-2px -2px 7px white;border:2px inset #00000;border-radius:0px 600px 0px 600px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:15px;background-image:url('ФОН №1');width:70%;"> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black;border:2px inset #000000;border-radius:0px 395px 0px 395px;-moz-border-radius:65px;-webkit-border-radius:1em;padding:22px;background-image:url('ФОН №2');width:85%;"> <center> <div style="box-shadow:2px 2px 7px white,-2px -2px 7px white,2px 2px 7px black;border:1px inset #000000;border-radius:0px 385px 0px 385px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:4px;background-image:url('ФОН №3');width:85%;"> <center> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black; border:2px inset #000000;border-radius:0px 385px 0px 385px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:10px;background-image:url('ФОН №4 для текста');width:95%;"> <center> <br /> <div align="center"> <span style="font-family:Georgia;color:#343A14;font-size:20px" face="Georgia"><br /><br /> Ваш текст<br /></span><br /> <br /><br /> <center>Ваша кликабельная подпись</center> </div></center> </div></center> </div> </center> </div> </div></center>

Ваш текст

Ваша подпись

<center> <div style="box-shadow:1px 2px 7px black,-2px -2px 1px white,-2px -2px 7px white;border:2px inset #00000;border-radius:70px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:8px;background-image:url('ФОН №1');width:70%;"> <div style="box-shadow:2px 2px 7px black,-2px -2px 7px black,-2px -2px 7px black;border:2px inset #000000;border-radius:70px;-moz-border-radius:70px;-webkit-border-radius:1em;padding:30px;background-image:url('ФОН №2');width:85%;"> <center> <div style="box-shadow:2px 2px 9px black,-2px -2px 7px black,-2px -2px 7px black; border:2px inset #000000;border-radius:70px;-moz-border-radius:70px;-webkit-border-radius:2em;padding:15px;background-image:url('ФОН №3');width:95%;"> <center> <br /> <div align="center"> <p><br /> <span style="color:#000000;"><span style="font-weight: 400; text-align: center; font-family: &quot;monotype corsiva&quot;, serif; font-size: 15px; line-height: 150%; rgb(85, 69, 0), 1px 1px 1px rgb(135, 102, 0); column-count: 3;"><font face="Courier New" style="font-size:20px"><span style="font-family:georgia,serif;"><em><strong>Ваш текст</strong></em></span></font></span></span><br /> </p>Ваша подпись<span style="font-family:Georgia;color:#000000;font-size:12px"></span></div></center> </div></center> </div></div></center>

Серия сообщений "без картинки ч.4":

Моя рамочка

Часть 1 - Рамочка ЛЮБА-ЛЮБУШКА №36
Часть 2 - Рамочки с кружевами
...
Часть 23 - Сиреневые рамочки с закругленными краями
Часть 24 - Мои рамочки объемные с тенями по формулам Сергея
Часть 25 - Скелетики моих рамок по формулам Сергея Вам остается только вставить свои фоны

Серия сообщений "скелетики рамок Егоровой":

Рамочки

Часть 1 - РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА
Часть 2 - Номера фонов для скелетиков
...
Часть 20 - Скелетик рамки с закругленными краями
Часть 21 - Генератор необычных рамочек
Часть 22 - Скелетики моих рамок по формулам Сергея Вам остается только вставить свои фоны

РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА

Объемные рамки разной конфигурации. Без фотошопа!

Недавно я давала урок по изготовлению рамок с круглыми углами. Посмотреть его можно здесь. А Sergg62, подсказал как сделать рамки с разными углами и тенью. За это ему огромное спасибо!
Эффект круглых углов виден в браузерах Google Chrome, Mozilla Firefox. В Internet Explorer рамка будет отражаться как обычная с прямыми углами. В других не знаю.

Читать далее

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

Код готовой рамки <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;" 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"><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://urls.by/1uzy"><img src="http://urls.by/1uzx" border="0" /></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="http://content.foto.my.mail.ru/mail/tiotia-tania/14266/h-18805.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;" background="//img0.liveinternet.ru/images/attach/c/10/110/555/110555002_m3.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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.egorovatatiana.ru/" target="_blank">Егорова Татьяна</a><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.egorovatatiana.ru/" target="_blank"></a><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=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;" 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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=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;" 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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=АДРЕС ВАШЕГО БЛОГА" target="_blank">ВАША ПОДПИСЬ</a><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.egorovatatiana.ru/" target="_blank"></a><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://urls.by/1uzy"></a></b></span></td></tr></table></td></tr></table>

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

Для новичков:

1. обычная формула для вставки картинки в пост.
2. если к ней дописать, что подчеркнуто красным , то можно изменить размер картинки, причем любой, даже анимированной.
3. если дописать, что подчеркнуто синим, можно обвести картинку контуром.
4 и 5. - картинка слева или справа
6. если дописать , что подчеркнуто оранжевым, то можно изменить размер и обвести контуром.
Вот как это выглядит:Смотрите далее…

МЕНЯЕМ ЦВЕТ ТЕКСТА В РАМОЧКЕ.

Это цитата сообщения BeeMaiya [Прочитать целиком + В свой цитатник или сообщество!]

Рамочки для текстов 12 ( Он и Она )

Остальные рамочки, эпиграфы, картинки и инструкция как вставить их в пост находятся в разделе - Для оформления блога

Что нужно для вставки:

1. Копируете код из флейма
2. Новая запись – ВНИМАНИЕ – ПРОСТОЙ редактор , вставляете код и пишите всё что ходите там где написано ВАШ ТЕКСТ.
3. Нажимаете опубликовать и получаете Ваш пост в рамочке.

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

ВАШ Т Е К С Т Дайтека

<center><table border="2" background="//img1.liveinternet.ru/images/attach/b/2/24/596/24596690_18256217_guldband2.jpg" cellpadding="3" cellspacing="3" width="100%"><tr><td><table border="2" background="//img0.liveinternet.ru/images/attach/b/3/18/514/18514785_steffi79.jpg" cellpadding="5" cellspacing="0" width="100%"><tr><td><img src="//img0.liveinternet.ru/images/attach/c/0/39/106/39106856_34238370_zldwsx.jpg" align="left" width="350" height="300" alt=" (350x300, 152Kb)" /><br />ВАШ<br /><br />Т Е К С Т<br /></td></tr></table><font size="-2"><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://myelements.ru/">Дайтека</a></font></td></tr></table></center>

ВАШ Т Е К С Т Дайтека

<center><table border="2" background="//img0.liveinternet.ru/images/attach/b/3/10/590/10590740_4151956_gifts06.gif" cellpadding="3" cellspacing="3" width="100%"><tr><td><table border="2" background="//img0.liveinternet.ru/images/attach/b/1/8286/8286818_6573241_297111_21487107_20963673_20345753_1211331_2313688.jpg" cellpadding="5" cellspacing="0" width="100%"><tr><td><img src="//img0.liveinternet.ru/images/attach/c/0/39/132/39132004_186200_25378695_4.jpg" align="left" width="359" height="359" alt=" (359x359, 43Kb)" /><br />ВАШ<br /><br />Т Е К С Т<br /></td></tr></table><font size="-2"><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://myelements.ru/">Дайтека</a></font></td></tr></table></center>

ВАШ Т Е К С Т Дайтека

<center><table border="2" background="//img1.liveinternet.ru/images/attach/b/3/18/319/18319187_s205.gif" cellpadding="3" cellspacing="3" width="100%"><tr><td><table border="2" background="//s56.radikal.ru/i152/0811/2f/ad1591d82c11.jpg" cellpadding="5" cellspacing="0" width="100%"><tr><td><img src="//img0.liveinternet.ru/images/attach/c/0/39/129/39129324_33467685_2iqyiir.gif" align="left" width="306" height="306" alt=" (306x306, 163Kb)" /><br />ВАШ<br /><br />Т Е К С Т<br /></td></tr></table><font size="-2"><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://myelements.ru/">Дайтека</a></font></td></tr></table></center>

ВАШ Т Е К С Т Дайтека

<center><table border="2" background="http://vsefoni.by.ru/krasniy/fona30.gif" cellpadding="3" cellspacing="3" width="100%"><tr><td><table border="2" background="http://img.liveinternet.ru/images/attach/4/10756/10756216_79.jpg" cellpadding="5" cellspacing="0" width="100%"><tr><td><img src="//img1.liveinternet.ru/images/attach/c/0/39/132/39132334_585442_316257.jpg" align="left" width="345" height="270" alt=" (345x270, 36Kb)" /><br />ВАШ<br /><br />Т Е К С Т<br /></td></tr></table><font size="-2"><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://myelements.ru/">Дайтека</a></font></td></tr></table></center>

ВАШ Т Е К С Т Дайтека

<center><table border="2" background="//img0.liveinternet.ru/images/attach/c/0/39/135/39135444_159.JPG" cellpadding="3" cellspacing="3" width="100%"><tr><td><table border="2" background="//img1.liveinternet.ru/images/attach/c/0/35/526/35526402_106a.JPG" cellpadding="5" cellspacing="0" width="100%"><tr><td><img src="//img0.liveinternet.ru/images/attach/c/0/39/106/39106940_34617392_91556e41cf1accd66447.gif" align="left" width="300" height="379" alt=" (300x379, 176Kb)" /><br />ВАШ<br /><br />Т Е К С Т<br /></td></tr></table><font size="-2"><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://myelements.ru/">Дайтека</a></font></td></tr></table></center>

Рамочки для текстов (Нежность)

Всем привет!!!
Весна на улице, хочется любви, романтики, нежности))) Вот и получились такие рамочки, надеюсь Вам понравятся! Удачи Вам и всего самого наилучшего!!!

Что нужно для вставки:

Расширенный редактор:
1. Копируете код из флейма
2. Новая запись - нажимаете кнопку ИСТОЧНИК - вставляете код - ещё раз нажимаете кнопку - ИСТОЧНИК - выделяете слова Ваш текст и пишите свой пост.
3. Нажимаете опубликовать и получаете Ваш пост в рамочке.

Простой редактор:
1. Копируете код из флейма
2. Новая запись , вставляете код и пишите всё что ходите там где написано ВАШ ТЕКСТ.
3. Нажимаете опубликовать и получаете Ваш пост в рамочке.

Если захотите хотите поменять цвет шрифта, то Коды цвета для текстов найдёте пройдя по ссылке.

Остальные рамочки, эпиграфы, картинки и инструкция как вставить их в пост находятся в разделе - Для оформления блога

ВАШ Т Е К С Т Дайтека

ВАШ Т Е К С Т Дайтека

ВАШ Т Е К С Т Дайтека

ВАШ Т Е К С Т Дайтека

ВАШ Т Е К С Т Дайтека

Рамки ( для творчества)

 

Фотографии в альбоме «Для рамочек» Инги на Яндекс.Фотках
 

 

Читать далее

Серия сообщений " Editor by pixlr.com":
Часть 1 - Рамки ( для творчества)

РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА

ДЕЛАЕМ РАМКИ С КРУГЛЫМИ УГЛАМИ
БЕЗ ФОТОШОПА

Многие спрашивают, как сделать рамочку с круглыми углами?

ЕгороваТатьяна уже разьясняла,как это делается: тут

Немного дополню её, в своём маленьком уроке

По просьбе посетителей моего дневника продемонстрирую,в небольшом уроке, как это сделать.

Рассотрим,из чего же состоит наша формула
 

ЗДЕСЬ БУДЕТ ВАША ФОНОВАЯ КАРТИНКА
 

Это часть нашей формулы, один "контейнер" (их может быть несколько)
<div style="box-shadow:12px 8px 7px #FF533E,18px -3px 2px #2D20FF,-2px -2px 17px #00D80F;border:5px inset #3F1D00;border-radius:50px;padding:10px;background-image:url('АДРЕС ВАШЕЙ КАРТИНКИ');width:50%;"><center><br />ВАШ ТЕКСТ<br /><br />
Контейнер состоит из атрибутов:

"div style" - блочный элемент стилей
"box shadow" - эффект тени (красная, синяя, зелёная...ставить на Ваше усмотрение)
"border" - эффект бордюра : inset - цвет эффекта бордюра(чёрно серый)
"border-radius" - радиус скругления углов
Радиус скругления углов,можно задавать как 1 значением (для всех улов),
2 значениями (для 2 углов по диагонали), так и 4 углов (для каждого угла)
"padding" - внутренний отступ в элементе
"background-image" - фоновая картинка (адрес фоновой картинки)
"width" - ширина рамки (может быть выражена в % или же в px)

могут встречаться атрибуты:

"-webkit-box-shadow" - для отображения в старых версиях браузера Chrome,
"-moz-box-shadow" - для отображения в старых версиях браузера Mozilla Firefox,
"box-shadow" - для отображения во всех остальных браузерах.

Нежные рамки - Клипарт PNG

Клипарт "Нежные рамки"

Светлый оформительский декор с прозрачным фоном, в формате PNG.

Объемные рамки разной конфигурации. Без фотошопа!

Недавно я давала урок по изготовлению рамок с круглыми углами. Посмотреть его можно здесь. А Sergg62, подсказал как сделать рамки с разными углами и тенью. За это ему огромное спасибо! Он же дал ссылку на генератор, в котором можно сделать простенькие рамочки с однотонными фонами. Этот генератор здесь. Вроде ничего сложного при работе в нем нет, хоть он и на английском языке. Может кому то пригодится.
Эффект круглых углов виден в браузерах Google Chrome, Mozilla Firefox. В Internet Explorer рамка будет отражаться как обычная с прямыми углами. В других не знаю.

Читать далееРамка 8

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

Код готовой рамки <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;" 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"><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://urls.by/1uzy"><img src="http://urls.by/1uzx" border="0" /></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="http://content.foto.my.mail.ru/mail/tiotia-tania/14266/h-18805.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;" background="//img0.liveinternet.ru/images/attach/c/10/110/555/110555002_m3.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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.egorovatatiana.ru/" target="_blank">Егорова Татьяна</a><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.egorovatatiana.ru/"><img src="http://urls.by/1uzx" border="0" /></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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.egorovatatiana.ru/" target="_blank"></a><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://urls.by/1uzy"><img src="http://urls.by/1uzx" border="0" /></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;" 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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://urls.by/1uzy"><img src="http://urls.by/1uzx" border="0" /></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;" 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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.egorovatatiana.ru/" target="_blank">Егорова Татьяна</a><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.egorovatatiana.ru/"><img src="http://urls.by/1uzx" border="0" /></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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://www.egorovatatiana.ru/" target="_blank"></a><a target="_blank" href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://urls.by/1uzy"><img src="http://urls.by/1uzx" border="0" /></a></b></span></td></tr></table></td></tr></table>

Прерывистые рамки для текста

Прерывистые рамки для текста

Вчера одна ПЧ посетовала, что здесь, на ЛиРу, якобы нельзя сделать такие рамки..))
Все можно!
Вот, смотрите, какие яркие и, в то же время, простенькие, легкие рамки.

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

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

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

ФОРМУЛА ТАКОЙ РАМКИ:

Цвет рамки подбираем на генераторе цвета.
Жмите на любой цвет вращающегося круга, а справа копируйте код нужного вам цвета и вставляйте в формулу рамки




для вас Лариса Гурьянова

Серия сообщений "Делаем рамки":

Часть 1 - Рамочка с бегущими огоньками
Часть 2 - Делаем рамки - серия уроков ФШ
...
Часть 40 - Простые рамки с заголовком
Часть 41 - Простые рамки с фоном
Часть 42 - Прерывистые рамки для текста
Часть 43 - КОД РАЗРЕЗНОЙ ФОТОШОПНОЙ РАМКИ ДЛЯ Ли.Ру.
Часть 44 - Как сделать разрезную рамку в ФШ
Часть 45 - ФОРМУЛЫ РАМОЧЕК ДЛЯ МЕЙЛА
Часть 46 - Коды для Мейла и ЛиРу
Часть 47 - Делаем разрезную рамку в ФШ