Предисловие
Несколько недель назад в просторах интернета я увидел очень заинтересовавшую меня вещь — 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
