Как сделать тени в рамочке и на картинках

Суббота, 24 Октября 2015 г. 21:28 + в цитатник

Цитата сообщения Lyusya-Spring

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

Как сделать тени в рамочке и на картинках

Сегодня сделаю рамочки и открыточки с тенью без ФШ, используя

.
Сделали рамочку, но рамочка там плучается плоская, да и цвет фона однотонный...
Чтобы рамочка имела как бы объем, вот и воспользуемся подсказкой сайта

Шпаргалка блоггера

и начнем видоизменять формулу рамочки, полученную в генераторе.
За тени отвечает тег

box-shadow

***Желаю удачи!***

<div style="border-radius:5px;padding:10px;background-image:url('https://img-fotki.yandex.ru/get/15597/120937872.17e/0_b4fa6_a88b9fe9_XS.png');width:50%;box-shadow: 0px 5px 10px 4px #000000;"><center><br /><font face="Comic Sans MS"> <text size="5"><font size="+1"><font color="#FFFFFF">***Желаю удачи!***</font></font></text> </font><br /><br /></center></div>

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

ВАШ ТЕКСТ

<div style="width:300px;height:***px;-webkit-border-radius: 99px;-moz-border-radius: 99px;border-radius: 99px;border:4px solid #2F4A96;background-color:#42D3E3;-webkit-box-shadow: inset 0px 3px 15px 10px #1E90FF;"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#ffffff;font-size:15px">ВАШ ТЕКСТ<br />
</span></div></center></div>

<div style="width:300px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-color:#42D3E3;-webkit-box-shadow: inset 0px 3px 15px 10px #0000FF;"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#ffffff;font-size:15px">ВАШ ТЕКСТ<br />
</span></div></center></div>

это у нас рамочка с однотонным фоном для текста по формуле генератора, а теперь добавим в формулу тег background-image: url('***Фон***');, получаем рамочку со своим фоном. В формуле рамочки, значение высоты убраны, это для того, чтобы рамочка растягивалась в длину, ширину рамочки делаем на свое усмотрение.

ВАШ ТЕКСТ

<div style="width:500px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow:inset rgba(0,0,0,.5) -3px -3px 8px,inset rgba(255,255,255,.9) 3px 3px 8px,rgba(0,0,0,.8) 3px 3px 8px -3px;"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000066;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

Вместо фона для записей, можно вставить картинку, но тогда на до обязательно указывать высоту картинки и если не предполагается писать текст, то тогда из формулы убрать теги текста <*span style="font-family:Georgia;color:#000066;font-size:20px">ВАШ ТЕКСТ
<*/span>, либо просто слова ВАШ ТЕКСТ

объёмом можно смастерить, например, объёмную красивую кнопку.

тут надо обратить внимание на то, что код располагается столбиком, а его надо сделать построчным, иначе ничего не получится

ВАШ ТЕКСТ

<div style="width:300px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow:-1px 0px rgb(0,0,128), -1px 1px rgb(0,0,64),-2px 1px rgb(0,0,127), -2px 2px rgb(0,0,63),-3px 2px rgb(0,0,126), -3px 3px rgb(0,0,62),-4px 3px rgb(0,0,125), -4px 4px rgb(0,0,61),-5px 4px rgb(0,0,124), -5px 5px rgb(0,0,60),-6px 5px rgb(0,0,123), -6px 6px rgb(0,0,59),-7px 6px rgb(0,0,122), -7px 7px rgb(0,0,58);"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

Эффект тени блока

ВАШ ТЕКСТ

<div style="width:500px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .2);"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

Тень вокруг

ВАШ ТЕКСТ

<div style="width:500px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, .2);"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

ВАШ ТЕКСТ

<div style="width:500px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

вот эта внешняя тень мне понравилась и я решила сделать с ней пару открыток!

<div style="width:500px;height:375px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('//i072.radikal.ru/1501/68/4d9bf62ecaac.jpg');background-color:#42D3E3;-webkit-box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);"><center><div style="padding:20px" zzz="zzz" align="center"></div></center></div>

<center><img src="https://img-fotki.yandex.ru/get/15520/120937872.17b/0_b4d0f_28b01a1e_M.png" width="300" height="" border="0" align="left" /><br /><br /><br /><div style="width:500px;height:375px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('//s020.radikal.ru/i708/1501/cd/2be2e76c74c6.jpg');background-color:#42D3E3;-webkit-box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);"><center><div style="padding:20px" zzz="zzz" align="center"></div><br /><br /><br /><br /><img src="https://img-fotki.yandex.ru/get/4523/104967700.44/0_73a01_16590ba8_orig.png" width="300" height="" border="0" align="right" /></center></div></center>

ВАШ ТЕКСТ

<div style="width:300px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, .3),-33px 0 30px -33px rgba(0, 0, 0, .8),33px 0 30px -33px rgba(0, 0, 0, .8),0 0 40px rgba(0, 0, 0, .1) inset;"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

<div style="width:300px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

ВАШ ТЕКСТ

<div style="width:300px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow: 6px 6px #989898, 12px 12px #6c6666;"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

<div style="width:300px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow:0 0 0 1px silver,0 -20px 0 -10px coral,20px 0 0 -10px darkturquoise,0 20px 0 -10px gold,-20px 0 0 -10px chartreuse;"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

ВАШ ТЕКСТ

<div style="width:300px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow:0 0 0 1px rgb(194, 192, 184) inset,0 5px 0 -4px rgb(255, 255, 255),0 5px 0 -3px rgb(194, 192, 184),0 11px 0 -8px rgb(255, 255, 255),0 11px 0 -7px rgb(194, 192, 184),0 17px 0 -12px rgb(255, 255, 255),0 17px 0 -11px rgb(194, 192, 184);"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

<div style="width:300px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow:0 0 0 7px #60B88D,0 0 0 14px #90CDAF,0 0 0 21px #BFE3D1;"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

ВАШ ТЕКСТ

<div style="width:200px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow:-15px -15px 2px -5px rgba(160,82,45,.5),-15px 15px 2px -5px rgba(0,255,255,.5),15px -15px 2px -5px rgba(255,0,0,.5),15px 15px 2px -5px rgba(255,255,0,.5);"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

<div style="width:200px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit-box-shadow:0 0 0 3px #ccc,inset 0 0 0 3px #ccc;"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

<div style="width:200px;height:***px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:4px solid #2F4A96;background-image: url('https://img-fotki.yandex.ru/get/5308/120937872.fc/0_ae3a1_a4d19f17_XS.png');background-color:#42D3E3;-webkit- box-shadow:-20px 20px 0 -17px #fff,20px -20px 0 -17px #fff,20px 20px 0 -20px #c27153,0 0 0 2px #c27153;"><center><div style="padding:20px" zzz="zzz" align="center"><span style="font-family:Georgia;color:#000000;font-size:20px">ВАШ ТЕКСТ<br />
</span></div></center></div>

Серия сообщений "Коды и уроки по рамкам.":
Часть 1 - Коды рамок(универсальные).
Часть 2 - Коды разрезных рамок в ФШ.
...
Часть 5 - Как сделать окошко для кода.
Часть 6 - Учимся делать Рамку с уголками.
Часть 7 - Как сделать тени в рамочке и на картинках
Часть 8 - Урок. КАК ПОЛЬЗОВАТЬСЯ "РАМОЧНИКОМ"
Часть 9 - Урок - как правильно сделать рамочку в генераторе CssRound.