Think Results.

ИГРА ТЕНЕЙ

Как CSS-тени создают новые миры

живое действо, то есть воркшоп

2

ЧТО МЫ СЕГОДНЯ ПРОЙДЕМ

■ Почему я не пользуюсь CSS-градиентами■ Как быстро управлять тенями■ Где пригодятся тени для блока■ Где пригодятся тени для текста■ Как рождается объемная кнопка■ Как рождается еще что-нибудь

3

■Мы, например, можем взять просто ссылку:

<a class="button" ref="#">Continue</a>

■ Она обычно выглядит так:

■ И сделать ее такой:

4

■ …с помощью такого кода:.button {

display: inline-block; margin: 60px; border: solid #7d7d7d; border-width: 1px 0; border-radius: 20px; color: #757575; padding: 0.3em 1em; background: #fff; box-shadow: 0 1px 2px #a0a0a0, 0 0 2px #a0a0a0 inset, 0 -30px 10px -18px #fff inset, 0 -19px 1px #dadada inset, 0 -19px 8px #ededed inset; font: 1.4em sans-serif; text-shadow: 0 1px 0 #fff; text-decoration: none; }

■ можете вживую посмотреть это здесь: jsfiddle.net/blaberus/efmBu/

5

■ А можем сделать как-то так:

■ …потому что тут вот такие тени:

box-shadow: 0 1px 1px #4f5b7c, 0 1px 0 #FFFFFF inset, 0 -1px 0 #28334e inset, 0 -100px 27px -100px #6A748C inset, 0 -119px 0 -100px #57627D inset, 0 40px 21px -30px #B3B7C4 inset;

■ а полностью все стили здесь:jsfiddle.net/blaberus/pZA3m/

6

■ …и много чего еще.

■ Например?

■ Обсудим.

7

Спасибо. Теперь спросите меня о чем-нибудь.