CSS / CSS3 and LESS で作る iPhone ボタン – Step 04 ブラッシュアップ! hover や action 時の変化

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

Pocket

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

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

screenshot

table of contents

サンプル & コード

サンプルです.

CSS(LESS) コード

// #! less 

/*
 * library
 */
#tm {
  
  .user-select(@value) {
    -webkit-user-select: @value;
       -moz-user-select: @value;
         -o-user-select: @value;
        -ms-user-select: @value;
            user-select: @value;
  }
  
  .transition(@value) {
    -webkit-transition: @value;
       -moz-transition: @value;
         -o-transition: @value;
        -ms-transition: @value;
            transition: @value;
  }
  
  .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);
    
    // その他
    .transition(100ms);
    .user-select(none);
    cursor: pointer;
    
    // 擬似クラス
    &:hover {
      box-shadow:
        inset 0px 1px 4px 0px #fff,
        1px 2px 4px 0px #222;
    }
    
    &:active {
      box-shadow:
        inset 0px 1px 2px 1px #444;
    }
  }
  
}

/*
 * 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

解説

擬似クラスを使って hover, action 時の演出をしよう

LESS では下記のように &{擬似クラス}とすることで 簡単に擬似クラスを指定することができます.

    // 擬似クラス
    &:hover {
      box-shadow:
        inset 0px 1px 4px 0px #fff,
        1px 2px 4px 0px #222;
    }
    
    &:active {
      box-shadow:
        inset 0px 1px 2px 1px #444;
    }

今回は hover 時に外と中にかけて box-shadow を指定して少しだけ フワッとなる演出を設定しています.

active 時は凹んだ感じになるよう box-shadow に inset のみを指定しています.

また cursor プロパティに pointer を指定することで マウスを載せた時にカーソルの表示が切り替わるように設定しています.

CSS3 の transition を使ってアニメーションさせよう

このブログではお馴染みですね.

transition プロパティを使うことでプロパティの変化をスムーズアニメーションさせることができます.

注意点としては, transition プロパティにはベンダープレフィックスが必要です. mixins 化してさくっと指定できるようにしておきましょう.

  .transition(@value) {
    -webkit-transition: @value;
       -moz-transition: @value;
         -o-transition: @value;
        -ms-transition: @value;
            transition: @value;
  }

これを下記のように .button の中で指定します.

    .transition(100ms);

CSS3 の user-select を使って選択不可にしよう

ボタンの場合テキストを選択させる必要がないことがほとんどだと思います. 選択できてしまうと連続でクリックした時に無駄に選択になってしまうので むしろ邪魔だったりします.

CSS3 からは user-select という便利なプロパティが追加されています. user-select プロパティに none を指定することで選択不可にすることができます.

user-select にはベンダープレフィックスを付ける必要があるので, mixins 化してさくっと指定できるようにしておきましょう.

  .user-select(@value) {
    -webkit-user-select: @value;
       -moz-user-select: @value;
         -o-user-select: @value;
        -ms-user-select: @value;
            user-select: @value;
  }

これを .button mixins に下記のように指定します.

    .user-select(none);

up

はい, これで完成です. CSS3 や LESS の便利さ, 実際に作っていくことの楽しさを感じて頂けたら幸いです.

TRACK BACK URL

POST COMMENT

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

COMMENT