Нравится ли вам мем «посмотрите на меня, делающего что-то крутое на чистом CSS»? Это доставляет. С одной стороны, такие мемы показывают, насколько невероятные вещи могут создать люди, но с другой стороны… они напоминают, что нам нужны инструменты, чтобы сделать нашу жизнь проще. Но, по крайней мере, платформа уже здесь, и инструменты могут появиться позднее.
Льюис Харбо отметил свою покупку iPhone 4 созданием набора иконок iOS на чистом CSS. Теперь мы можем посмотреть на его работу, и автор рассказывает о идеях, лежащих за реализацией:
В иконке «Контакты» я использовал 5 различных фигур для значка силуэта. Голова представляет собой прямоугольник с закругленными углами, а затем еще один прямоугольник для шеи и искаженный полукруг для тела. Для того, чтобы получить кривую от плеч к шее, я разместил два круга в верхней части иконки.
Иконка «Погода» имеет несколько лучей света, испускаемых из Солнца. Каждый из этих лучей на самом деле длинный прямоугольник с градиентом, который превращается в прозрачность на обоих концах. Я употребил -webkit-transform:rotate, чтобы повернуть каждый прямоугольник на различный угол. Тот же эффект был использован для иконки iTunes.
Чтобы получить значок облака на иконке iDisk, я использовал два круга, наложенных друг на друга, поверх прямоугольника с закругленными углами. Более широкий круг имеет градиент, который обрезает часть прямоугольника.
Взгляните на полный пример типа Календаря:
.calendar {
background: #9B2424;
}
.calendar .header {
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEC4C4), to(#521B1C), color-stop(.92,#da3434),color-stop(.1,#ef9fa5));
height: 50px;
width: 176px;
-webkit-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.4);
}
.calendar p.weekday {
color: #fff;
font-weight: bold;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
width: 176px;
line-height: 50px;
font-size: 25px;
text-align: center;
}
.calendar p.daynumber {
color: #000;
font-weight: bold;
text-shadow: 0px 1px 0px #fff;
width: 176px;
line-height: 126px;
font-size: 130px;
text-align: center;
}
.calendar .paper {
-webkit-border-bottom-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#EDEDED), color-stop(.05,#BFBFBF),color-stop(.2,#E3E3E3));
height: 126px;
width: 176px;
}Великолепно. Одно замечательное преимущество такого подхода — это масштабируемость. Пользователи iPhone 4 уже говорили о том, насколько мерзко выглядят приложения, которые рассчитаны на низкое разрешение. Даже приложения Facebook… текст выглядит замечательно, но иконки словно составлены из блоков.
Кстати, некоторые другие великолепные примеры CSS-градиентов также выставлены на обозрение.
