CSS / CSS3 and LESS で作る iPhone ボタン – Step 03 見た目をゴージャスに! 光沢を出そう
『超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 03.
前回は .button
mixins に渡した値をプロパティに適応させていきました.
この Step では CSS3 をバリバリ使って一気に iPhone のボタンっぽくしていきます.
光沢を出すためのフィルターを mixins で作成し, ボタンに適応させていきます.
table of contents
サンプル & コード
サンプルです.
CSS(LESS) コード
// #! less /* * library */ #tm { .gloss-filter(@color) { background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; background: -o-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; background: linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; } .gloss-filter(white) { .gloss-filter(darken(white, 20%)); } /* * #tm .button * @param {color} @color テキストの色 * @param {color} @bg-color 背景色 * @param {size} @width 幅 * @param {size} @height 高さ */ .button(@color, @bg-color, @width, @height) { // ボックス width: @width; height: @height; border: 1px solid #aaa; background-color: @bg-color; // テキスト color: @color; text-align: center; line-height: @height; font-size: @height*0.5; // 見た目のブラッシュアップ border-radius: 5px; text-shadow: 1px 1px 2px #aaa; box-shadow: inset 0px 1px 4px 0px #fff, 1px 2px 1px 0px #444; .gloss-filter(@bg-color); } } /* * main */ body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; } h1 { font-size: 16px; } div[class|=button] { //float: left; margin: 10px; } @button-width: 128px; @button-height: 32px; .button-red { #tm .button(white, hsl(0, 80%, 50%), @button-width, @button-height); } .button-yellow { #tm .button(black, hsl(60, 80%, 50%), @button-width, @button-height); } .button-green { #tm .button(white, hsl(120, 80%, 50%), @button-width, @button-height); } .button-cyan { #tm .button(white, hsl(180, 80%, 50%), @button-width, @button-height); } .button-blue { #tm .button(white, hsl(240, 80%, 50%), @button-width, @button-height); } .button-purple { #tm .button(white, hsl(300, 80%, 50%), @button-width, @button-height); } .button-white { #tm .button(black, white, @button-width, @button-height); } .button-black { #tm .button(white, black, @button-width, @button-height); }
解説
background プロパティにグラデーションを掛けて光沢を表現
あまり知られていませんが background-color
プロパティにはカンマ区切りで複数の画像, もしくは色を指定して重ねることができます.
今回はこの機能を利用して, ベースとなるカラーとその上に半透明のフィルタを重ねて光沢を表現しています.
background: 色もしくは画像1, 色もしくは画像2, 色もしくは画像3;
先に指定した値から上に重ねて表示されていきます. これを CSS3 のグラデーションと, 通常の色指定とで重ねることで光沢のあるボタンを表現しています.
また, mixins 化しているので, 簡単に色を変更することができます.
.gloss-filter(@color) { background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; background: -o-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; background: linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 51%, rgba(255, 255, 255, 0.2) 100%), @color; }
この mixis を .button クラス内部で background
に指定することで
光沢が適応されて表示されます.
.gloss-filter(@bg-color);
mixins の引数パターンマッチを使って白での光沢
上で光沢の仕組みについて解説しましたが, ここで一つ問題があります. それは光沢用のグラデーションが白い半透明のフィルタだということです. このままだと白いボタンの時に光沢が見えなくなってしまいます.
なので今回は mixins の引数パターンマッチを活用して 白い色を指定したときのみ別の mixins に飛ぶようにしています.
プログラミングでいう関数オーバーロードの仕組みですね.
.gloss-filter(white) { .gloss-filter(darken(white, 20%)); }
白を指定したときのみ, LESS の darken
color function を使って白を少し暗くしています.
これで白を指定した場合でも光沢のあるボタンを表現することができます.
CSS3 の border-radius やら box-shadow やら text-shadow やら
このサイトではお馴染みのプロパティ達です. 何度も解説していますが, ここでも少し解説しておきます.
border-radius
は角丸を表現する際に指定します.
px 指定もしくは % 指定するこが可能です.
border-radius: 5px;
box-shadow
は名前の通りボックス要素に影を設定することができるプロパティです.
下記のようにカンマ区切りで複数指定することが可能です.
box-shadow: inset 0px 1px 4px 0px #fff, 1px 2px 1px 0px #444;
text-shadow
はテキストに対して影を指定できるプロパティです.
こちらもカンマ指定で複数指定することができますが今回はひとつしか指定していません.
text-shadow: 1px 1px 2px #aaa;
これで見た目はほぼ完成です. 次回で最後の step! 次回は, hover 時や active 時の挙動や連続でクリックした際に選択状態にならないようにしたりと 細かい設定を行います.
[…] Step 03 見た目をゴージャスに! 光沢を出そう […]
[…] 次回はボタンにグラデーションフィルタを掛けて一気に iPhone っぽいボタンにしていきます. […]
[…] 前回は CSS3 を使って光沢を付けたり角丸にしたりと見た目を派手にする方法について学びました. 今回は最後のブラッシュアップです! ホバー時の演出やクリック時のくぼみを表現します […]