Мобильный LiveInternet Изучаю тени... | Даша_Лебидева

Авторизация

Дневник Даша_Лебидева Лента друзей - Дневник - Полная версия

Изучаю тени... 14-01-2015 11:24 к комментариям - к полной версии - понравилось!

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

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

вверх^ к полной версии понравилось! в evernote

Комментарии (11):

Светлана_Башилова 14-01-2015-19:15 удалить

Благодарю, Сонечко!

http://nethistory.mirtesen.ru/blog/43079231348/Pohischenie-"Evropyi"-ili-gibel-dinastii-Merovingov?utm_campaign=transit&utm_source=main&utm_medium=page_0&domain=mirtesen.ru&paid=1&pad=1

Обратиться - Ответить - К полной версии

Светлана_Башилова 14-01-2015-19:15 удалить

http://nethistory.mirtesen.ru/blog/43079231348/Pohischenie-"Evropyi"-ili-gibel-dinastii-Merovingov?utm_campaign=transit&utm_source=main&utm_medium=page_0&domain=mirtesen.ru&paid=1&pad=1

Обратиться - Ответить - К полной версии

Светлана_Башилова 14-01-2015-19:16 удалить

Николай Левашов
- See more at: http://www.razved.ca/index.php?id=obshhestvo&t...amp;page_number=1#.VLWC9lccTcc

Обратиться - Ответить - К полной версии

Даша_Лебидева 14-01-2015-23:39 удалить

Ответ на комментарий Светлана_Башилова # Светик, читаю и думаю, как только не пытаются переделать бедную историю! А христианство на Русь пришло еще от княгини Ольги, хотя она склонялась не в православие, а в катиличество. Хотя статья написана интересно. Спасибо, моя хорошая!

Обратиться - Ответить - К полной версии

Комментарии (11): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Изучаю тени... | Даша_Лебидева - Дневник Даша Лебидева | Лента друзей Даша_Лебидева / Полная версия Добавить в друзья Страницы: раньше»