Кроссбраузерная тень для div

Кроссбраузерная тень для div

Вот недавно для одного своего сайта мне потребовалось реализовать тень для div-элемента. Вроде бы не сложная задача, которую, как оказалось, решить еще проще.

Во избежании изобретения нового велосипеда, перед тем как выдумывать что-то новое самому, я обратился к всемогущему Google, который поделился со мной мировым опытом по этой проблеме.

Как оказалось, проблема отбрасывания тени не нова. Точнее сказать очень обширная. Очень большое количество решений есть в Интернете. В большинстве своем решение сводится к вырисовыванию тени заранее подготовленными изображениями, что для меня не совсем идеологически верное решение. На одном зарубежном блоге я нашел даже пример создания тени несколькими дивами. Выглядит это, словно, попали обратно в 90 года.

Из всего многообразия найденного в Интернете, я нашел для себя одно решение, которое меня полностью удовлетворило, а именно использование CSS-параметра box-shadow. До этого я даже и не подозревал о его существовании, хотя уже на протяжении 3 лет занимаюсь версткой. Был прав тот умный человек, кто сказал: "Век живи – век учись".

Создание тени параметром box-shadow можно назвать кроссбраузерным, так как все последнии версии популярных браузеров умеют отрисовывать тень по его команде. Если Быть точным, то начиная с Firefox 4.0, Opera 10.50, Safari 5.0 и Google Chrome 9.0 этот css-параметр узнаваем. Даже Internet Explorer научился его понимать, правда он это делает с версии 9.0. Короче все браузеры, которые поддерживают CSS3, смогут обработать этот параметр. Более старые версии перечисленных браузеров или какие-то эксклюзивные браузеры, которые по каким-то причинам не поддерживают CSS3, просто не выведут тень. Больших проблем от использования этого параметра не будет.

Вот несколько примеров использования box-shadow:

box-shadow: 3px 3px black;
box-shadow: 0 0 5px black;
box-shadow: 0 0 5px 5px black;
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5);

Цвет тени может быть любой, к примеру синим:

box-shadow: 0 0 5px blue;

То есть если нужно для элемента div с классом box сделать синюю тень, как в последнем примере, то в вашем css-файле должен быть код:

.box {
box-shadow: 0 0 5px blue;
}

Конечно же в старом IE 6.0 это работать не будет, но если ориентироваться на эту старую версию браузера, то придется городить большее, чего лично мне не требовалось.

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

  1. Norrius опубликовал комментарий 28 Ноябрь 2011, 07:43 #

    Для отображения в старой Лисе можно использовать аналогичное свойство -moz-box-shadow, а для Хрома и Сафари есть -webkit-box-shadow
    Например:
    div.header {

    box-shadow: 0px 2px 7px rgba(0,0,0,0.5);

    -moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.5);

    -webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.5);

    }

    | Ответить
  2. Антон опубликовал комментарий 12 Ноябрь 2012, 14:10 #

    Блин зачем называть тень кроссбраузерной когда она не кроссбраузерная?

    | Ответить
    • itshaman опубликовал комментарий 13 Ноябрь 2012, 06:38 #

      Антон: Блин зачем называть тень кроссбраузерной когда она не кроссбраузерная?

      У меня она работает во всех браузерах

      | Ответить
      • sata опубликовал комментарий 29 Ноябрь 2012, 12:11 #

        Глупости! Где же кроссбраузерность, если работает только на css3?

        | Ответить
  3. Vadizar опубликовал комментарий 19 Ноябрь 2012, 19:26 #

    Спасибо!

    | Ответить
  4. wellsait опубликовал комментарий 22 Март 2013, 10:17 #

    До IE-10 тень не поддерживается

    | Ответить
    • Андрей Александрович опубликовал комментарий 27 Май 2013, 03:58 #

      Чушь! IE 9 поддерживает box-shodow. Ни когда не говори того, в чем не уверен.

      | Ответить
  5. Richard опубликовал комментарий 23 Июль 2013, 14:30 #

    В IE6 и IE7 точно не поддерживается box-shadow, поэтому я считаю что это решение не кроссбраузерное. Самый кроссбраузерный способ на сегодняшний день остается ручное создание тени посредством Photoshop и импортируя его в сайт через border. Но box-shadow лучше использовать, если ты не собираешься обращать внимания на поддержку старыми браузерами твоих проектов.

    | Ответить
  6. Saimon опубликовал комментарий 29 Март 2014, 03:31 #

    Richard опубликовал комментарий 23 Июль 2013, 17:30 – ВОТ ТЫ РАЧИНА )))))) Это’же в какой конторе ставят IE в качестве польз. браузеров? Умри в муках. или изучай html5 и наброски для html6 next, css3 и web в целом. Есть такое – “апгрейд софта”, и не один нормальный админ не допустит его устаревания на арм’ах. Делать кросс-платформы надо в угоду современным технологиям! – как для оптимизации к – (смарфонам, планшетам) так и для др. устройств. А сидеть как ты на лаже а’ля 2001г. с хрюшей в обнимку никто не будет. И не пудри людям своей безграмотностью – мозг.

    | Ответить
Имя
e-mail
Сайт
Текст комментария: