first line software, Константин Оснос
DESCRIPTION
Презентация с технической секции #BitByte - фестиваля профессионального развития, который прошел 19 мая в Санкт-Петербурге. Константин Оснос, Разработчик интерфейсов компании First Line Software: «Игра теней. Как CSS3-тени создают новые миры».TRANSCRIPT
Think Results.
ИГРА ТЕНЕЙ
Как CSS-тени создают новые миры
живое действо, то есть воркшоп
ЧТО МЫ СЕГОДНЯ ПРОЙДЕМ
■ Почему я не пользуюсь CSS-градиентами■ Как быстро управлять тенями■ Где пригодятся тени для блока■ Где пригодятся тени для текста■ Как рождается объемная кнопка■ Как рождается еще что-нибудь
2
■Мы, например, можем взять просто ссылку:
<a class="button" ref="#">Continue</a>
■ Она обычно выглядит так:
■ И сделать ее такой:
3
■ …с помощью такого кода:.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
■ А можем сделать как-то так:
■ …потому что тут вот такие тени:
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
Спасибо. Теперь спросите меня о чем-нибудь.
7