Xwab
Форумыnavigate_nextHTML/CSS

тень картинки CSS
Сообщения
navi

как сделать? не рамку а именно тень к картинке

14 Май 2011, 0:28
Sceptic

[css]
img {
Box-shadow: 1px 1px 4px #333;
}
[/css]
Тень в:
1px по оси x, 1px по оси y, 4px - размытие (сглаживание) и #333 - цвет тени.
Можно задать несколько теней, делается это так:
[css]
img {
Box-shadow:
1px 1px 4px #333,
0 0 10px #777,
0 0 15px #f00;
}
[/css]
---
P.S.: вместо img можешь вставить имя див-класса или какой-либо другой, требуемый элемент.
P.P.S.: CSS3

14 Май 2011, 1:14
navi

спасибо, попробую
добавлено спустя 3 минуты:
она во круг получается, а как сделать левый и нижний край только?

14 Май 2011, 1:30
Sceptic

[css]
img {
Box-shadow: -1px 1px 0 #333;
}
[/css]

14 Май 2011, 1:36
navi

а так вообще ничего нет

14 Май 2011, 1:46
Sceptic

Я только что проверил, все есть.
Может ты используешь img, а применяешь в классе? Попробуй значения(-1px 1px) увеличить, возможно, ты их просто не видишь.

14 Май 2011, 1:48
navi

точно, ступил, у меня фон #333 и рамка #333, а как сделать нижний и правый края?
добавлено спустя 1 минуту:
и чуть смещение по осям на 3px

14 Май 2011, 2:02
Sceptic

[css]
img {
Box-shadow: 3px 3px 0 #333;
}
[/css]

14 Май 2011, 2:02
navi

спасибо работает

14 Май 2011, 2:12
Sceptic

Пожалуйста).
Я бы посоветовал пользоваться 3-им значением, т.к. сглаживание придает более смягченный эффект. Ну, это еще зависит от того, для чего тебе эти тени нужны.

14 Май 2011, 2:14
Ответить на тему