Пользователь
0,0
рейтинг
27 декабря 2011 в 01:39

Разработка → iPhone 4 на CSS3 без использования картинок из песочницы


Предисловие


Несколько недель назад в просторах интернета я увидел очень заинтересовавшую меня вещь — iOS иконки на CSS3 полностью без картинок. Первое что подумал — «Я тоже так могу»! А спустя еще 5 минут для себя четко решил — «challenge accepted». Но чтоб не повторяться я решил немножко усложнить задачу — сделать не только иконки, но и сам девайс.

Постановка задачи



Итак, в тот-же день я решил сделать iPhone4 на CSS3 абсолютно без картинок, base64, canvas или SVG и добавить еще некоторую изюминку — интерактивные возможности:
— включение/выключение;
— блокировка при включении и разблокировка как в реальном iPhone;
— анимация «slide to unlock» текста на экране блокировки;



Используемые технологии



CSS3

Интересные и необходимые технологии CSS3, которые и обрисовали всю картину без графики:
— border-radius для скругления уголков практически всех составляющих элементов устройства.
— box-shadow для создания как внешних так и внутренних теней элементов.
— background: linear-gradient и background: radial-gradient — создание большинства цветных заливок иконок и бликов.
— background-size — для создания полосатого фона у иконок Message и Phone;
— transform: rotate, skew, scale — трансформирование некоторых составляющих иконок, для создания максимально схожих к идеалу картинок;
— before и after псевдоэлементы — для минимизации HTML кода;
— :nth-child(n) — для выборки n-го элемента в динамике и некоторых иконках типа App Store и iTunes, содержащих одинаковые внутренние элементы c небольшим отличием примерно в 1-м или двух свойствах.

jQuery + jQuery UI

Из этой технологии не использовалось практически ничего уникального. Набор animate() функции для анимации «slide to unlock», вылета иконок и убирания панелей блокировки при разблорировке, draggable эффекта для слайдера при разблокировке.
Стиль написания самого скрипта унаследован у Html5BoilerPlate.

HTML

В HTML я не стал использовать кастомные теги, хоть это и позволено, а просто использовал в основном div, hr, b, и списки.

Куски кода


HTML cтруктура iPhone

<div class="iphone">

     <div class="iphone_light_gradient"></div> <!-- блик на iPhone -->
    
     <div class="iphone_power_button" id="iphone_power_button"></div> <!-- кнопка вкл./выкл. -->
    
     <div class="iphone_voice_toogle"></div> <!-- переключатель на беззвучный режим -->
    
     <div class="iphone_voice_plus"></div> <!-- кнопка "+" -->
     <div class="iphone_voice_minus"></div> <!-- кнопка "-" -->

     <div class="iphone_camera"></div> <!-- фронтальная камера -->

     <div class="iphone_dynamic"><span></span><!-- куча span для точек на динамике --><span></span></div> <!-- динамик -->
    
     <div class="iphone_black_bg"></div> <!-- черная подложка передней части устройства -->

     <div class="iphone_display" > <!-- сам дисплей со всеми внутренностями -->

          <div class="iphone_headline" id="iphone_headline"> <!-- верхная черная полоса экрана -->
               <div class="iphone_net"></div> <!-- Индикатор сети -->
               <div class="iphone_net_title">tjrus</div> <!-- Имя сети -->
               <div class="iphone_wi-fi"><div class="hack"></div></div> <!-- Индикатор wi-fi -->
               <div class="iphone_clock" id="iphone_headline_clock">00:00</div> <!-- часы -->
               <div class="iphone_lock"></div> <!-- замок -->
               <div class="iphone_battery"></div> <!-- индикатор батареи  -->
          </div>
         
          <div class="iphone_header" id="iphone_lock_header"> <!-- верхняя панель заблокированного экрана -->
               <div class="iphone_time" id="iphone_lock_time">0<span>:</span>00</div> <!-- часы -->
               <div class="iphone_date" id="iphone_lock_date"></div> <!-- дата -->
          </div>
         
          <div class="iphone_footer" id="iphone_lock_footer"> <!-- нижняя часть заблокированного экрана -->
               <div class="iphone_unlock" id="iphone_unlock"> <!-- область "slide to unlock" -->
                    <div class="iphone_slider" id="iphone_slider"></div> <!-- слайдер (ползунок) -->
                    <div class="iphone_slide2unlock" id="iphone_slide2unlock">slide to unlock</div> 
               </div>
          </div>
         
         
          <div class="iphone_icons_containter" id="iphone_icons_containter"> <!-- контейнер иконок -->
               <div class="icon"></div> <!-- пример контейнера иконки ( их таких 16-ть подряд) -->
          </div>
         
          <div class="iphone_dock" id="iphone_dock"> <!-- док -->
               <div class="icon"></div> <!-- пример контейнера иконки ( их в доке 4 штучки ) -->
          </div>
         
     </div>

     <div class="iphone_home" id="iphone_home_button"></div> <!-- кнопка "домой" ("home button") -->

