Мобильный LiveInternet Поговорим о рамочках... | E-Ledi - Искусство быть женщиной — это искусство подбирать мелочи так, чтобы получалось счастье. |

Авторизация

Дневник E-Ledi Лента друзей - Дневник - Полная версия

Поговорим о рамочках... 21-02-2025 22:52 к комментариям - к полной версии - понравилось!

Это цитата сообщения tomishka Оригинальное сообщение

Нашли в интернете картинку, решили сделать с этой картинкой рамочку, но вам захотелось картинку как-то оживить. Если картинка зимняя, то ее можно оживить летящим снегом. Для этой цели подойдет шаблон, предложенный ниже.

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

<center><table style="width:700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000;" background="фон под картинку" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><table width="ширина картинки" height="высота картинки" style="border:0px none #;-webkit-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);-moz-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);" background="адрес картинки" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" zzz="zzz" align="center"><table width="ширина картинки" height="высота картинки" style="" background="адрес картинки со снегом" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"></td></tr></table></td></tr></table><br /><center><fieldset style="width: 680 px; border:5px #ffffff dotted; padding: 3px;background-image:#; box-shadow: 0px 0px 3px #000;"><center><span style="font-family:Arial;color:#000000 ;font-size:18px;text-shadow: -1px -1px 1px #efefef;"><br />Здесь будет ваш текст<br /><br /></span></center></fieldset></center></td></tr></table></center><center></center>

Я нашла вот такую картинку:
ku54 (700x393, 252Kb)

Ширина картинки - 700px, высота - 393px. Чтобы дать необходимые пояснения подставим в шаблон ширину и высоту используемой картинки, причем только в одном месте.

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

<center><table style="width:700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000;" background="фон под картинку" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><table width="700" height="393" style="border:0px none #;-webkit-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);-moz-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);" background="адрес картинки" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" zzz="zzz" align="center"><table width="ширина картинки" height="высота картинки" style="" background="адрес картинки со снегом" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"></td></tr></table></td></tr></table><br /><center><fieldset style="width: 680 px; border:5px #ffffff dotted; padding: 3px;background-image:#; box-shadow: 0px 0px 3px #000;"><center><span style="font-family:Arial;color:#000000 ;font-size:18px;text-shadow: -1px -1px 1px #efefef;"><br />Здесь будет ваш текст<br /><br /></span></center></fieldset></center></td></tr></table></center><center></center>

В шаблоне предусмотрены две тени: внешняя тень для всей рамочки и внутренняя для картинки. Если картинка темная, как у нас, то тень уместна, а вот со светлой картинкой рамочка смотрится плохо, и тень желательно убрать или изменить ее цвет. Посмотрим на рамочку с выбранной картинкой.

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

<center><table style="width:700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000;" background="https://img0.liveinternet.ru/images/attach/d/4/159/982/159982754_ft11.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><table width="700" height="393" style="border:0px none #;-webkit-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);-moz-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);" background="//img0.liveinternet.ru/images/attach/d/4/163/719/163719920_ku54.gif" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" zzz="zzz" align="center"><table width="700" height="393" style="" background="//img0.liveinternet.ru/images/attach/d/4/159/785/159785842_xsi.gif" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"></td></tr></table></td></tr></table><br /><center><fieldset style="width: 680 px; border:5px #ffffff dotted; padding: 3px;background-image:#; box-shadow: 0px 0px 3px #000;"><center><span style="font-family:Arial;color:#000000 ;font-size:18px;text-shadow: -1px -1px 1px #efefef;"><br />Здесь будет ваш текст<br /><br /></span></center></fieldset></center></td></tr></table></center>

А вот рамочка со светлой картинкой выполнена по тому же шаблону только с заменой стилевого свойства бордюра (вместо dotted стоит double и белый цвет ffffff заменен черным 000000).

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

<center><table style="width:700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000;" background="https://img0.liveinternet.ru/images/attach/d/4/159/982/159982754_ft11.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><table width="700" height="498" style="border:0px none #;-webkit-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);-moz-box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);box-shadow: inset 0px 0px 20px 9px rgba(0,0,0,0.79);" background="//img1.liveinternet.ru/images/attach/d/4/163/735/163735515_ku73.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" zzz="zzz" align="center"><table width="700" height="498" style="" background="//img0.liveinternet.ru/images/attach/d/4/159/785/159785842_xsi.gif" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"></td></tr></table></td></tr></table><br /><center><fieldset style="width: 680 px; border:5px #000000 double; padding: 3px;background-image:#; box-shadow: 0px 0px 3px #000;"><center><span style="font-family:Arial;color:#000000 ;font-size:18px;text-shadow: -1px -1px 1px #efefef;"><br />Здесь будет ваш текст<br /><br /></span></center></fieldset></center></td></tr></table></center>

Мне тень внутри не понравилась, и я решила сделать ее светлой, вот какая получилась рамочка:

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

<center><table style="width:700px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 7px, -7px 18px 36px -20px #000;" background="https://img0.liveinternet.ru/images/attach/d/4/159/982/159982754_ft11.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"><table width="700" height="498" style="border:0px none #;-webkit-box-shadow: inset 0px 0px 20px 9px rgba(252,255,255,0.79);-moz-box-shadow: inset 0px 0px 20px 9px rgba(252,255,255,0.79);box-shadow: inset 0px 0px 20px 9px rgba(252,255,255,0.79);" background="//img1.liveinternet.ru/images/attach/d/4/163/735/163735515_ku73.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" zzz="zzz" align="center"><table width="700" height="498" style="" background="//img0.liveinternet.ru/images/attach/d/4/159/785/159785842_xsi.gif" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" zzz="zzz" align="center"></td></tr></table></td></tr></table><br /><center><fieldset style="width: 680 px; border:5px #000000 double; padding: 3px;background-image:#; box-shadow: 0px 0px 3px #000;"><center><span style="font-family:Arial;color:#000000 ;font-size:18px;text-shadow: -1px -1px 1px #efefef;"><br />Здесь будет ваш текст<br /><br /></span></center></fieldset></center></td></tr></table></center>

Удачи всем желающим сделать свою рамочку!

вверх^ к полной версии понравилось! в evernote

Вы сейчас не можете прокомментировать это сообщение.

Дневник Поговорим о рамочках... | E-Ledi - Искусство быть женщиной — это искусство подбирать мелочи так, чтобы получалось счастье. | Лента друзей E-Ledi / Полная версия Добавить в друзья Страницы: раньше»