超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

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

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

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

screenshot

table of contents

サンプル

サンプルです. マウスを乗せると影が強調され, クリックするとヘコむのが わかると思います.

up

Step 00 まずは基本となるマークアップとスタイルを!

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

Read More jsdo.it

step00

up

Step 01 要素をボタンスタイル化する mixins を定義しよう

次に, ボタンスタイルを簡単に適応できるように mixins を定義します. ここではまだ mixins は空なので見た目は変わりません.

Read More jsdo.it

step01

up

Step 02 空だと意味が無い! 引数のパラメータを適応させよう

やっと見た目が変わります! mixins に渡した値をプロパティに適応させていきます.

Read More jsdo.it

step02

up

Step 03 見た目をゴージャスに! 光沢を出そう

ここで一気に iPhone のボタンっぽくなります. 光沢を出すためのフィルターを mixins で作成し, ボタンに適応させていきます.

Read More jsdo.it

step03

up

Step 04 ブラッシュアップ! hover や action 時の変化

最後のブラッシュアップです! ホバー時の演出やクリック時のくぼみを表現します.

Read More jsdo.it

step04

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT