лучшие практики html drop shadow - PullRequest
       5

лучшие практики html drop shadow

2 голосов
/ 31 августа 2010

Каков наилучший способ создания теней вокруг HTML, где HTML может быть жидким?

Раньше я использовал таблицу и имел 8 изображений png (4 стороны и 4 угла) в качестве фона для каждой из 8 внешних ячеек с html. Я хочу, чтобы тень падала в средней ячейке. Не очень семантически, но, по крайней мере, образы теней были фоном, и он был жидким ... HTML был уродливым, утомительным и, возможно, не очень оптимизированным для SEO.

Есть ли более совместимый (хотя я вообще не помню, чтобы у него были проблемы с браузером) способ или есть более семантический способ справиться с этим?

Меня не волнует IE6. Я использую jquery, поэтому мне вполне подходит механизм javascript / jquery, если в современных браузерах нет проблем с совместимостью.

ОБНОВЛЕНИЕ : предложение использовать CSS3 box-shadow было превосходным. Единственная проблема заключается в том, что он делает тень блока только того же размера, что и элемент html, к которому он применяется. Так что это означает, что у меня не может быть тени вокруг (как будто источник света находится прямо над головой). Я мог бы добавить окружающий div, который немного больше. Но тогда происходит то, что радиус границы заставляет белые артефакты появляться по углам ...

Есть ли способ создать красивую черную тень вокруг элемента html, а не просто сместить его от него?

ОБНОВЛЕНИЕ 2 : реализация CSS3 box-shadow и firefox / webkit поддерживает значение спреда, позволяющее получить то, что я хочу. Не было в той ссылке dynamicdrive.com ниже .. Спасибо, ребята!

Ответы [ 2 ]

7 голосов
/ 31 августа 2010

Игнорировать IE7 / 8 и использовать box-shadow CSS3 правило .Отсутствие теней не конец света в этих старых браузерах.Если это так, то взимать плату за это соответственно.Вы также можете исследовать собственные фильтры IE dropsadow и посмотреть, является ли результат разумным.

Дополнительные ресурсы: здесь

w3c рабочий проект определения: здесь

1 голос
/ 31 августа 2010

Вы можете попробовать плагин для jQuery Drop Shadow .

Хотя он имеет некоторое снижение производительности и требует времени для нескольких элементов на более медленных клиентских компьютерах.Для сайта нашей компании я просто использовал маршрут CSS3, который явно не работал в IE, но в любом случае любой FF использует FF :).На многих больших сайтах, таких как IGN, используется такой же подход, что если клиент может поддерживать тени CSS3, то в остальном отличный сыр.

...