CSS3で作成 iPhone風 アイコン
2011.09.20
この記事は最終更新日から1年以上が経過しています。
CSS3で出来なかったことが色々と出来るようになりました。
今まで、webサイト制作の際、gifやjpgまたはpngの画像ファイルで表現していた部分も、
css3で記述する事によって、表現することが可能です。
え?そんな面倒くさいことしなくていいじゃん!
って思われがちですが、
PC等の様にスペックの高いデバイスなら問題ないのですが、
スマートフォン等のPC程スペックのないデバイスの時に
画像だと、容量が重くてページ読み込みの際に時間がかかり、ユーザーを待たせる結果となります。
小さい画像なら良いかもしれませんが、
こちら
スマフォンサイトで使えるCSS3 ボタン作成
にあるように、
このようなボタンの時(スマフォンで使用するにはちょっとでかいか?)
画像(gif)だと4KBですが、css3で作成すると、
な、なんと522B
で済むのです!!(半角1文字=1k計算)
だったら、css3で書いちゃおぉぉ〜て流れなのです。
では、今回はスマートフォンサイトらしく、
よく使うであろう、iPhone風のアイコンを作っちゃいましょう!
こういうやつ。では
【HTML】
<a href="#" class="icon"><span></span></a>
このアイコンはクリッカブルエリアな為、aタグでマークアップします。
要素が必要な為、a要素の子にspan要素を配置。
【CSS】
<br /> position: relative;<br /> display:block;<br /> width:24px;<br /> height:24px;<br /> border:#a7a7a7 1px solid;<br /> -webkit-border-radius:12px;<br /> -webkit-box-shadow:0px 2px 2px #a7a7a7;<br /> background:#fff;<br /> }<br />
aタグに指定する事で外枠を作成
CSS3の指定はborder-radiusとbox-shadowになります。
スマートフォンはモバイルsafari及びgoogoleブラウザなのでプレフィックスは
-webkit-となります。
中の赤い円はspanに指定。
.icon > span{<br /> display:block;<br /> content:"";<br /> position:absolute;<br /> top:2px;<br /> left:2px;<br /> width:20px;<br /> height:20px;<br /> -webkit-border-radius:10px;<br /> background:-webkit-gradient(linear, left top, left bottom, from(#d77077), color-stop(0.49, #ca414c), color-stop(0.5, #bd1522), to(#bd1522));<br /> }
ここでもborder-radiusを指定。2px小さい円の為、数値はaタグより2px小さいです。
backgroundはグラデーション指定。
くわしくはこちら
CSS3 グラデーション(gradient)の指定方法
それでは中の×マークを。
テキストで入力したいところですが、デバイス間のフォントサイズのずれをさけるため
cssで記述。
<br /> .icon > span:after{<br /> display:block;<br /> content:"";<br /> position:absolute;<br /> top:9px;<br /> left:3px;<br /> width:14px;<br /> height:2px;<br /> background:#fff;<br /> -webkit-transform:rotate(45deg);<br /> }
疑似要素(content:””;)をspanタグの前(.icon > span:after{)に作成。
width14px height2pxのラインをpositionで配置。
ここでtransformの出現!rotate(45deg)で45°傾けています。
<br /> .icon > span:before{<br /> display:block;<br /> content:"";<br /> position:absolute;<br /> top:9px;<br /> left:3px;<br /> width:14px;<br /> height:2px;<br /> background:#fff;<br /> -webkit-transform:rotate(-45deg);<br /> }
同じ様に疑似要素を今度は後ろ(span:before)に生成。
今度は−45°に傾けて完成です!
デモはこちらから!
(webkit(safari,Google Chrome)のブラウザのみの表示となります!)