作ってみたもの

まずはデモから。当たり前ですが、box-shadowに対応していないブラウザでは動きません。

• DEMO on JS Bin

JS Bin

感想

作って動かしてみた率直な感想を申し上げると…そもそもこういう用途を想定していないと思うので、当然あまり捗りませんでした。 が、描かれる物の雰囲気は、これはこれで嫌いではないです。水墨画的な物が描けそう。

重さが加速する

Webkitはかなり軽快に動くのですが、Firefoxだとかなりもっさりした動きになります。IE9だとまだマシです。 そして、書けば書くほど重くなっていきます。 box-shadowを一点ずつどんどん重ねていっているわけですから、そりゃ当然重くなりますよね。

線を引きにくい

基本的にブラシで点描を繰り返している様な物なので、あまりはやく描こうとすると途切れて線になりません。 そういうブラシだと思うしかないでしょう。 間を補完するような感じに描画しようかとも思いましたが、むしろ味が損なわれる感じがしたので途中でやめました。

ライブラリ

書いてみたライブラリがこちら。別にやってる事はどうということはないです。 使い道は多分ないと思うのですが、使ってみたい方はお好きにお使いください。

ShadowCanvas : Drawing illustration with css box-shadow — Gist

/**
 * ShadowCanvas
 *
 * Drawing illustration with css box-shadow
 *
 * @version 0.9
 * @author mach3ss
 * @require jQuery
 */
var ShadowCanvas = function(selector, option){

    // config
    this.option = $.extend({}, this.option, option);
    this.node = $.extend({}, this.node);

    // nodes
    this.node.container = $(selector);
    this.node.canvas = $("<div>")
    .css({position:"absolute"})
    .appendTo(this.node.container);

    // events
    this.node.container
    .on("mousemove", $.proxy(this._onMouseMove, this))
    .on("mousedown", $.proxy(this.start, this))
    .on("mouseleave mouseup", $.proxy(this.stop, this));
};
(function(fn){

    fn.boxShadowText = "{x}px {y}px {blur}px {size}px {color}";
    fn.drawing = false;

    fn.node = {
        container : null,
        canvas : null
    };

    fn.option = {
        color: "black",
        blur : 5,
        size : 5
    };

    /**
     * Configure option or get the option value
     *
     * @param String key
     * @param Mixed value (optional)
     * @return Mixed
     */
    fn.config = function(key, value){
        if(this.option.hasOwnProperty(key)){
            if(typeof(value) !== "undefined"){
                this.option[key] = value;
                return this;
            } else {
                return this.option[key];
            }
        }
    };

    /**
     * Get css text for box-shadow
     *
     * @param Integer x
     * @param Integer y
     * @return String
     */
    fn._getBoxShadowText = function(x, y){
        var o, callback;
        o = this.option;
        o.x = x;
        o.y = y;
        callback = function(a, b){
            return o[b];
        };
        return this.boxShadowText.replace((/\{(\w+)\}/g), callback);
    };

    /**
     * Draw the point with box-shadow
     *
     * @param Integer x
     * @param Integer y
     * @return self
     */
    fn.draw = function(x, y){
        var shadow = this.node.canvas.css("boxShadow");
        shadow = shadow === "none" ? "" : "," + shadow ;
        shadow = this._getBoxShadowText(x, y) + shadow;
        this.node.canvas.css("boxShadow", shadow);
        return this;
    };


    /**
     * Start drawing
     *
     * @return self
     */
    fn.start = function(){
        this.drawing = true;
        return this;
    };

    /**
     * Stop drawing
     *
     * @return self
     */
    fn.stop = function(){
        this.drawing = false;
        return this;
    };

    fn._onMouseMove = function(e){
        var offset, x, y;

        if(! this.drawing){
            return;
        }

        offset = this.node.container.offset();
        x = e.clientX - offset.left + document.body.scrollLeft;
        y = e.clientY - offset.top + document.body.scrollTop;
        if(x < this.node.container.width() && y < this.node.container.height()){
            this.draw(x, y);
        }
    };

    /**
     * Clear all on canvas
     *
     * @return self
     */
    fn.clear = function(){
        this.node.canvas.css("boxShadow", "none");
        return this;
    };

    /**
     * Get css text of the illustration on canvas now
     *
     * @return String
     */
    fn.getCSS = function(){
        return this.node.canvas.css("boxShadow");
    };

}(ShadowCanvas.prototype));

使い方は、キャンバスにしたいボックス要素のセレクターを引数にしてnewするだけです。 各設定はconfigで。

var myCanvas = new ShadowCanvas("#my-canvas");
myCanvas.config("color", "black");
myCanvas.config("size", 8);
myCanvas.config("blur", 10);

まとめ

表現力は結構ありそうですが、実用的なアプリかと問われると…

cf) CSS3のbox-shadowだけで作られたモナリザ・・・ – かちびと.net

作るもの

