Как оказалось, проблема отбрасывания тени не нова. Точнее сказать очень обширная. Очень большое количество решений есть в Интернете. В большинстве своем решение сводится к вырисовыванию тени заранее подготовленными изображениями, что для меня не совсем идеологически верное решение. На одном зарубежном блоге я нашел даже пример создания тени несколькими дивами. Выглядит это, словно, попали обратно в 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: 0 0 5px blue;

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

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

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