[CSS]ツールチップや画像拡大など実用的な4つのチュートリアル

CSS Globeのエントリーから、ツールチップや画像拡大などのアンカー要素に実装する実用的なスタイルシートのテクニックを４つ紹介します。

4 Uber Cool Css Techniques For Links

• Pure Css Tooltip
• Pure Css Image Gallery
• Pure Css Image Resizer
• 3D Button Effect

Pure Css Tooltip

スタイルシートで、ツールチップを実装します。

Pure Css Tooltipのデモページ

HTML

<a href="#">Title<span>Tooltip</span></a>

CSS

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;
}

Pure Css Image Gallery

スタイルシートで、サムネイル付きの画像ギャラリーを実装します。

Pure Css Image Galleryのデモページ

HTML

<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>

CSS

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;
}

Pure Css Image Resizer

スタイルシートで、画像の拡大表示を実装します。

Pure Css Image Resizerのデモページ

HTML

<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>

CSS

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;
}

3D Button Effect

スタイルシートで、立体的なボタン風のエフェクトを実装します。

3D Button Effectのデモページ

HTML

<a href="#" class="button"><span>Roll over here</span></a>

CSS

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;
}