CSSだけでMacのDockみたいなの ginpei Follow 2011-07-28 22:29:44 License: MIT License Fork3 Fav0 View4880 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 16 lines CSS 72 lines これ風: http://support.apple.com/kb/HT2474?viewlocale=ja_JP それっぽいアニメーションをします。 Chrome, Safariでうまく動きます。 Firefoxも動きますが、3.6は駄目なのでバージョンアップしておいてください。 Operaは何やら描画が壊れる場合があるみたいです。 IEは乗り換えをお勧めします。 もっと豪華にしてそれっぽくしたのはこちら: http://jsdo.it/ginpei/yM4Y CSSだけでMacのDockみたいなの <body> <nav id="dock"> <span> <a href="#item000">〠</a> <a href="#item001">☎</a> <a href="#item002">〄</a> <a href="#item002">☀</a> <a href="#item003">♘</a> <a href="#item004">♺</a> <a href="#item005">♨</a> <a href="#item006">☠</a> <a href="#item007">❦</a> <a href="#item008">☃</a> </span> </nav> </body> CSSだけでMacのDockみたいなの html, body { margin: 0; } /* 基盤 */ #dock { bottom: 32px; position: fixed; width: 100%; } #dock > span { display: table; margin: auto; } /* 項目 */ #dock > span > a { display: table-cell; text-decoration: none; font-size: 32px; height: 64px; text-align: center; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; vertical-align: bottom; width: 32px; } #dock > span > a:hover { font-size: 64px; -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; width: 64px; } /* 各項目 */ #dock > span > a:nth-child(1) { color: #c00; } #dock > span > a:nth-child(2) { color: #000; } #dock > span > a:nth-child(3) { color: #090; } #dock > span > a:nth-child(4) { color: #f00; } #dock > span > a:nth-child(5) { color: #999; } #dock > span > a:nth-child(6) { color: #009; } #dock > span > a:nth-child(7) { color: #fc0; } #dock > span > a:nth-child(8) { color: #666; } #dock > span > a:nth-child(9) { color: #f0c; } #dock > span > a:nth-child(10) { color: #ccc; } これ風: http://support.apple.com/kb/HT2474?viewlocale=ja_JP それっぽいアニメーションをします。 Chrome, Safariでうまく動きます。 Firefoxも動きますが、3.6は駄目なのでバージョンアップしておいてください。 Operaは何やら描画が壊れる場合があるみたいです。 IEは乗り換えをお勧めします。 もっと豪華にしてそれっぽくしたのはこちら: http://jsdo.it/ginpei/yM4Y <body> <nav id="dock"> <span> <a href="#item000">〠</a> <a href="#item001">☎</a> <a href="#item002">〄</a> <a href="#item002">☀</a> <a href="#item003">♘</a> <a href="#item004">♺</a> <a href="#item005">♨</a> <a href="#item006">☠</a> <a href="#item007">❦</a> <a href="#item008">☃</a> </span> </nav> </body> html, body { margin: 0; } /* 基盤 */ #dock { bottom: 32px; position: fixed; width: 100%; } #dock > span { display: table; margin: auto; } /* 項目 */ #dock > span > a { display: table-cell; text-decoration: none; font-size: 32px; height: 64px; text-align: center; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; vertical-align: bottom; width: 32px; } #dock > span > a:hover { font-size: 64px; -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; width: 64px; } /* 各項目 */ #dock > span > a:nth-child(1) { color: #c00; } #dock > span > a:nth-child(2) { color: #000; } #dock > span > a:nth-child(3) { color: #090; } #dock > span > a:nth-child(4) { color: #f00; } #dock > span > a:nth-child(5) { color: #999; } #dock > span > a:nth-child(6) { color: #009; } #dock > span > a:nth-child(7) { color: #fc0; } #dock > span > a:nth-child(8) { color: #666; } #dock > span > a:nth-child(9) { color: #f0c; } #dock > span > a:nth-child(10) { color: #ccc; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? これ風: http://support.apple.com/kb/HT2474?viewlocale=ja_JP それっぽいアニメーションをします。 Chrome, Safariでうまく動きます。 Firefoxも動きますが、3.6は駄目なのでバージョンアップしておいてください。 Operaは何やら描画が壊れる場合があるみたいです。 IEは乗り換えをお勧めします。 もっと豪華にしてそれっぽくしたのはこちら: http://jsdo.it/ginpei/yM4Y Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ginpei URLhttp://twitter.com/ginpei_jp Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/yyUb/js"></script> Discussion Questions on this code? Forked sort by latest page views favorite forked forked: CSSだけでMacのDockみたいなの tienzhong_ky 00 389 2/16/72 もっとそれっぽく forked: CSSだけでMacのDoc ginpei 2332 24358 2/16/146 css mac user_interface forked: CSSだけでMacのDockみたいなの k_e_n1 00 736 2/14/78
