『超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 04.

前回は CSS3 を使って光沢を付けたり角丸にしたりと見た目を派手にする方法について学びました. 今回は最後のブラッシュアップです! ホバー時の演出やクリック時のくぼみを表現します.

『超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 03.

前回は .button mixins に渡した値をプロパティに適応させていきました. この Step では CSS3 をバリバリ使って一気に iPhone のボタンっぽくしていきます. 光沢を出すためのフィルターを mixins で作成し, ボタンに適応させていきます.

『超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 02.

前回は ボタンスタイルを簡単に適応できるように中身が空の .button mixins を定義しました. 今回やっと見た目が変わります! mixins に渡した値をプロパティに適応させていきます.

『超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 01.

前回は, ベースとなるマークアップとスタイルを書きました. このStepでは ボタンスタイルを簡単に適応できるように mixins を定義します. ここではまだ mixins は空なので見た目は変わりません.

『超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 00.

まずは, ベースとなるマークアップとスタイルを書きましょう!

CSS / CSS3 と LESS を使って iPhone っぽいボタンを作る方法を 紹介します.

LESS の機能をフル活用しつつ CSS3 をふんだんに散りばめてみました. いつも通りすべて jsdo.it で作成しているので簡単に実行, 確認, fork して修正なんてことができます.

Step by Step で学べるように細かく分けたので, 実際に作りながら読んで頂けると幸いです.