First Line Software, Константин Оснос
-
Upload
eyevseyeva -
Category
Technology
-
view
1.169 -
download
2
description
Transcript of First Line Software, Константин Оснос
![Page 1: First Line Software, Константин Оснос](https://reader035.fdocument.pub/reader035/viewer/2022062514/557ef75ad8b42aa30a8b4ede/html5/thumbnails/1.jpg)
Think Results.
ИГРА ТЕНЕЙ
Как CSS-тени создают новые миры
живое действо, то есть воркшоп
![Page 2: First Line Software, Константин Оснос](https://reader035.fdocument.pub/reader035/viewer/2022062514/557ef75ad8b42aa30a8b4ede/html5/thumbnails/2.jpg)
ЧТО МЫ СЕГОДНЯ ПРОЙДЕМ
■ Почему я не пользуюсь CSS-градиентами■ Как быстро управлять тенями■ Где пригодятся тени для блока■ Где пригодятся тени для текста■ Как рождается объемная кнопка■ Как рождается еще что-нибудь
2
![Page 3: First Line Software, Константин Оснос](https://reader035.fdocument.pub/reader035/viewer/2022062514/557ef75ad8b42aa30a8b4ede/html5/thumbnails/3.jpg)
■Мы, например, можем взять просто ссылку:
<a class="button" ref="#">Continue</a>
■ Она обычно выглядит так:
■ И сделать ее такой:
3
![Page 4: First Line Software, Константин Оснос](https://reader035.fdocument.pub/reader035/viewer/2022062514/557ef75ad8b42aa30a8b4ede/html5/thumbnails/4.jpg)
■ …с помощью такого кода:.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
![Page 5: First Line Software, Константин Оснос](https://reader035.fdocument.pub/reader035/viewer/2022062514/557ef75ad8b42aa30a8b4ede/html5/thumbnails/5.jpg)
■ А можем сделать как-то так:
■ …потому что тут вот такие тени:
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
![Page 6: First Line Software, Константин Оснос](https://reader035.fdocument.pub/reader035/viewer/2022062514/557ef75ad8b42aa30a8b4ede/html5/thumbnails/6.jpg)
■ …и много чего еще.
■ Например?
■ Обсудим.
6
![Page 7: First Line Software, Константин Оснос](https://reader035.fdocument.pub/reader035/viewer/2022062514/557ef75ad8b42aa30a8b4ede/html5/thumbnails/7.jpg)
Спасибо. Теперь спросите меня о чем-нибудь.
7