『超簡単♪ 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);
}

up

解説

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;

up

これで見た目はほぼ完成です. 次回で最後の step! 次回は, hover 時や active 時の挙動や連続でクリックした際に選択状態にならないようにしたりと 細かい設定を行います.