तस्वीरों के उपयोग के बिना CSS3 पर iPhone 4

प्रस्तावना

इंटरनेट में कुछ हफ़्ते पहले, मैंने एक चीज़ देखी जो वास्तव में मेरी दिलचस्पी थी - सीएसएस 3 पर आईओएस आइकन बिना चित्रों के पूरी तरह से। पहली चीज जो मैंने सोचा - "मैं वह भी कर सकता हूं!" और एक और 5 मिनट के बाद, उन्होंने स्पष्ट रूप से खुद के लिए फैसला किया - "चुनौती स्वीकार"। लेकिन अपने आप को नहीं दोहराने के लिए, मैंने कार्य को थोड़ा जटिल करने का फैसला किया - न केवल आइकन बनाने के लिए, बल्कि डिवाइस ही।

समस्या का बयान

इसलिए, उसी दिन, मैंने CSS3 पर iPhone4 को बिल्कुल बिना चित्रों, बेस 64, कैनवास या एसवीजी के बनाने का फैसला किया और कुछ और हाइलाइट - इंटरैक्टिव फीचर्स जोड़े:
- पर / बंद;
- चालू होने पर लॉक करें और वास्तविक iPhone की तरह अनलॉक करें;
- लॉक स्क्रीन पर पाठ को अनलॉक करने के लिए एनीमेशन "स्लाइड";

प्रयुक्त प्रौद्योगिकियाँ

CSS3

रोचक और आवश्यक CSS3 प्रौद्योगिकियां जिन्होंने ग्राफिक्स के बिना पूरी तस्वीर को रेखांकित किया है:
- सीमा-त्रिज्या डिवाइस के लगभग सभी घटक तत्वों के कोनों को गोल करने के लिए।
- तत्वों के बाहरी और आंतरिक दोनों छाया बनाने के लिए बॉक्स-छाया।
- बैकग्राउंड: लीनियर-ग्रेडिएंट और बैकग्राउंड: रेडियल-ग्रेडिएंट - आइकन्स और हाइलाइट्स के लिए ज्यादातर कलर फिल्स बनाते हैं।
- पृष्ठभूमि का आकार - संदेश और फोन आइकन के लिए एक धारीदार पृष्ठभूमि बनाने के लिए;
- परिवर्तन: घुमाएँ, तिरछा, पैमाने - आइकनों के कुछ घटकों को बदलना, सबसे आदर्श छवियों के समान बनाने के लिए;
- छद्म तत्वों के पहले और बाद में - HTML कोड को कम करने के लिए;
- - nth-child (n) - डायनामिक्स में nth एलिमेंट को सेलेक्ट करने के लिए और कुछ आइकॉन जैसे App Store और iTunes में लगभग 1 या दो प्रॉपर्टी में थोड़े अंतर के साथ एक ही इंटरनल एलिमेंट्स होते हैं।

jQuery + jQuery UI

इस तकनीक में, व्यावहारिक रूप से कुछ भी अद्वितीय नहीं था। चेतन का एक सेट ("अनलॉक करने के लिए स्लाइड" को एनिमेट करने के लिए कार्य करता है, माउस को जारी करने और लॉक करते समय लॉक पैनल को हटाने, अनलॉक करने पर स्लाइडर के लिए ड्रैग करने योग्य प्रभाव।
स्क्रिप्ट की लेखन शैली खुद को Html5BoilerPlate से विरासत में मिली है।

एचटीएमएल

HTML में, मैंने कस्टम टैग का उपयोग नहीं किया, हालाँकि यह अनुमति है, लेकिन बस ज्यादातर div, hr, b और सूचियों का उपयोग किया जाता है।

कोड के टुकड़े

HTML 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 के दिलचस्प भाग

(पूर्ण सीएसएस कोड उचित नहीं होगा, क्योंकि कोड की केवल 3395 लाइनें हैं)

माउस

सभी आइकन "आइकन" वर्ग के साथ कंटेनरों में संलग्न हैं, ताकि उन्हें आवश्यकतानुसार कोड में दर्द रहित रूप से पुनर्व्यवस्थित किया जा सके, और तुरंत एक छाया और नाम के साथ उन्हें एक फ्रेम में सेट किया जा सके।

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

प्रक्रिया अनलॉक करने के लिए स्लाइड को संसाधित करना

 $("#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; } }); 

क्या हुआ?

नतीजतन, पृष्ठ पूरी तरह से कई को प्रदर्शित करता है, लेकिन सभी नहीं, CSS3 की विशेषताएं। मेरे बहुत अफसोस की बात है, इस तरह के सभी कोड वेबसाइटों पर उपयोग नहीं किए जा सकते क्योंकि जटिल CSS3 (आइकन से बचना एनीमेशन ब्राउज़रों में बहुत धीमा है)।

क्रॉस-ब्राउज़र संगतता

काश, यह आइटम शायद सबसे दुखद होता है। CSS3 पर iPhone4 मैक ओएस एक्स के तहत सफारी और क्रोम वेबिट ब्राउज़र में ठीक काम करता है (विंडोज फोन आइकन को गलत तरीके से प्रदर्शित कर सकता है), और यह हाल के फ़ायरफ़ॉक्स और ओपेरा में भी सही ढंग से प्रदर्शित होता है। IOS उपकरणों के लिए, मुझे एनीमेशन को अनलॉक करने के लिए स्लाइड को बंद करना पड़ा, जिससे डिवाइस के ब्राउज़र में पृष्ठ धीमा हो गया। इंटरनेट एक्सप्लोरर के लिए - मैं उससे माफी मांगता हूं।

डेमो

पृष्ठ ही - CSS3 पर iPhone4
शैलियों - iphone.css
स्क्रिप्ट - iphone.js