背景で敷かないCSSスプライト egoblock Follow 2011-12-26 16:46:38 License: MIT License Fork0 Fav0 View441 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 0 lines HTML 6 lines CSS 56 lines 背景で敷かないCSSスプライト <ul class="cf"> <li class="menu01"><a href="#"><img src="http://egoblock.com/wp-content/uploads/2011/12/menu_button001.png" alt="" /></a></li> <li class="menu02"><a href="#"><img src="http://egoblock.com/wp-content/uploads/2011/12/menu_button001.png" alt="" /></a></li> <li class="menu03"><a href="#"><img src="http://egoblock.com/wp-content/uploads/2011/12/menu_button001.png" alt="" /></a></li> <li class="menu04"><a href="#"><img src="http://egoblock.com/wp-content/uploads/2011/12/menu_button001.png" alt="" /></a></li> </ul> 背景で敷かないCSSスプライト body,ul,li,a,img{ margin:0; padding:0; } img{ border:0; } li{ height:30px; padding:5px; } li a{ position:relative; display:block; width:200px; height:30px; overflow:hidden; } li img{ position:absolute; } li.menu01 img{ top:0; } li.menu02 img{ top:-30px; } li.menu03 img{ top:-60px; } li.menu04 img{ top:-90px; } .cf:before, .cf:after{ content:''; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } <ul class="cf"> <li class="menu01"><a href="#"><img src="http://egoblock.com/wp-content/uploads/2011/12/menu_button001.png" alt="" /></a></li> <li class="menu02"><a href="#"><img src="http://egoblock.com/wp-content/uploads/2011/12/menu_button001.png" alt="" /></a></li> <li class="menu03"><a href="#"><img src="http://egoblock.com/wp-content/uploads/2011/12/menu_button001.png" alt="" /></a></li> <li class="menu04"><a href="#"><img src="http://egoblock.com/wp-content/uploads/2011/12/menu_button001.png" alt="" /></a></li> </ul> body,ul,li,a,img{ margin:0; padding:0; } img{ border:0; } li{ height:30px; padding:5px; } li a{ position:relative; display:block; width:200px; height:30px; overflow:hidden; } li img{ position:absolute; } li.menu01 img{ top:0; } li.menu02 img{ top:-30px; } li.menu03 img{ top:-60px; } li.menu04 img{ top:-90px; } .cf:before, .cf:after{ content:''; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/lyZ0/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/egoblock/lyZ0" title="背景で敷かないCSSスプライト">背景で敷かないCSSスプライト - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Forked sort new page view favorite forked forked: 背景で敷かないCSSスプライト fumito.sasak.. 00 45views 2/6/56