• マウスオーバーすると、ふわーっと表示が切り替わるボタン。
• 画像を二枚重ね、上の画像の透明度を変化させて表示を切り替える。

こういったUIにあたるエフェクトは好みが別れる気がしますが、
個人的にはリッチな感じがして結構好きです。

HTML

<div id="demo" class="fadeButton">
    <a href="#">FadeButton</a>
</div>

基本となるCSS

#demo {
    display: block;
    width: 135px;
    height: 135px;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(default.png);
}

#demo a {
    display: block;
    width: 135px;
    height: 135px;
    text-indent: -9999px;
    overflow: hidden;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(hover.png);
}

まずはCSS3のTransitionsで

Transitionsを使うと恐ろしく簡単なコードで実現できちゃいます。

.fadeButton a {
    opacity: 0;
    -webkit-transition: opacity .5s linear;
}

.fadeButton a:hover {
    opacity: 1;
    -webkit-transition: opacity .5s linear;
}

ね、簡単でしょう？（ボブ

が、現在はまだサポートしているブラウザは少ないので、
サポート外のブラウザについてはJavaScriptに頼らざるを得ません。

Transition非対応の環境の為のJavaScriptを用意する

Transition非対応のブラウザ用に、JavaScriptによるフォールバックを用意します。
判別には先日紹介した「head.js」を使用。

CSSの:hoverスタイルを上書き

非対応の場合の:hoverスタイルを無効にしておきます。
Transitions非対応な場合は、head.jsが
“no-csstransitions”をhtml要素のclassに追加してくれるので
こんな感じで。

.no-csstransitions .fadeButton a:hover{
    opacity:0;
}

JavaScriptでフェードイン/アウトさせる

jQueryを使った次のようなコードで、
大体似たようなエフェクトを付加させられます。

(function ($) {
    if (!head.transitions) { // head.jsでTransitions対応を判別
        $(".fadeButton").each(function () {
            var self = $(this);
            self.bind({
                mouseover: function (e) {
                    self.children("a").stop().animate({
                        opacity: 1
                    }, 500);
                },
                mouseout: function (e) {
                    self.children("a").stop().animate({
                        opacity: 0
                    }, 500);
                }
            });
        });
    }
})(jQuery);

デモ＆ファイナルコード

JS/CSSでふわりとフェードするボタンをつくる – jsdo.it – Share JavaScript, HTML5 and CSS

注意！

IEで透過PNGを使ってフェードしようとすると不具合が生じるので注意。
DD_belatedPNG等を使って回避する必要があります。
» IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog

© まっは画伯

どんなスタイルにすると「押しごたえ」が生まれる？

• へこんだデザインにする
• 位置を下げる
• ちょっと暗くしてみる

あたりで「押しごたえ」が出るのではないでしょうか。
（ざっくばらん）

基本は「:active」で

:hoverがマウスオーバー時のスタイルならば、
ボタンを押下した時のスタイルは:activeで記述します。

こちらは一例。
（IEだと残念な見栄えになります）

• DEMO:1 ( jsFiddle )

HTML

<a href="#" class="button">BUTTON</a>

CSS

.button {
    display:inline-block;
    padding:5px 10px;
    background-color:#69c;
    color:#fff;
    border:1px solid #69c;
    text-decoration:none;
    font-size:13px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
.button:hover{
    background-color:#79acdf;
    -webkit-box-shadow:inset 0px 0px 3px #fff;
    -moz-box-shadow:inset 0px 0px 3px #fff;
    box-shadow:inset 0px 0px 3px #fff;
}
.button:active{
    padding-top:6px;
    padding-bottom:4px;
    border:1px solid #334c66;
    background-color:#69c;
    color:#e0ebf5;
    -webkit-box-shadow:inset 0px 0px 8px #334c66;
    -moz-box-shadow:inset 0px 0px 2px #3a6da0;
    box-shadow:inset 0px 0px 2px #3a6da0;
}

上下paddingを調整して押下した感を出してます。
ちなみにこれをインラインで使おうとすると回りも巻き込んでしまうのでご注意を。

IE6/7だとクリック後に復帰できない問題

IE6/7で見ると、ボタンをクリックした後もフォーカスが残ってしまっているのか、
他の要素をクリックするまで:activeのスタイルのままになってしまいます。

なので、例えばJavaScriptでこんなのを足してみます。（要jQuery）
クリックイベントが発生した時に、ボタンからフォーカスを外しています。

• DEMO:2 ( jsFiddle )

$(".button").click( function(){ this.blur(); } );

とはいっても、画面遷移しちゃうようなボタンでやったところで、あまり見てもらえなくて残念。
例えばAjaxコンテンツのような、その場で切り替わるページなら、
「押し応え」を付加する事で使い心地が向上するかもしれませんね！

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) – Smashing Magazine

こんな感じにデザインされています。
いつぞや紹介したVIエディタのチートシートと同じデザイナーさんが手がけています。
テイストが同じですね。

