Про CSS-тени. Доклад на Bit Byte 19 мая 2012 года. Результат же самого воркшопа тут: result.dabblet.com/gist/2731141

1. ИГРА ТЕНЕЙ
Как CSS-тени создают новые миры
живое действо, то есть воркшоп
Think Results.

2. ЧТО МЫ СЕГОДНЯ ПРОЙДЕМ
■ Почему я не пользуюсь CSS-градиентами
■ Как быстро управлять тенями
■ Где пригодятся тени для блока
■ Где пригодятся тени для текста
■ Как рождается объемная кнопка
■ Как рождается еще что-нибудь
2

3. ■ Мы, например, можем взять просто ссылку:
<a class="button" ref="#">Continue</a>
■ Она обычно выглядит так:
■ И сделать ее такой:
3

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/
4

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/
5

6. ■ …и много чего еще.
■ Например?
■ Обсудим.
6

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