CurlyBrace29 фев 2008 в 23:04

Эффект тени для картинки с помощью CSS

1 мин

11K

CSS *

+14

Комментарии 12

passtas 1 мар 2008 в 00:38

Хорошо, но этот вариант оптимален только для частичных случаев минималистического отображения и является полезным только для статического отображения. что делать когда у нас плавающий блок и нам необходима качественная тень к примеру на 3 пиксела, которая сможет на 50% отображать то, что под ней. Приходит в голову только png с альфа-каналами.
Если Вам не сложно, расскажите как делаются подобные тени. И на сколько реально сделать их одним классом?

nini 1 мар 2008 в 01:34

http://www.artlebedev.ru/tools/technogre…

mente 1 мар 2008 в 09:45

Уж больно много кода имхо. Но сделано здраво

killerdesign 1 мар 2008 в 22:22

Вот поглядите, делал недавно полупрозрачные теньки вот здесь
http://www.sssr.net.ua

putnik 1 мар 2008 в 00:56

Чтобы не было проблем с белым фоном, вполне можно поставить однопиксельную рамку слева и сверху.

alias 1 мар 2008 в 07:04

Лучше все-таки, если есть возможность, добавить тень на самой картинке с помощью photoshop или чего-нибуть похожего. Разница между этими тенями будет очень сильная.

gkopanev 1 мар 2008 в 09:53

Если тень нужна более сложной текстуры, чем просто однотонный цвет, то можно, нарисовав предварительно в Photoshop изображение тени (прямоугольный файл с размером, превышающим размер самой большой картинки), получить универсальную тень для картинок любых размеров:



.shadow

{

float:left; background: url('файл с картинкой тени') no-repeat bottom right ; position: relative;

}



.shadow img 

{ margin: -5px 1px 1px -5px;}





<div class="shadow"><img src="картинка.jpg"></div>