Сделано в CSS: Иконки iOS и другие…

Original author: Dion Almaer
  • Translation
image

Нравится ли вам мем «посмотрите на меня, делающего что-то крутое на чистом 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-градиентов также выставлены на обозрение.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 46

    +14
    хохо, FF 3.6.3:
      +4
      хохо, chrome 6.0.447.0
      i49.tinypic.com/2vhvcxs.jpg
        0
        дада, хром такое же выдал у меня, сафари нет, чтобы проверить, ставить лень. Опера последняя ~как FF показывает.
          0
          Сафари нормально показывает, интересно только, зачем автор написал, что «viewed best in safari 5 or google chrome».
            0
            Safari 5 для Windows, — всё показывает корректно.

            Chrome 6 dev и IE9pp3 — хреново…
          0
          Особенно актуально вместе с «Viewed best in Safari 5 or Google Chrome.»
            +1
            Chrome 5.0.375.86, все супер.
            0
            Fx 3,7a7pre — тот же результат (
              +5
              Да чего еще можно ожидать, когда в цэ-эс-эсе один -webkit-*…
              Странно, что в хроме не показывает.
                0
                Точно, успокоили!
              0
              Масштабируются они тоже прикольно.
              +1
              Занятие интересное, но как граф дизайнер скажу, что пока далеко от всеобщего распространения. Ьем более ест понятие избыточность трудозатрат — когда выгоднее сделать проще (при условии. что не падает качесвто). Какой смысл делать масштабируемость иконки если нам зарание известо разрешение на котором она будет использоваться?
              Но в целом — автор таких иконок молодец.
                +6
                Cэр Альберт — граммар-пацифист?
                • UFO just landed and posted this here
                    0
                    сейчас уже можно автоматом вектор в SVG перегонять, который замечательно всеми [кроме IE] кушается. Потом научатся SVG оптимизировать, чтобы кривых поменьше.
                    0
                      0
                        –1
                        Странно, а зачем ссылку на скриншот минусовали?)
                        0
                        раз уж он использует вебкитовские фичи, то почему бы не воспользоваться svg? у него и со скоростью получше и с качеством и с интероперабельностью
                          +2
                          Льюис Харбо не любит IE, и IE не любит Льюиса Харбо…
                            –2
                            Льюис Харбо использует только «-webkit-»-свойства. Стало быть, он не любит и IE, и Firefox, и Opera, и SeaMonkey, и Fennec, и так далее, и так далее.
                              0
                              Да, уже заметил, эт я по привычке решил в любимом браузере проверить…
                            +2
                            Зато любит извращения :)
                              0
                              Вот чтоб это всё да в IE… вот это было бы извращение..:)
                              +12
                              Графика на CSS? — и эти люди запрещают мне верстать таблицами? :)
                                –7
                                А что в графике на CSS ненормального? Через год вполне используемо будет.
                                • UFO just landed and posted this here
                                  +1
                                  Речь исключительно о том, что для решения задачи используется не тот инструмент. И используется только для того, чтобы показать, что «это возможно», а «возможно» вовсе не означает «практично».
                                +1
                                «Голова представляет собой прямоугольник с закругленными углами, а затем еще один прямоугольник для шеи и искаженный полукруг для тела. Для того, чтобы получить кривую от плеч к шее, я разместил два круга в верхней части иконки.»

                                Огоо, а мсье знает толк в извращениях.
                                  +2
                                  И еще у него весь текст на сайте с тенью…
                                    +1
                                    Это просто отпад челюсти… великолепно! Хотелось бы посмотреть на первый векторный редактор с экспортом в CSS3.
                                      +11
                                      Нравится ли Вам мем «посмотрите на меня, делающего что-то крутое на чистом CSS»? Это доставляет.

                                      У вас лурчанка.
                                        0
                                        Почитайте оригинал. Думаю, перевод как раз к месту.
                                        0
                                        Не удивлюсь если скоро появятся Иллюстратор под CSS3 )
                                          +2
                                          У Вас в тексте случилась типичная ошибка: местоимение «вы» с заглавной буквы пишется исключительно при личном обращении к конкретному человеку (например как в данном предложении). Во всех остальных случаях надо писать с маленькой буквы.

                                          Спасибо.
                                            0
                                            Спасибо, поправлю.
                                            +2
                                            Ничего не работает — гавно.
                                              –1
                                              Опять дрочеры, не умеющие открыть фотошоп и одним кликом запустить Action на тысяче иконок.
                                                +1
                                                Чуваки переизобретают SVG, пепец… А ведь SVG давным-давно в W3C утверждён… И главное — даже на айфонах работает!
                                                  0
                                                  А в IE6 на этой странице можно увидеть секретный план: dl.dropbox.com/u/1647792/IOS-CSS-icons-in-IE6.png

                                                  Only users with full accounts can post comments. Log in, please.