Форум Сайтостроение Веб-строительство

Как сделать в HTML рамку с тенью?

K
На сайте с 12.07.2006
Offline
295
Kpd
3289

Собственно сабж, можно через стили сделать рамку с тенью? нашел только groove и ridge для border-style, слишком грубо :gm:

Egi[s]
На сайте с 08.04.2007
Offline
244
Egi[s]
#1

НЕ грубой рамки стандартными методами сделать нельзя.

Ayavryk
На сайте с 11.10.2003
Offline
209
Ayavryk
#2
Kpd:
Собственно сабж, можно через стили сделать рамку с тенью? нашел только groove и ridge для border-style, слишком грубо 😒

В IE есть фильтр. Если кроссброузерно - то либо шукайте скриптовые библиотеки типа http://www.tastypopsicle.com/dropshadow/ либо ручками.

Что-нибудь типа:

<div>

<div style="border-left:#f0f0f0solid 1px;border-bottom:gray solid 1px;position:relative;left:2px top 5px;">

<div style="border-left:#f3f3f3 solid 1px;border-bottom:gray solid 1px;position:relative;left:3px top 5px;">

<div style="border-left:#f6f6f6 1px;border-bottom:gray solid 1px;position:relative;left:4px top 5px;">

<div style="border-left:#fcfcfc solid 1px;border-bottom:gray solid 1px;position:relative;left:5px top 5px;">

</div>

</div>

</div>

</div>

</div>

+ прозрачность если потребуется. Кроссброузерная прозрачность здесь: http://www.tigir.com/opacity.htm

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/
NetPromoter-2010: круглый стол «Тенденции Стенограмма круглого стола Netpromoter'09 Netpromoter-2010: круглый стол «Тенденции
Kolyaj
На сайте с 28.03.2006
Offline
69
Kolyaj
#3

Kpd, а для чего рамка? Если для картинок с одинаковыми размерами, то все просто:


    img {
      background-image: url(картинка с тенью);
      padding: 10px; /* Здесь ширина тени, можно разную для разных краев */
    }

Для ИЕ надо указать

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
K
На сайте с 12.07.2006
Offline
295
Kpd
#4

Рамка для группировки элементов формы.

Понял, что без картинок красиво не получится, сделаю просто одной картинкой.

Всем спасибо.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий