iPhone 4 on CSS3 without using pictures

Foreword

A few weeks ago in the Internet, I saw a very interesting thing - iOS icons on CSS3 completely without pictures. The first thing I thought was “I can do that too”! And after another 5 minutes for myself clearly decided - “challenge accepted”. But in order not to repeat myself, I decided to complicate the task a bit - to make not only the icons, but also the device itself.

Formulation of the problem

So, on the same day I decided to make iPhone4 on CSS3 with absolutely no pictures, base64, canvas or SVG and add some more zest - interactive features:
- on / off;
- lock on and unlock as in a real iPhone;
- animation “slide to unlock” text on the lock screen;
')

Used technologies

CSS3

Interesting and necessary technologies CSS3, which depicted the whole picture without graphics:
- border-radius to round the corners of almost all the constituent elements of the device.
- box-shadow to create both external and internal shadows of elements.
- background: linear-gradient and background: radial-gradient — create most color fillings for icons and highlights.
- background-size - to create a striped background for the Message and Phone icons;
- transform: rotate, skew, scale — transform some component icons to create images that are as close to the ideal as possible;
- before and after pseudo-elements - to minimize HTML code;
-: nth-child (n) - for selecting the nth item in the dynamics and some icons such as the App Store and iTunes, which contain the same internal elements with a slight difference in about 1 or 2 properties.

jQuery + jQuery UI

Practically nothing unique was used from this technology. A set of animate () functions for animating “slide to unlock”, launching icons and disabling lock panels when unzipping, draggable effect for a slider when unlocking.
The writing style of the script itself is inherited from Html5BoilerPlate.

HTML

In HTML, I did not use custom tags, even though it is allowed, but simply used mostly divs, hr, b, and lists.

Chunks of code

IPhone html structure

<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 interesting parts

(The full CSS code would not be appropriate, since there are only 3395 lines of code)

Icons

All the icons are enclosed in containers with the class “icon”, so that they can be safely rearranged in code in need, and in order to give them a framing uniform style with a shadow and a name.

 .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; } 

since the icons are located on the matrix, it is convenient to position them in this simple way:

 .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; } 

for dock a slightly different positioning case:

 .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; } 

Those who are interested in the full code of icons - it is better to look at the source code on the page itself, because the code is very large.

jQuery interesting parts

As I already said, I took the script writing style from html5BoilerPlate. All settings, features and status of the iPhone are described in one object. The structure of the iphone object:

 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) } 

Processing the process "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; } }); 

What happened

As a result, the page perfectly demonstrates many, but not all possibilities of CSS3. Much to my regret, on websites, all such code cannot be used due to complex CSS3 (the animation of the launch of icons slows down in browsers).

Cross-browser compatibility

Alas, this point is probably the saddest. iPhone4 on CSS3 works fine in WebKit Safari and Chrome browsers under Mac OS X (in Windows, the Phone icon may not be displayed correctly), it is also correctly displayed in the latest Firefox and Opera. For iOS devices, it was necessary to turn off the “slide to unlock” animation, which slowed down the page very much in the device browser. As for Internet Explorer, I apologize to it.

Demo

the page itself - iPhone4 on CSS3
styles - iphone.css
script - iphone.js