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

Среда, 14 Января 2015 г. 02:57 + в цитатник

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

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

Рубрики:

РАМОЧКИ. УРОКИ И СКЕЛЕТЫ

Понравилось: 3 пользователям