CSS3 を使って Mac の Dock っぽい表現
CSS3 のおかげでスゴイ表現が簡単できるようになりました. 今回はその中から, transition と display:box , gradient , box-reflect を使用して Mac の Dock っぽいものを作ってみました. もどきなので, 山なりに大きくはならずマウスが乗っているアイコンのみが大きくなります. JavaScript を一切使用せずにこういった表現ができるとは… いやぁ～CSS3 恐るべし!!
映り込み表現の為に使用している box-reflect は webkitのみで動作します.
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)にマウスが乗るとサイズが２倍になるように設定. アイコンを囲むエレメント(.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 で簡単にそれっぽい表現ができるってのは本当に面白い. これからもちょくちょく遊んでいこうと思う.
参考サイト
CSS3:『CSS3 を使って Mac の Dock っぽい表現』
http://t.co/BT84yi5
#css3 #css
映り込み無いのは見たことあったけど映り込みあると見栄えが全然違うなー。 RT @phi_jp: CSS3:『CSS3 を使って Mac の Dock っぽい表現』
http://goo.gl/hoKoF
#css3 #css
[…] CSS3 を使って Mac の Dock っぽい表現 […]
昔CSS3にハマッてた頃に作ったサンプルをjsdo.itに移植したのでエントリーのDemoリンクを変更しました. その1.
『CSS3 を使って Mac の Dock っぽい表現』
http://t.co/y19WxyQQ
https://t.co/SHqzlaia
#css3