dynamicinternet Wir machen Ihr Web dynamisch!

Eine CSS Gallery

geschrieben von Micha am 10. Februar 2008 | kein Kommentar

Heute habe ich etwas in meinen Bookmarks gestöbert und bin auf Stu Nicolls Seite CSSplay gelandet. Dort kann man Tage zubringen, um zu bewundern, was der Mann drauf hat.

Eine Sliding Photogallery hat mir dort besonders gut gefallen, so das ich sie einmal nachgebaut habe.
Solche Demos sind auch immer wieder gut für meine Feedleser, so müssen sie meine Seite wieder mal besuchen .

Einfach mit der Maus über die bunten Balken fahren.

Es handelt sich hierbei um eine ungeordnete Liste, der Rest ist alles CSS.

<ul id="gallery">
	<li><a href="#nogo"><img src="..." alt="..." /></a></li>
	<li><a href="#nogo"><img src="..." alt="..." /></a></li>
	<li><a href="#nogo"><img src="..." alt="..." /></a></li>
	<li><a href="#nogo"><img src="..." alt="..." /></a></li>
	<li><a href="#nogo"><img src="..." alt="..." /></a></li>
</ul>

/* CSS */
#gallery {
	background: #efefef url(gallerybackground.jpg) right top no-repeat;
	border: 1px solid #000;
	list-style-type: none;
	overflow: hidden;
	margin: 0 auto 2em;
	padding: 5px 1px 5px 5px;
	height: 171px;
	width: 260px;
}
#gallery li { float: left; padding: 0; margin: 0}
#gallery li a {
	display: block;
	overflow:hidden;
	float: left;
	border-right: 4px solid #efefef;
	height: 171px;
	text-decoration: none;
	width: 20px;
}
#gallery li a img {
	border: none;
	height: 171px;
	width: 160px;
}
#gallery li a:hover {
	background: #efefef none repeat scroll 0%;
	width: 160px;
	height: 171px;
}

Nice, oder?