</div>


CSS3 интересные части

(Полный CSS код приводить было бы не уместно, так как там всего-то 3395 строчки кода)

Иконки

Все иконки заключаются в контейнеры с классом «icon», дабы их можно было безболезненно переставлять местами в коде по надобности и чтоб задать сразу им обрамительный единый стиль с тенью и названием.

.icon {
     width: 56px;
     height: 56px;
     border-radius: 10px;
     box-shadow: rgba(0,0,0,0.5) 0 1px 2px;
     margin-bottom: 30px;
     position: absolute;
}

.icon span { /* содержит название иконки */
     display: block;
     text-align: center;
     font: bold 11px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     color: #fff;
     text-shadow: rgba(0,0,0,0.3) 1px 2px 1px;
     text-transform: capitalize;
     position: absolute;
     top: 58px;
     left: -10px;
     width: 76px;
}


так как иконки у нас располагаются по матрице, то их удобно позиционировать таким вот простым способом:

.icon:nth-child(4n + 1) { left:17px; }
.icon:nth-child(4n + 2) { left:92px; }
.icon:nth-child(4n + 3) { left:168px; }
.icon:nth-child(4n + 4) { left:243px; }

.icon:nth-child(-n + 16) { top: 258px; }
.icon:nth-child(-n + 12) { top: 172px; }
.icon:nth-child(-n + 8) { top: 86px; }
.icon:nth-child(-n + 4) { top: 0; }


для дока немного другой случай позиционирования:

.iphone_dock .icon:nth-child(1) { margin-left:7px; margin-right: 19px; }
.iphone_dock .icon:nth-child(2) { margin-right: 20px; }
.iphone_dock .icon:nth-child(3) { margin-right: 19px; }


Тем кому интересен полный код иконок — его лучше смотреть в исходном коде на самой странице, ибо код очень велик.

jQuery интересные части

Как я уже и говорил — взял стиль написания скрипта у html5BoilerPlate. Все настройки, возможности и состояния iPhone описаны в одном объекте. Структура объекта iphone:

iphone = {
    
     slide_started           : false, // начался ли слайд разблокировки
     letter_animate_time      : 50, // время анимации буквы
     panels_animate_time     : 400, // время анимации исчезновения панелей при разблокировке
     status                : 'lock',     // текущий статус устройства. Возможные статусы: "lock", "unlock", "off"
     iconsDefaultPosition     : {}, // содержит значения позиции иконок при разблокированном iPhone
     iconsOutPosition          : {}, // содержит значения позиции иконок при заблокированном iPhone

     init : function(){}, // инициализация онкликов, слайдов, перечсета позиции иконок, начала анимации текста

     endSlide : function(){}, // функция обработки окончания слайда при разблокировке

     turnOn : function(){}, // включение iPhone
    
     turnOff : function(){}, // выключение iPhone
    
     lock : function(){}, // блокирование iPhone
    
     unlock : function(){}, // разблокировка iPhone

     showIcons : function(){}, // анимация показа оконок при разблокировке

     hideIcons : function(){}, // уход иконок за экран без анимации

     animateHideIcons : function(){}, // анимацая ухода иконок за экран

     prepareIcons : function(){}, // функция собирает дефолтные значения положения иконок, и устанавливает их за экран в заблокированный режим

     timeUpdate : function(){}, // обновление время устройства на заблокированном экране, в верхней линии и иконке
    
     stopTextAnimate : function(){}, // остановка текстовой анимации
    
     startTextAnimate : function(){}, // старт текстовой анимации
    
     prepareTextAnimate : function () {}, // подготовка текста "slide to unlock" к анимации
    
     animateLetters : function() {}, // запуск цикла анимации букв в "slide to unlock"

     ua : function() {}, // функция определения типа браузера (user agent)
}


