Темная сторона луны. Пример №1. Zurb-эксперименты с тенями на CSS

Тени — это клево. Все началось с Photoshop. В нем тени создавались с помощью картинок на заднем плане. Сейчас все проще, тени можно создавать с помощью CSS. Действительно, можно задать вашему элементу любое количество теней.

Box-shadow и text-shadow позволяют создавать нам такие интересные вещи, которых даже тенями не назовешь. Ключом к пониманию работы CSS теней и их использования являются статьи-эксперименты. И так первая ласточка — Темная сторона луны(!) на CSS...

Примечание: Пример хорошо работает в браузерах Safari 4.x и Chrome. Firefox... не очень.)))

И так, первый пример является воссозданием обложки альбома Dark Side of the Moon («Темная сторона Луны») известной группы Pink Floyd.

Сама реализация может и выглядит не практично, зато вы можете использовать что-то подобное в своих элементах дизайна.

Любой цвет, что вам нравится

На примере мы использовали единичный элемент <div id="rainbow">, чтобы показать элемент радуги.

Интересная возможность появилась в CSS3. Теперь, для одного элемента можно назначать до 999 теней. Круто?

Чтобы создать радугу, мы использовали 100 теней. В коде-примере мы показали только первые 10 теней, хотя каждая линия радуги состоит из 20 теней.

Не останавливайтесь на этом!

Вы можете использовать -webkit-transform или -moz-transform чтобы поворачивать новую CSS радугу и устанавливать ее, как вам нужно.

HTML

И CSS веселье начинается!

Принцип понятен?