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

元ネタはこちら：

細部にこだわったWebデザインって？

ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。

グラデーションを加える
1pxのラインを加える
シャドウを加える
ノイズを加える
レタープレス効果

元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ（ような）事をCSS3でやってみました。

デモ

先に完成品です。WebkitとFirefoxのみ。（IEでは、新しいものでも背景がちゃんと出ません。）

「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript, HTML5 and CSS

元のボタン

元ネタと同じように、ダウンロードボタンを用意します。

<span>Download</span>

span {
    background-color: rgb(54,153,203);
    border-style: none;
    border-radius: 10px;
    color: rgb(3,102,157);
    cursor: pointer;
    font-family: Impact, sans-serif;
    font-size: 64pt;
    font-weight: bold;
    padding: 10px 40px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

角丸にはborder-radiusを用いています。これもちょっとしたひと手間ですよね。

さてさて、順次「ひと手間」を加えてゆきましょう。

グラデーションを加える

背景色のグラデーションはgradient()を用いて実現できます。数値の設定は結構手間なので、ジェネレーターを使うと良いでしょう。

Ultimate CSS Gradient Generator – ColorZilla.com

ではコードです。

span {
    ...

    background-image:
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(25%, rgb(147,202,233)),
            color-stop(75%, rgb(54,153,203))
        );
    background-image:
        -moz-linear-gradient(
            center top,
            rgb(147,202,233) 25%,
            rgb(54,153,203) 75%
        );
}

シャドウを加える

ちょいと順序が前後しますが、先にこちら。box-shadowを使います。

普通に指定すると矩形と同じサイズになってしまうのですが、元ネタに近づけるため、影を絞ります。それには一般には省略されがちな第四の数値を与えます。

span {
    ...

    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);
}

元ネタでは影が円形になっていますけど、それと同じにするのはちょっと面倒なんで、これくらいで勘弁してください。

box-shadowについてはこちらが詳しい：

CSS3でドロップシャドウを作る『box-shadow』プロパティのまとめ｜MONODEZ

1pxのラインを加える

これも同じくbox-shadowの応用で実現します。複数の枠線を指定するbox-linesプロパティも検討されているのですが、まだ不完全ですので……。

box-shadowの値にinsetというキーワードを含めておくと、影が矩形の外ではなく内側に表示されます。一般には凹んだ状態の矩形を表現するのに用いられますが、今回はそれをぼかさずに利用する事で、枠線の内側にもう一本の線を描画します。

なおbox-shadowは既に使用しているので、プロパティではなく値だけを複数書く必要があるという点にご注意ください。プロパティを複数書いた場合は最後だけが有効になってしまうので。

span {
    ...

    border: 1px solid #669;
    box-shadow:
        1px 1px 0 rgba(255,255,255,.5) inset,
        0 15px 10px -10px rgba(0, 0, 0, 0.5);
}

だいぶくっきりしますね。

ノイズを加える

これはさすがにCSSだけではできません！　が、やりようはあります。

透過PNGを使います。アルファ値をノイズ上にして、背景にかぶせれば、そのように見ます。

RGB slider + base64のノイズ透過PNG画像 – jsdo.it – Share JavaScript, HTML5 and CSS

また画像はData URIに変換する事で、HTMLやCSSに埋め込む事ができます。さらにCSS3では複数の背景画像を設置できるようになりましたので、それも使います。

なおData URIを全部書くと大変な事になるので、下記コードでは省略しています。

span {
    ...

    background-image:
        url("data:image/png;base64,..."),
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(25%, rgb(147,202,233)),
            color-stop(75%, rgb(54,153,203))
        );
    background-image:
        url("data:image/png;base64,..."),
        -moz-linear-gradient(
            center top,
            rgb(147,202,233) 25%,
            rgb(54,153,203) 75%
        );
}

レタープレス効果

これも影ですが、box-shadowではなくtext-shadowというものを使います。

左上の「陰」と右下の「陽」の二つの影を指定します。

span {
    ...

    span {
        text-shadow:
            1px 1px 1px rgba(255,255,255,.3),
            -1px -1px 1px rgba(0,0,0,.3);
    }

これでおしまいです。

完成！

どうでしょう、それなりに見えませんか？

Photoshopで作ったもの（下記掲載。元記事より）と比べても、同じではありませんが、負けていないと思います。

まとめ

以下のプロパティや機能を使いました。

ちょっと量は多いですが、個別に見て行けばCSS3絡みでよく言及されているものばかりです。臆せず触ってみてくださいな。

あっ

同じ事を既にやっておられる方が……。 orz

「少しの手間で大きく変わる、細部にこだわったWebデザイン」をできるだけCSSでやってみた – 今日もスミマセン。

こちらの方は影が円形になってますね。:after疑似要素を使っています。