Обработка процесса «Slide to unlock»

$("#iphone_slider").draggable({
     containment: 'parent',
     axis: 'x',
     start: function(event, ui) {
          $(document).mousemove(function(){                   
               if(iphone.slide_started){
                    var left = $("#iphone_slider").css('left').substring(0, $("#iphone_slider").css('left').length - 2);
                    var width = $('#iphone_unlock').width() - $('#iphone_slider').width();
                    var opacity_k = (width - left*3) / (width);
                    $('#iphone_slide2unlock').css({'opacity': opacity_k}, TIME/2); // делаем текст прозрачнее по мере процесса слайда ползунка
               }
          });
     },
     stop: function(event, ui){
          $(document).unbind('mousemove');
     }
});
              
$("#iphone_slider").mousedown(function(){
     iphone.slide_started = true;
});
              
$(document).mouseup(function(){
     if (iphone.slide_started){
          iphone.endSlide(); // в этой функции определяем достаточно ли дотянули мы слайдер для того чтоб разблокировать, или же возвращаем слайдер в исходную позицию.
          iphone.slide_started = false;
     }
});


Что получилось


В результате страница отлично демонстрирует многие, но далеко не все возмoжности CSS3. К большому моему сожалению на веб-сайтах весь такой код использовать нельзя из-за сложного CSS3 (анимация вылета иконок сильно тормозит в браузерах).

Кроссбраузерность


Увы этот пункт наверное самый печальный. iPhone4 на CSS3 отлично работает в WebKit браузерах Safari и Chrome под Mac OS X (в Windows возможно неправильное отображение иконки Phone), так же правильно отображается в последних Firefox и Opera. Для iOS устройств пришлоcь выключить анимацию «slide to unlock», которая очень сильно замедляла страницу в браузере устройства. Что касается Internet Explorer — приношу ему свои извинения.

Демо


