まえがき
数週間前、インターネットで、私が本当に興味を持っているものを見ました-CSS3上のiOSアイコンは写真なしで完全に。 私が最初に考えたのは、「私もできることです！」 そしてさらに5分後、彼は明確に「挑戦を受け入れた」と自分自身で決定しました。 しかし、自分自身を繰り返さないために、タスクを少し複雑にすることにしました-アイコンだけでなく、デバイス自体も作ります。
問題の声明
そのため、同じ日に、私はCSS3でiPhone4を写真、base64、キャンバス、またはSVGなしで作成し、さらにハイライトを追加することにしました-インタラクティブ機能：
-オン/オフ;
-オンにするとロックされ、実際のiPhoneのようにロックが解除されます。
-アニメーションは、ロック画面上のテキストを「スライドさせてロック解除」します。
使用技術
CSS3
グラフィックスなしで全体像を概説した、興味深く必要なCSS3テクノロジー：
-デバイスのほぼすべての構成要素の角を丸くする境界線半径。
-要素の外部シャドウと内部シャドウの両方を作成するためのボックスシャドウ。
-背景：線形グラデーションと背景：放射状グラデーション-アイコンとハイライトのほとんどのカラーフィルを作成します。
-background-size-メッセージと電話のアイコンに縞模様の背景を作成します。
-変換：回転、傾斜、拡大縮小-アイコンのコンポーネントの一部を変換して、理想的な画像に最も類似したものを作成します。
-擬似要素の前後-HTMLコードを最小化するため。
-：nth-child（n）-ダイナミクスのn番目の要素と、同じ内部要素を含むApp StoreやiTunesのようないくつかのアイコンを選択します。1つまたは2つのプロパティがわずかに異なります。
jQuery + jQuery UI
この技術のうち、実際にはユニークなものは何も使用されていませんでした。 animate（）関数のセットは、「スライドしてロックを解除する」、分解するときにアイコンをリリースする、ロックパネルを取り外す、ロックを解除するときにスライダーをドラッグできる効果をアニメーション化します。
スクリプト自体の記述スタイルは、Html5BoilerPlateから継承されます。
HTML
HTMLでは、カスタムタグを使用しませんでしたが、これは許可されていますが、単にdiv、hr、b、およびlistを使用するだけです。
コードの断片
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行のコードしかないため、完全なCSSコードは適切ではありません）
アイコン
すべてのアイコンは、「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のすべての設定、機能、およびステータスは、1つのオブジェクトで説明されます。 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のためにWebサイトで使用できません（ブラウザーではアイコンエスケープのアニメーションが非常に遅い）。
ブラウザー間の互換性
悲しいかな、このアイテムはおそらく最も悲しいでしょう。 CSS3上のiPhone4は、Mac OS XのSafariおよびChrome WebKitブラウザーで正常に動作し（Windowsは電話アイコンを誤って表示する場合があります）、最近のFirefoxおよびOperaでも正しく表示されます。 iOSデバイスの場合、スライドをオフにしてアニメーションのロックを解除する必要がありました。これにより、デバイスのブラウザーのページが大幅に遅くなりました。 Internet Explorerについては-彼に謝罪します。
デモ
ページ自体-CSS3上のiPhone4
スタイル-iphone.css
スクリプト-iphone.js