Немного пятничной радости на CSS3

Вот решил принести немного пятничной радости, продемонстрировать силу CSS3 и поднять настроение тем, у кого Internet Explorer. Смотреть тут.

Ну а если интересно — как я это сделал, то…

Дрессируем box-shadow

Разработчики W3C сделали box-shadow очень гибким свойством. Благодаря этому, можно получать весьма весьма интересные результаты, если использовать это свойство нетривиальным образом. В этой статье я напишу о некоторых эффектах, которые мне удалось получить при помощи «теневых технологий».

Пока я составлял примеры, я неожиданно обнаружил, что браузеры отображают их совсем неодинаково. В итоге, помимо простой демонстрации возможностей box-shadow, получился еще и маленький браузерный тест на поддержку CSS 3. Все примеры снабжены CSS-кодом и картинкой (общий объем всех PNG: 161 КБ). В статье я не стал прописывать свойства с вендорными префиксами -moz- и -webkit-, чтобы не ухудшать читабельность. В суммарной странице со всеми примерами эти префиксы есть (предупреждаю, что у Оперы есть баг с прорисовкой внешних box-shadow при прокрутке).