сама страница — iPhone4 на CSS3
стили — iphone.css
скрипт — iphone.js
Vasiliy Zubach @TjRus
карма
59,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (144)

  • +16
    Круто получилось!
    • +3
      Спасибо!
      • +4
        Осталось сделать приложения на CCS3 :) предлагаю начать с калькулятора :)
        • +1
          у меня он тоже на первом месте в списке запланированных к реализации приложений ;)
        • 0
          Уже есть :) habrahabr.ru/blogs/css/131507/
          • 0
            у этого калькулятора как-то с графикой не очень позитивно сложилось :D
            • 0
              Это да :) но там другая задача была)
        • +4
          эмм, а закончить CSS-OS?
        • +2
          Нет уж сначала пусть айфон до полного функционала доделают.
  • +11
    Маньяк :)
    • +1
      Есть немного:) Но как и говорил в топике — вызов есть вызов, да и интересно было кодить все это.
      • +1
        а теперь можете расслабиться и сделать тоже самое для WP7 :)
        • 0
          Пока еще его даже не видел, возможно в недалеком будующем реализую;)
        • 0
    • +1
      Что маньяк — это 100%! Но как улетно забацано!!! Просто лепота!
  • +7
    Автор знает толк.
    • 0
      Спасибо!
  • +13
    mad skills detected!
    • +1
      Yeah ;)
  • +5
    Nokia 3310 слабо? :-)
    • +1
      Нокия 3310 на css3 это моветон.
      • 0
        Да его надо верстать таблицами, как минимум.
        • 0
          для солидарности с антиквариатом 3310 ?:)
          • 0
            Конечно, кто что поддерживает, того на том и рисуем. А стоп, хотя Nokia 3310 не поддерживает таблиц :(
            • 0
              а что она вообще поддерживает?) монохромные кубики?:)
              • 0
                Нууу, там есть змейка. Значит для нокии 3310 особым шиком должно считаться, играя в змейку выложить ей контуры самого телефона, с экраном и кнопками.
    • +9
      После иконок этого iPhone уже ничего не слабо :D
      • 0
        Я думал вы пошутили…
        Зашел, разблокировал iPhone…
        OMG… Шок…
        • +3
          Эх, все сначала думают что я шучу, но source не шутит и все ставит на свои места;)
    • 0
      Только после того, как на самой 3310 это можно будет просмотреть )
  • 0
    Можно вместо резюме высылать
    • +2
      Ну, это уже что-то типа визитной карточки
  • +3
    Ты реально крут, мен.
    • 0
      Спасибо;)
  • +8
    можете прикинуть сколько времени ушло на работу?
    • +1
      Полторы недели по 2 часа после работы и два выходных. И чем дальше тем быстрее работалось. Последние иконки уже на уровне автоматизма пошли (правда их уже и надоедало делать под конец:))
      • 0
        ну ты крут))
  • 0
    а почему аннимации средствами джс, а не цсс?
    • 0
      Чтоб более кросбраузерно было. Анимация на jQuery казалось лучшим вариантом.
      + при дальнейшей доработке думаю удобнее будет использовать именно скриптовую анимацию.
      • 0
        можно сделать фолбек для старых браузеров. А вот цсс-аннимация (с гпу-акселерацией) теоретически могла бы решить проблему с тормозами на ios.
        • 0
          Неплохой вариант, реализую при первой же возможности! Спасибо!:)
  • +7
    Кто-то должен был это сделать:
    • +4
      Internet Explorer — я же перед ним извинился;)
      вообще есть желание добавить вендорные свойства и для IE, но пока боюсь;)
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          спасибо!)
          ну, да, под 9-й можно еще подогнать, согласен — исправлюсь.
          касательно символа — о нем я забыл и сделал просто буквой :)
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              ахаха:) спасибо на добром слове
      • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      шестой?
      • 0
        думаю 9-й или 8-й:)
    • +11
      Windows Phone 7?
      • +1
        судя по цвету это уже Windows 8
    • 0
      У меня в ие6 адовее вышло:
      • +3
        Он самоуничтожился:)
    • +3
      Это он в WP7 трансформировался
  • 0
    Blackberry (6.0) напрягся и нарисовал. Жутко тормозит, но чего можно ожидать от iPhone на устройстве конкурента )))
    • 0
      этот iPhone и на самом iPhone работает не ахты быстро) все из-за огромного количества CSS3 теней, градиентов, скейлов и поворотов
  • 0
    Под Android в Opera Mobile — всё отлично, в дефолтном браузере — печалька, прям как в скрине выше.
    • 0
      Это я не к тому, что оно нужно) Просто для информации. За работу — уважуха. Надо будет посмотреть код, интересно как всё это сделано :)
      • 0
        спасибо) на самом деле деле очень интерестно как это все дело работает в разных браузерах, так-что если есть возможность сделать скрины — кидайте мне на мыло!)
        • 0
          Есть — отправил скрины :)
          • 0
            Спасибо, завтра отпишусь мылом:)
    • 0
      а у меня на htc наоборот- в опере рисует квадрат, а дифолтный браузер отрисовывает все норм. правда с красным фоном. Но самое забавное что после загрузки дифолтный браузер редиректит страничку на главную htc, не из-за слова iphone в адресе ли? ;)
      • 0
        А опера мобайл или мини? Я в мобайле пробовал. Дефолтный тоже никуда не редиректил)
        • 0
          Опера мини. Сейчас еще раз проверил, не редиректит. Но я уверен, что мне не показалось)
          • 0
            Ну мини она на то и мини) Зачем она вообще вам? В мобайл так же есть турбо (когда ужимается трафик), куча плюшек и много всего поддерживается.
  • 0
    iPhone на iPhone :)
    Подлагивает конечно знатно.

    • 0
      да, есть такое, но увы, поправить скорость рендера такого CSS3 врятле получится
    • +1
      Картинки что-то не вставились. Попробую ссылками.
      Посмотреть на Яндекс.Фотках
      Посмотреть на Яндекс.Фотках
      • 0
        Для картинок нужно больше К. Используй предпросмотр, Люк.
        • +1
          Об этом не писали :)
          Могли бы скрыть те теги, которые я не могу использовать, когда жмешь на ссылку «можно использовать html-теги». А так вводят заблуждение меня :) Говорят, что теги использовать можно и я их использую, а то что они не пашут — это не я виноват :)
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Мсье знает толк.
    • 0
      Мсье благодарит Вас, Мсье ;)
  • +2
    Суров. Очень суров.
    • +1
      Хех, спасибо :)
  • +1
    Замечательно! Есть к чему придраться, но работа проделана отличная.

    Было бы интересно почитать побольше подробностей про реализацию: наверняка же встретились разные особенности в применении трансформов и градиентов? Подобные примеры позволяют очень хорошо изучить всяческие грабли и подводные камни, об этом вполне можно написать серию статей :)

    А, да: из придирок одну-таки упомяну: на js тут надо было сделать только тянущийся слайдер, а вот все остальные состояния было бы круто сделать тоже чисто на CSS, на :target или на :checked.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +3
        Да, со слайдом «честно» мало что можно сделать )

        Я быстренько, на основе вашего варианта сделал аналог на ховере: dabblet.com/gist/1522751 — особо его не прорабатывал, но идея должна быть понятна :)

        (фф/вебкиты ок)
        • 0
          Круто! я даже и не думал по началу такое делать, а сейчас вот можно попробовать реализовать все на CSS! Спасибо, товарищи!)
        • 0
          clip2net.com/s/1r38g — это еще нужно постараться заметить, а навести вообще никак

          PS но дабблет нериально крут )
          • 0
            Да, там иногда бывают проблемы из-за реализации тулбара. Но в любом случае переместил блок чуть ниже, чтобы он никогда не перекрывался тулбаром.
        • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Спасибо:)

      да, на самом деле у каждой иконки фактически своя история! а описывать все в этой статье (3395 строк кода css) не особо правильно:) потому наверное оставлю либо на потом, либо соберу еще самое интересное еще на статью:)

      придирка стоит свеч, найду время и постараюсь реализовать:) еще раз спасибо!
  • 0
    Офигеть, в шоке. Просто круто.
  • +2
    в хромиуме 15.0.874.106 (Сборка для разработчиков 107270 Linux) Ubuntu 11.10

    • +2
      Оу, да, там юзается символ которого у вас в системе нету. Замечание учтено и поставлено в задачах на исправление ;)
      Спасибо.
  • +1
    Идея не нова. Еще на одном из Субботников Яндекса показывали тоже вариант верстки айфона с иконками.
    Но за монстрячество плюс! У меня бы терпения не хватило напечатать >3k строк css ради развлекухи)
    • 0
      Да, знаю что не нова, но все эти варианты как-то показались не реалистичными и не так похожыми на реальный iPhone. Да и иконки у этого не такие красочные и заморочливые.
      Спасибо. У меня к завершению на последние иконки тоже терпения не хватало, но хорошо что добил таки)
    • 0
      Кстати, версия TjRusа без проблем работает в Opera 11.6, а вот этот вариант не работает. В Хроме отрисовывается нормально, но это же не так круто!
  • –5
    Зачем?
    • +4
      1. Вызов самому себе;
      2. Это казалось очень хорошей демкой CSS3 возможностей (хоть и далеко не всех).
      • 0
        Не пойми привратно, создать такое действительно очень круто, просто вызов самому себе нужен только тебе, а о таких возможностях CSS3 все и так знают. Я не против таких забав, но было бы круто увидеть что-то реально новое, полезное для применения на различных проектах.
        К примеру чашка чая Вадима Макеева по сравнению с этим выглядит довольно скудно, но для своего времени это было нечто потрясающе. Сейчас подобного рода вещи, расцениваются мной как просто забава.
        Безусловно, что кто-то обязательно увидит нечто полезное для себя в этом посте. Здесь и выше исключительно моё личное мнение.
        • +2
          Понима, но у вас разве не бывало таких случаев в жизни, что глядя на чью-то работу вам хочется сделать что-то подобное, или вы понимаете что какая-нибудь идея что засела в голове таки стоит свеч и что ее не стоит откладывать. Я не думал стоит это сделать или нет. Мне просто хотелось это сделать.
          • –2
            Конечно бывало. Повторюсь, в интернете идея рисования средствами CSS3 раскрыта полностью. Лично я не вижу ничего нового либо побуждающего к созданию нового. Это как рисование в пейнте или картины в эксле. Круто, но не более того.
  • 0
    Вашу бы энергию, да в мирное русло =)
    • 0
      Так iPhone довольно таки мирное существо;)
  • 0
    Фантастика!
  • +5
    А вы не из Челябинска случаем? О.о
    • +1
      Нет, киевский я:)
      • +2
        Киевские, как я погляжу, тоже суровы :)
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      эм, если эпл скоро не пришлет повестку в суд, то нет (я надеюсь что нет) :)
      • 0
        Патентуй реализацию :)
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      если и да, то уж точно не на CSS! хотя растровую графику на CSS рисовать не сложно, только не знаю пока как с этим браузер справится:)
  • 0
    Офигенно. По исходникам буду изучать CSS3 на практике :) Всегда мечтал, чтобы красивые сайты были без картинок.
    • 0
      да, сейчас весь UI красиво можно делать без использования картинок, только всякие красивости для визуального оформления пока еще их требуют.
      • +1
        ага, только не впадайте в крайности — там где можно сделать картинку на 5кб — не надо городить скриптов (ведь памяти для css браузер будет жрать больше чем чем для хранения битмапа).
  • 0
    Шикарно!
    Мне бросали на него ссылку в твиттере пару дней назад, впечатлило.
    • 0
      Спасибо!
      Я его в инет выложил 19-го декабра в 1:13 ночи по киевскому. Он почему-то больше всего китайский контингент заинтересовал — 50% трафа до вчерашнего дня. Сегодня хабр исправляет сей процент:)
      • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Скоро индусы подтянутся, гаранитрую!
  • 0
    Браво
  • 0
    Интересно теперь посмотреть на это используя это habrahabr.ru/blogs/webdev/135336/ )
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Браво!
  • 0
    Не удержался добавил в избранное
  • 0
    Какой проект следующий? :)
    • 0
      Пока это секрет:)
      • 0
        Я думаю iPad будет следующим.
        • 0
          увы нет, iPad будет несколькими месяцами позже, пока есть проектик покруче;)
          • 0
            по круче чем iPad? Вы знаете, почему-то, кроме iPad 2 и адронного коллайдера, круче iPad ничего в голову не приходит.
  • 0
    Пара идей по улучшениям.
    Анимацию иконок при разблокировке можно сделать через transition + transform: translate(), как то так:
    .icon
    {

    transform: translate(-100px, -100px); /* для каждой иконки будет свое смещение*/
    transition: translate 1s .25s; /* подберете сами */
    }
    .phone_on .icon
    {
    transform: translate(0px, 0px); /* для всех иконок будет будет нулевое смещение */
    }
    Анимация должна получиться более плавная.
    Так же в этом случае можно не использовать position: absolute, а использовать float (меньше кода для позиционирования).
    Насчет анимации slide to unlock: для webkit можно попробовать сделать как здесь trentwalton.com/bgclip/
  • +1
    Автор — брутальный css3 маньяк и большой молодец ^_^
    ps нужно попробовать сделать калькулятор или metro ui на html5.
  • 0
    супер, только пменяйте «iPhone4 on pure CSS3!» на «iPhone4 in pure CSS3!», так правильнее
    • 0
      Исправил. Спасибо!
  • 0
    А хабраэффект на сайте состоялся? :)
    • 0
      за сегодня уже «28 214 Посещения» и «27 361 Уникальные посетители»
  • 0
    ждите иск от Эпл :D
    • 0
      Надеюсь до этого не дойдет :)
  • 0
    С утра после прочтения поста не покидало чувство невыполненного долга, спать хочется — ужасно, но не смог заснуть не разместив ссылки на это:
    вот: demo.tutorialzine.com/2011/10/ios-homescreen-coffeescript/
    и вот: iphone.hohli.com/
    для завершенности картины мастера =)
    Круто!
  • 0
    Это очень, очень здорово! Респект!
    • 0
      Спасибо!)
  • 0
    У меня AppStore не открывается(
    • 0
      было бы удивительно если бы он таки открылся:D
      там пока нет функционала для работы приложений
  • –1
    Ждите иска за иконку youtube
    • 0
      не думаю, что после самсунга эплу будет интересно меня тролить:)
      • 0
        • +1
          эм, я думаю иконка не так страшна как iPhone, они ведь его тоже запатентовали:D
  • 0
    Безумно круто!
  • 0
    кому интересно вот статистика за месяц существования странички с iPhone 4 на CSS3 — http://tjrus.com/blog/iphone-4-in-css3-first-month-statistics
  • 0
    может не увидел, может кто-то уже написал, но тут есть маленькая недоработка, которая будет тормозить машину

    у тебя в открытой менюшке, когда #iphone_slide2unlock принимает opacity: -1.19273 все еще работает и каждый span крутит opacity

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.