CSS3 を使って Mac の Dock っぽい表現

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

Pocket

CSS3 のおかげでスゴイ表現が簡単できるようになりました. 今回はその中から, transition と display:box , gradient , box-reflect を使用して Mac の Dock っぽいものを作ってみました. もどきなので, 山なりに大きくはならずマウスが乗っているアイコンのみが大きくなります. JavaScript を一切使用せずにこういった表現ができるとは… いやぁ~CSS3 恐るべし!!

映り込み表現の為に使用している box-reflect は webkitのみで動作します.

Demo Download

ABOUT

マウスが乗ると大きくなります. webkit (chrome, safari) の場合のみ下に映り込みが表示されます.

CODE

コード全体です.

<html>
    
    <head>
        <meta charset="utf-8">
        <title>Mac Dock</title>
        <style>
            
            .dock {
                width: 300px;
                height: 50px;
                margin: 0px auto;
                padding: 10px;
                background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(0.75, #aaa), to(#000));
                background: -moz-linear-gradient(top, #000, #aaa);
                
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
                
                -webkit-transition: 1s;
                -moz-transition: 1s;
                -o-transition: 1s;
                transition: 1s;
            }
            
            div.dock:hover {
                width: 350px;
            }
            
            .dock .dock-item .icon {
                width:50px;
                height:50px;
                
                -webkit-box-reflect:below 1px
                    -webkit-gradient(linear, left top, left bottom,
                        from(rgba(0, 0, 0, 0)),
                        color-stop(0.6, rgba(0, 0, 0, 0)),
                        to(rgba(0, 0, 0, 0.8))
                        );
                
                -webkit-transition: 1s;
                -moz-transition: 1s;
                -o-transition: 1s;
                transition: 1s;
            }
            
            .dock .dock-item .icon:hover {
                width: 100px;
                height: 100px;
                /*
                -webkit-transform: scale(2.0, 2.0);
                -moz-transform: scale(2.0, 2.0);
                -o-transform: scale(2.0, 2.0);
                transform: scale(2.0, 2.0);
                */
            }
            
        </style>
    </head>
    
    <body>
        
        <h1>Mac Dock</h1>
                
        <div class="dock">
            <div class="dock-item">
                <a href="http://tmlife.net/feed"><img class="icon" src="img/RSS.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://twitter.com/#!/phi_jp"><img class="icon" src="img/Twitter.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://tmlife.net/"><img class="icon" src="img/Facebook.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://tmlife.net/"><img class="icon" src="img/StumbleUpon.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://tmlife.net/"><img class="icon" src="img/Delicious.png" /></a>
            </div>
            <div class="dock-item">
                <a href="http://tmlife.net/"><img class="icon" src="img/LinkedIn.png" /></a>
            </div>
        </div>
        
    </body>

</html>

拡大

transition でアニメーションさせています. アイコンそれぞれ(.dock .dock-item .icon)にマウスが乗るとサイズが2倍になるように設定. アイコンを囲むエレメント(.dock)をアイコンのサイズ*アイコン数を指定して, マウスが乗った時に横幅が大きくなるよう設定.

マウスが乗った際のサイズは

(アイコンが大きくなったときのサイズ-アイコンサイズ)+アイコンのサイズ*アイコン数のサイズ

となります.今回は

(100px-50px)+50px*6 = 350px;

ってな感じですね.

映り込み

下に映り込みが表示されるだけでだいぶ見栄えします.これは -webkit-box-reflect を使えば簡単にできます. 指定するパラメータは

-webkit-box-reflect:方向 オフセット グラデーション    

を指定します.今回は下方向(below)に 1px オフセットをかけてグラデーションで下に行くほど透過するように設定しています.

-webkit-box-reflect:below 1px
    -webkit-gradient(linear, left top, left bottom,
        from(rgba(0, 0, 0, 0)),
        color-stop(0.6, rgba(0, 0, 0, 0)),
        to(rgba(0, 0, 0, 0.8))
        ); 

学生のころに, 積分使って必死に Mac の Dock を ActionScript で作っていたのを思い出した. 今回は, もどきながら CSS3 で簡単にそれっぽい表現ができるってのは本当に面白い. これからもちょくちょく遊んでいこうと思う.

参考サイト

TRACK BACK URL

POST COMMENT

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

COMMENT