[CSS]ツールチップや画像拡大など実用的な4つのチュートリアル
Post on:2008年4月28日
sponsors
CSS Globeのエントリーから、ツールチップや画像拡大などのアンカー要素に実装する実用的なスタイルシートのテクニックを４つ紹介します。
4 Uber Cool Css Techniques For Links
Pure Css Tooltip
スタイルシートで、ツールチップを実装します。
HTML
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <a href="#">Title<span>Tooltip</span></a> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<textarea name="code" class="css" cols="60" rows="5"> a{ z-index:10; } a:hover{ position:relative; z-index:100; } a span{ display:none; } a:hover span{ display:block; position:absolute; float:left; white-space:nowrap; top:-2.2em; left:.5em; background:#fffcd1; border:1px solid #444; color:#444; padding:1px 5px; z-index:10; } </textarea> |
Pure Css Image Gallery
スタイルシートで、サムネイル付きの画像ギャラリーを実装します。
HTML
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="html" cols="60" rows="5"> <li> <a href="#"> <img src="images/02_1s.jpg" alt="gallery thumbnail" /> <span><img src="images/02_1.jpg" alt="gallery image" /></span> </a> </li> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<textarea name="code" class="css" cols="60" rows="5"> ul#gallery, ul#gallery li{ margin:0; padding:0; list-style:none; } ul#gallery{ width:400px; height:375px; position:relative; background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%; } ul#gallery li{ float:left; display:inline; margin-top:300px; } ul#gallery a span{ display:none; } ul#gallery a:hover{ background:none; z-index:100; } ul#gallery a:hover span{ position:absolute; width:400px; height:300px; float:left; top:0; left:0; display:block; } </textarea> |
Pure Css Image Resizer
スタイルシートで、画像の拡大表示を実装します。
HTML
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="html" cols="60" rows="5"> <li> <a href="#"> <em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em> <span><img src="images/02_1m.jpg" alt="gallery image" /></span> </a> </li> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<textarea name="code" class="css" cols="60" rows="5"> ul#gallery, ul#gallery li{ margin:0; padding:0; list-style:none; } ul#gallery{ margin:2em 0; } ul#gallery li{ float:left; display:inline; margin-right:5px; } ul#gallery a{ float:left; display:inline; position:relative; } ul#gallery a:hover{ background:none; z-index:100; } ul#gallery a span{ display:none; } ul#gallery a:hover span{ float:left; display:block; cursor:pointer; } ul#gallery a:hover em{ display:none; } ul#gallery a img{ border:1px solid #999; padding:2px; background:#fff; } ul#gallery a:hover img{ border:1px solid #000; } </textarea> |
3D Button Effect
スタイルシートで、立体的なボタン風のエフェクトを実装します。
HTML
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <a href="#" class="button"><span>Roll over here</span></a> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<textarea name="code" class="css" cols="60" rows="5"> a.button{ float:left; font-size:110%; font-weight:bold; border-top:1px solid #999; border-left:1px solid #999; border-right:1px solid #333; border-bottom:1px solid #333; color:#333; width:auto; } a.button:hover{ border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #999; border-bottom:1px solid #999; color:#333; } a.button span{ background:#d4d0c8 url(images/bg_btn.gif) repeat-x; float:left; line-height:24px; height:24px; padding:0 10px; border-right:1px solid #777; border-bottom:1px solid #777; } a.button:hover span{ border:none; border-top:1px solid #777; border-left:1px solid #777; background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x; cursor:pointer; } </textarea> |
sponsors
