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
Метки:
Поделиться публикацией
Похожие публикации
Комментарии 144
  • +16
    Круто получилось!
    • +3
      Спасибо!
      • +4
        Осталось сделать приложения на CCS3 :) предлагаю начать с калькулятора :)
        • +1
          у меня он тоже на первом месте в списке запланированных к реализации приложений ;)
          • 0
            • 0
              у этого калькулятора как-то с графикой не очень позитивно сложилось :D
              • 0
                Это да :) но там другая задача была)
            • +4
              эмм, а закончить CSS-OS?
              • +2
                Нет уж сначала пусть айфон до полного функционала доделают.
          • +11
            Маньяк :)
            • +1
              Есть немного:) Но как и говорил в топике — вызов есть вызов, да и интересно было кодить все это.
              • +1
                а теперь можете расслабиться и сделать тоже самое для WP7 :)
                • 0
                  Пока еще его даже не видел, возможно в недалеком будующем реализую;)
                  • 0
                • +1
                  Что маньяк — это 100%! Но как улетно забацано!!! Просто лепота!
                • +7
                  Автор знает толк.
                  • 0
                    Спасибо!
                  • +13
                    mad skills detected!
                  • +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
                                Чтоб более кросбраузерно было. Анимация на 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
                                                                                                                      Безумно круто!
                                                                                                                      • 0
                                                                                                                        кому интересно вот статистика за месяц существования странички с iPhone 4 на CSS3 — http://tjrus.com/blog/iphone-4-in-css3-first-month-statistics
                                                                                                                        • 0
                                                                                                                          может не увидел, может кто-то уже написал, но тут есть маленькая недоработка, которая будет тормозить машину

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

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