Тени — это клево. Все началось с 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
1 2 |
/* All you need is one element to style. */ <div id="rainbow"> </div> |
И CSS веселье начинается!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
div.rainbow { width: 500px height: 500px -webkit-border-radius: 30px -moz-border-radius: 30px /* Экшн */ -webkit-box-shadow: 1px -1px #b2492c, 2px -2px #b2492c, 3px -3px #b2492c, 4px -4px #b2492c, 5px -5px #b2492c, 6px -6px #b2492c, 7px -7px #b2492c, 8px -8px #b2492c, 9px -9px #b2492c, 10px -10px #b2492c, ... 11px -11px #b2492c, ... 21px -21px #ea5f24, ... 31px -31px #ea5f24, ... 41px -41px #f8c617, ... 51px -51px #f8c617, ... 61px -61px #068e8c, ... 71px -71px #068e8c, ... 81px -81px #0bc3b8, ... 91px -91px #0bc3b8, ... 100px -100px #0bc3b8; -moz-box-shadow: 1px -1px #b2492c, ... 100px -100px #0bc3b8; } |
Принцип понятен?