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
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 144
  • +16
    Круто получилось!
    • +3
      Спасибо!
      • +4
        Осталось сделать приложения на CCS3 :) предлагаю начать с калькулятора :)
        • +1
          у меня он тоже на первом месте в списке запланированных к реализации приложений ;)
          • 0
            • 0
              у этого калькулятора как-то с графикой не очень позитивно сложилось :D
              • 0
                Это да :) но там другая задача была)
            • +4
              эмм, а закончить CSS-OS?
              • +2
                Нет уж сначала пусть айфон до полного функционала доделают.
          • +11
            Маньяк :)
            • +1
              Есть немного:) Но как и говорил в топике — вызов есть вызов, да и интересно было кодить все это.
              • +1
                а теперь можете расслабиться и сделать тоже самое для WP7 :)
            • +1
              Что маньяк — это 100%! Но как улетно забацано!!! Просто лепота!
            • +7
              Автор знает толк.
            • +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
                      Ты реально крут, мен.
                    • +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
                                                  Замечательно! Есть к чему придраться, но работа проделана отличная.

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

                                                  А, да: из придирок одну-таки упомяну: на 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
                                                                                                        У меня 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

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