Изучаю тени...

Четверг, 05 Февраля 2015 г. 10:22 + в цитатник

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

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

Изучаю тени...

И все- таки интересная вещь-эти тени! Сколько интересных возможностей, и все без ФШ! Пойду смотреть и пытаться делать самой...

Для начала зайду-ка

habrahabr ru

Рассмотрим

box-shadow

1•положительные значения по вертикали и горизонтали;
2•отрицательные значения по вертикали и горизонтали;

1•

2•

1•

<img style="box-shadow: 4px 4px 6px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

2•

<img style="box-shadow: -4px -4px 6px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

• Если потянуть окошко кодов за праый нижний угол, то можно изменить его размер

3• Blur radius и spread radius. В чем их разница?
• blur radius (Размытие)

•

<img style="box-shadow: 4px 4px 0px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

•

<img style="box-shadow: 4px 4px 10px 5px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

• spread radius - толщина тени.

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

•

<img style="box-shadow: 4px 4px 10px 0px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

•

<img style="box-shadow: 4px 4px 10px 10px#989898;" src="https://img-fotki.yandex.ru/get/15495/109260993.cb/0_c0768_aea80577_-2-M.jpg" width="300" height="200" border="0" />

4•text-shadow

Синтаксис очень похож на box-shadow: Значения аналогичные, только нет spread-shadow - толщина тени.

<*p style="Код шрифта">Ваша запись<*/p>

Всем привет!

• <*p style="text-shadow: 4px 4px 10px#ffff66;">Всем привет!<*/p>

Всем привет!

•

<p style="text-shadow: 4px 4px 5px#000000;"><font size="+5"><font face="Silver Age"> <text size="5"><text color="#ffcc66">Всем привет!</text></text> </font></font></p>

А теперь заглянем сюда

shpargalkablog ru

• Как сделать выпуклый элемент
• в этой рамочке убрем тег rgba(*,*,*,.*)-получим такой эффект

Ваш текст

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: inset  -3px -3px 8px, inset  3px 3px 8px,  3px 3px 8px -3px;" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• в этой рамочке сохраним тег rgba(*,*,*,.*)-получим такой эффект

Ваш текст

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;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;" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• а если картинку сделаем фоном?
1•

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;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;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

2•

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: inset  -3px -3px 8px, inset  3px 3px 8px,  3px 3px 8px -3px;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

•Многослойный блок с помощью box-shadow

Ваш текст

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: 6px 6px #989898, 12px 12px #6c6666;" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

1•

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: 6px 6px #99ff00, 12px 12px #009900;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

2•

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: inset  -13px -13px 18px, inset  13px 13px 18px,  13px 13px 18px -13px;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

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

Ваш текст

<center><table width="600" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="600" style="solid silver; border-radius:20px;box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .2);" background="Фон для текста" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:20px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: 20px -15px 10px 5px rgba(0, 0, 0, .2);" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• если убрать rgba(*,*,*,.*)

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px;box-shadow: 20px -15px 10px 5px ;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

• Тень вокруг

Ваш текст

<center><table width="500" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="500" style="solid silver; border-radius:20px; box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);" background="Фон под текст" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Times New Roman;color:#Цвет текста;font-size:22px;text-shadow:1px 1px 1px #000000;">Ваш текст</span></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px; box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

<center><table width="300" height="300" style=" solid silver; border-radius:20px;" background="обводка" cellspacing="0" cellpadding="0"><tr><td style="padding:3px"><table width="300" height="300" style="solid silver; border-radius:20px; box-shadow: 0 0 10px 5px ;" background="https://img-fotki.yandex.ru/get/15570/120937872.178/0_b4baf_8ab8d91a_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"></td></tr><tr><td style="padding:0px" height="1%" align="center"></td></tr></table></td></tr></table></center>

Вот и все... в этом я разобралась

Рубрики:

уроки по оформлению дневника

Метки: Изучаю тени...

<a href="https://www.liveinternet.ru/users/5138577/post352458710/">РР·СѓС‡Р°СЋ С‚РµРЅРё...</a><br/>РР·СѓС‡Р°СЋ С‚РµРЅРё...

Р РІСЃРµ- С‚Р°РєРё РёРЅС‚РµСЂРµСЃРЅР°СЏ РІРµС‰СЊ-СЌС‚Рё С‚РµРЅРё! РЎРєРѕР»СЊРєРѕ РёРЅС‚РµСЂРµСЃРЅС‹С… РІРѕР·РјРѕР¶РЅРѕСЃС‚РµР№, Рё РІСЃРµ Р±РµР· Р¤РЁ! РџРѕР№РґСѓ СЃРјРѕС‚СЂРµС‚СЊ Рё РїС‹С‚Р°С‚СЊСЃСЏ РґРµР»Р°С‚СЊ СЃР°РјРѕР№...
Р”Р»СЏ РЅР°С‡Р°Р»Р° Р·Р°Р№РґСѓ-РєР° 
habrahabr ru

Р Р°СЃСЃРјРѕС‚СЂРёРј box-shadow1вЂўРїРѕР»РѕР¶РёС‚РµР»СЊРЅС‹Рµ Р·РЅР°С‡РµРЅРёСЏ РїРѕ РІРµСЂС‚РёРєР°Р»Рё Рё РіРѕСЂРёР·РѕРЅС‚Р°Р»Рё; 
2вЂўРѕС‚СЂРёС†Р°С‚РµР»СЊРЅС‹Рµ Р·РЅР°С‡РµРЅРёСЏ РїРѕ РІРµСЂС‚РёРєР°Р»Рё Рё РіРѕСЂРёР·РѕРЅС‚Р°Р»Рё;
  1вЂў 2вЂў  
  1вЂў   2вЂў   
вЂў Р•СЃР»Рё РїРѕС‚СЏРЅСѓС‚СЊ РѕРєРѕС€РєРѕ РєРѕРґРѕРІ Р·Р° РїСЂР°С‹Р№ РЅРёР¶РЅРёР№ СѓРіРѕР», С‚Рѕ РјРѕР¶РЅРѕ РёР·РјРµРЅРёС‚СЊ РµРіРѕ СЂР°Р·РјРµСЂ  
3вЂў Blur radius Рё spread radius. Р’ С‡РµРј РёС… СЂР°Р·РЅРёС†Р°?
вЂў blur radius (Р Р°Р·РјС‹С‚РёРµ)
     
  вЂў   вЂў

вЂў spread radius - С‚РѕР»С‰РёРЅР° С‚РµРЅРё.
    
РІРёРґРёРј, С‡С‚Рѕ С‚РµРЅСЊ СЂР°СЃСЃРµРёРІР°РµС‚СЃСЏ РЅР° Р±РѕР»СЊС€СѓСЋ... <a href="https://www.liveinternet.ru/users/5138577/post352458710/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

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

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

LiveInternetLiveInternet

-Музыка

-Рубрики

-Приложения

-Фотоальбом

-Всегда под рукой

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

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

-Статистика

Изучаю тени...