新しく追加されているプロパティについては
現状ではまだブラウザ独自の書式を使わざるをえませんが、
そこらへんも考慮して、各ブラウザの記法とスタンダードの記法を明記してあります。
これは助かりますね。

CSS3だけでなく、CSS2のチートシートのリンクも掲載されているので、
そちらも大いに活用できそうです。

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) – Smashing Magazine

備忘録：ブラウザ別CSSグラデーションのメモ
を元にして簡単なjQueryプラグインを書いてみました。ちょこざいなやつです。

jquery.xgraident.js

ご利用は自由かつ自己責任にて。
デモ用に作った物なので、かなりおおざっぱなブラウザ判別しかしてません。
（気が向いたら精査するかもしれません）

簡単な使い方

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.xgradient.js"></script>

<script type="text/javascript">
    $("#GradientTest").xgradient( "y", "#ff99cc00", "#00663300" );
</script>

xgradient( direction, from_color, to_color )

direction

グラデーションの方向です。xは横、yは縦。（内部では「”y”かそうでないか」としか判断してないのは秘密です）

from_color

開始時の色。IEの書式にあわせた、#AARRGGBBの形式です。

to_color

終了時の色。from_colorと同様。

動作確認はIE6、IE7、IE8、Chrome5.0、Firefox3.6.3。

各ブラウザの見た目

$("#GradientTest").xgradient( "y", "#ff99cc00", "#00663300" );

IEのfilterによるグラデーションは、透明度をかますと他と表現が変わってしまう様子。
色計算の仕方が違ったりするのでしょうか。

こんな方法をとらずに皆同じ書き方出来るのは、
果たして何年後になるのでしょうか。

CSSのクロスブラウザグラデーションといえば、
こちらの記事が図解も載っていて非常に分かりやすいです。
Cross-Browser CSS Gradient
が、もう少し詳細の仕様を覚えておきたいと思ったので、ここにメモっておきます。

前提として、
中間のカラーストップを持たないシンプルなグラデーションを縦横に展開
する事をこの記事でのゴールとしておきます。
IEのfilterで実現出来るのがそれくらいなので、そこにあわせる意味で。

IEの場合

Gradient Filter (A, ABBR, ACRONYM, …)

書式

filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=,StartColorStr=,EndColorStr=);

GradientType

グラデーションの方向を整数で指定します。0ならば縦方向、1ならば横方向に描画されます。

StartColorStr

グラデーションの開始時の色。アルファ値を含んだRGBで指定。例：#FF000000

EndColorStr

グラデーションの終了時の色。アルファ値を含んだRGB。例：#FF000000

例

filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=0,StartColorStr=#FF669900,EndColorStr=#FF336600);

色の指定の仕方があまり見慣れない形式ですが、
最初の二桁が透明度を、順にR値、G値、B値を示します。

Mozillaの場合

-moz-linear-gradient – MDC

書式

-moz-linear-gradient( [ || ,]? , [, ]* )

point, angle

グラデーションの方向をangleかpointのいずれかで指定します。
pointはleft,right,center,top,bottom等を用いて指定。
angleは三種の単位の中から選んで指定します。
cf)angle – MDC degが一番馴染み深いですね。

stop

カラーストップを指定。色の指定方法も複数あります。
cf)color value – MDC RGBか、RGBaが馴染み深いでしょうか。

linear（線形）ではなく、radial（放射）グラデーションを描写する為の
-moz-radial-gradientも用意されています。
-moz-radial-gradient – MDC
が、ここでは割愛。

例1(RGB/縦方向)：

background: -moz-linear-gradient(top, #669900, #336600);

例2(RGBa/横方向)：

background: -moz-linear-gradient(left, rgba(102,153,0,1), rgba(51,102,0,0.5));

グラデーションの方向は、縦ならtop、横ならleftを指定するのがシンプルで分かりやすいですね。
本旨とはズレますが、ここで2点指定すれば斜めのグラデーション等も勿論実現できます。

Webkitの場合

Safari CSS Reference: CSS Property Functions

Mozillaと違って、グラデーションのタイプを引数で指定します。
linear（線形）とradial（放射）から選択できますが、
タイプによって書式が異なるので、ここではlinearについてのみ書いておきます。

書式

-webkit-gradient(linear, , , from(), to()… )

start_point

グラデーションの開始位置。left, right, center, top, bottom等を用いて指定します。

end_point

グラデーションの終了位置。start_pointに同じ。

stop

カラーストップ。開始と終了はfrom()とto()で括る事で指定します。

Mozilla同様、start_pointとend_pointを弄れば斜めも可能ですね。
カラーストップも、RGB値の他にRGBaにも対応しています。

例

background: -webkit-gradient(linear,left top, right top, from(rgba(102,153,0,1)), to(rgba(51,102,0,0.5)));

と、こんな感じにまとめてみましたが…
正直いちいち書式覚えてられるかー！というのが本音ですね。
クロスブラウザ対応できるライブラリでも書いてみようと思います。