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

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

Цитата сообщения 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>

Рубрики:

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

Рамочки - уроки
уроки по html

<a href="https://www.liveinternet.ru/users/elocjka/post349158314/">РљР°Рє СЃРґРµР»Р°С‚СЊ С‚РµРЅРё РІ СЂР°РјРѕС‡РєРµ Рё РЅР° РєР°СЂС‚РёРЅРєР°С…</a><br/>РЎРµРіРѕРґРЅСЏ СЃРґРµР»Р°СЋ СЂР°РјРѕС‡РєРё Рё РѕС‚РєСЂС‹С‚РѕС‡РєРё СЃ С‚РµРЅСЊСЋ Р±РµР· Р¤РЁ, РёСЃРїРѕР»СЊР·СѓСЏ 
РіРµРЅРµСЂР°С‚РѕСЂ СЂР°РјРѕРє, 
РЈСЂРѕРє РўСѓРў.
РЎРґРµР»Р°Р»Рё СЂР°РјРѕС‡РєСѓ, РЅРѕ СЂР°РјРѕС‡РєР° С‚Р°Рј РїР»СѓС‡Р°РµС‚СЃСЏ РїР»РѕСЃРєР°СЏ, РґР° Рё С†РІРµС‚ С„РѕРЅР° РѕРґРЅРѕС‚РѕРЅРЅС‹Р№...
Р§С‚РѕР±С‹ СЂР°РјРѕС‡РєР° РёРјРµР»Р° РєР°Рє Р±С‹ РѕР±СЉРµРј, РІРѕС‚ Рё РІРѕСЃРїРѕР»СЊР·СѓРµРјСЃСЏ РїРѕРґСЃРєР°Р·РєРѕР№ СЃР°Р№С‚Р°
РЁРїР°СЂРіР°Р»РєР° Р±Р»РѕРіРіРµСЂР°

Рё РЅР°С‡РЅРµРј РІРёРґРѕРёР·РјРµРЅСЏС‚СЊ С„РѕСЂРјСѓР»Сѓ СЂР°РјРѕС‡РєРё, РїРѕР»СѓС‡РµРЅРЅСѓСЋ РІ РіРµРЅРµСЂР°С‚РѕСЂРµ.
Р—Р° С‚РµРЅРё РѕС‚РІРµС‡Р°РµС‚ С‚РµРі box-shadow

РЅСѓ РІРѕС‚, С‚СѓС‚ РІСЃРµ СЏСЃРЅРѕ, РЅР°С‡РЅРµРј СЌРєСЃРїРµСЂРµРјРµРЅС‚РёСЂРѕРІР°С‚СЊ:
СЃРґРµР»Р°РµРј РІРЅСѓС‚СЂРµРЅРЅСЋСЋ С‚РµРЅСЊ, С€РёСЂРёРЅСѓ СЂР°РјРѕС‡РµРє СЏ СЃРґРµР»Р°Р»Р° РЅРµР±РѕР»СЊС€РѕР№
  Р’РђРЁ РўР•РљРЎРў
 Р’РђРЁ РўР•РљРЎРў

Р’РђРЁ РўР•РљРЎРў
 Р’РђРЁ РўР•РљРЎРў

СЌС‚Рѕ Сѓ РЅР°СЃ СЂР°РјРѕС‡РєР° СЃ РѕРґРЅРѕС‚РѕРЅРЅС‹Рј С„РѕРЅРѕРј РґР»СЏ С‚РµРєСЃС‚Р° РїРѕ С„Рѕ... <a href="https://www.liveinternet.ru/users/elocjka/post349158314/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

LiveInternetLiveInternet

-Музыка

-Метки

-Рубрики

-Ссылки

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

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

-Друзья

-Сообщества

-Статистика

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