「少しの手間で大きく変わる、細部にこだわったWebデザイン」をできるだけCSSでやってみた

css

【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス

を読んで、「CSSだけである程度できそうだな」と思ったのでやってみた。

デモページ

とりあえず完成品が見たい方は、ここ

まず基本となるHTMLを用意する

とりあえず、角丸四角形でボタンらしきものを作る。

<html>                                                                                                                                               
  <head>
    <style type="text/css">
       .buttonBase {
        position: relative;
        width: 300px;
        background-color: #3699D0;
        text-align: center;
        border-radius: 10px;
        cursor: pointer;
      }
      .caption {
        color: #02659C;
        font-family: impact;
        font-size: 40pt;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="buttonBase">
      <span class="caption">
        Download
      </span>
    </div>
  </body>
</html>

まず、この状態からスタートする。

グラデーションを加えてみる

以下のようにボタンの下地にグラデーションを追加してみる。Mozilla系とWebKit系書き方が異なるので書き分けている。background-color: を消しておかないとグラデーションが反映されないので注意。

      .buttonBase {
         :

        /* グラデーションを加える */
        /* background-color: #3699D0; */
        background: -moz-linear-gradient(top, #56B9F0, #3699D0); /* Mozilla系 */
        background: -webkit-gradient(linear, left top, left bottom, from(#56B9F0), to(#3699D0)); /* Webkit系 */
      }

グラデーションは控え目にしたほうがエレガントな雰囲気が出る。

参考

CSS3 グラデーション（gradient）の指定方法 | CSS Lecture

1pxのラインを加えてみる

ボタンのボーダーに1pxのラインを引いて。ボーダーの内側に box-shadow を使ってハイライトを加える。

      .buttonBase {
         :
        /* 1pxのラインを加える */
        border: 1px solid #02659C;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
                    inset 1px 0 0 rgba(255, 255, 255, 0.3),
                    inset -1px 0 0 rgba(255, 255, 255, 0.3),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
      }

ハイライトもあまりくっきりとしてると「わざとらしさ」が出るので、半透明にして自然な感じにする。上下だけでなく、左右にも気持ち少しだけハイライトを加えるのが隠し味となっている。

参考

CSS3 text-shadow box-shadow の使い方 | CSS Lecture

ボタンにドロップシャドウを加えてみる

:after 擬似要素を使って楕円形の影をボタンの下に加える。

      /* ドロップシャドウを加える */
      .buttonBase:after {
        content:"";
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 50%;
        border-radius: 100%;
        box-shadow: 0 0.3em 0.7em rgba(0, 0, 0, 0.5);
        z-index: -1;
      }

どうなっているのか分かりにくいかもしれないので、分かりやすくした画像を貼っておく。

このように、ボタンの裏側に楕円形があってそのドロップシャドウがボタンの端から覗いている感じになっている。

参考

CSS3 角丸を表現する border-radius | CSS Lecture

ノイズ...

さすがにCSSだけでノイズを生成することはできないので、パス。

レタープレス効果を加えてみる

最後の仕上げとして、ボタンのキャプションにレタープレス効果を加える。これだけでグッと見た目が引き立つ。

      .caption {
         :

        /* レタープレス効果を加える */
        text-shadow:  0 -1px 0 #000,
                      0 1px 0 rgba(255, 255, 255, 0.6),
                      1px 0 0 rgba(255, 255, 255, 0.3),
                      -1px 0 0 rgba(255, 255, 255, 0.3);
       }

「1pxのラインを加えてみる」と同様、左右にも少しハイライトを加えている。

参考

Create a Letterpress Effect with CSS Text-Shadow


これで完成。

最終的に出来上がったソースコードは以下のような感じ。

実際にどのように見えるかは、デモページで。

参考ページまとめ

最後に、参考となったページをまとめておく。

追記:2011/08/11

まさしく同じようなことをやっている方が...
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 | Ginpen.com
こちらの方は、「ノイズ」をPNGのアルファ値で表現しています。確かにその方法を使えばData-URIスキームでcss上で表現可能だったか...。