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

Среда, 07 Января 2015 г. 17:13 + в цитатник

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

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

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

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

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

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

box-shadow

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

ВАШ ТЕКСТ

<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 - Рамки с объемным фоном без фотошопа!
Часть 3 - Как сделать тени в рамочке и на картинках
Часть 4 - Закругление углов изображения без ФШ

Рубрики:

ШПАРГАЛКИ