Кроссбраузерная тень для 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 {<br />box-shadow: 0 0 5px blue;<br />}

Конечно же в старом 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
Текст комментария: # ×


Комментарии
Облако тегов
Интересное