CSS / CSS3 and LESS で作る iPhone ボタン – Step 04 ブラッシュアップ! hover や action 時の変化
『超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 04.
前回は CSS3 を使って光沢を付けたり角丸にしたりと見た目を派手にする方法について学びました. 今回は最後のブラッシュアップです! ホバー時の演出やクリック時のくぼみを表現します.
『超簡単♪ 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 は空なので見た目は変わりません.