Download Demo

:target

As in an earlier tutorial on how to make a CSS3 tabbed interface, we’re going to be using :target. I decided to do this after creating the jQuery Image Slider. It wasn’t overly difficult, in fact I could probably argue this was easier than the jQuery version. Lets take a look, shall we?

Support

In the latest versions of each browser

Webkit Gecko Trident Presto
Yes Yes Almost Yes

A little bit of inconsistency in the buttons across browsers because of how each handles border-radius. IE doesn’t seem to have the animation. Oh well.

HTML Backbone

To begin we need to add some images, and a bunch of buttons that we click on to ‘target’ those images. So I made a bunch of divs and placed an image and button in each. Then we can target the div and alter the CSS of the stuff within (by targeting children). I added some anchors for the images which you can edit yourself.


<div id="slider">
	<div id="image-1">
		<a href=""><img src="s1.jpeg" alt="" /></a>
		<a class="slider-nav" href="#image-1"></a>
	</div>
	<div id="image-2">
		<a href=""><img src="s2.jpeg" alt="" /></a>
		<a class="slider-nav" href="#image-2"></a>
	</div>
	<div id="image-3">
		<a href=""><img src="s3.jpeg" alt="" /></a>
		<a class="slider-nav" href="#image-3"></a>
	</div>
	<div id="image-4">
		<a href=""><img src="s4.jpeg" alt="" /></a>
		<a class="slider-nav" href="#image-4"></a>
	</div>
</div>

So as I explained in the previous tutorial, when you use :target in CSS, the CSS changes when you click on a link that changes the URL to a hash of the id. So for example, when the user clicks on the link linking to #image-4 we’re targeting the div with id="image-4". Easy, right?

CSS Time

First off we add some stylings to the main #slider object and place get right into targeting elements. We are saying, when a div with id beginning with “image” is targeted, apply this CSS to its children. The images are gonna slide down from the top into the slider, so all images begin 200px above the slider (the images I’m using are 845x200px).

We hide any overflow, and when an image div is targeted we change the position of the image so it’s in the slider, giving a slide down effect. I also threw in some transitions to make everything look lovely.

#slider {
	width: 845px;
	height: 200px;
	position: relative;
	overflow: hidden;
	background: #434343;
}

#slider [id^='image']:target img {
	top: 0;  
}

#slider [id^="image"] img {
	position: absolute;
	top: -200px;
	border: 0;
	-moz-transition: top 0.5s ease-in;
	-ms-transition: top 0.5s ease-in;
	-webkit-transition: top 0.5s ease-in;
	-o-transition: top 0.5s ease-in;
}
http://www.html5canvastutorials.com/blog/wp-admin/post.php?post=1995&action=edit#edit_timestamp
We finish off with some positioning of the anchors. I also added some styling to make them look like circular buttons. Some CSS was added on target so that the buttons become highlighted. 


#slider [id^='image']:target a {
	background: #fff;
	border: 3px solid #333;
	width: 10px;
	height: 10px;
}

.slider-nav {
	background: #333;
	width: 16px;
	z-index: 9999;
	height: 16px;
	box-shadow: inset 0px 2px 10px rgba(0,0,0,0.3), 0px 0px 20px rgba(255,255,255,0.4);
	border-radius: 32px;
	position: absolute;
	bottom: 15px;
}

#image-1 .slider-nav { right: 80px; }
#image-2 .slider-nav { right: 60px; }
#image-3 .slider-nav { right: 40px; }
#image-4 .slider-nav { right: 20px; }

Finally add this line of Javascript to the pages you have the slider on, so that it has an image at the start.

<script type="text/javascript">window.location.hash = '#image-1'</script>

And voila, we’re done. Not too hard, huh? I’d argue this method is a lot easier than Javascript. Download the files below or check out the demo, as usual, you can use any of this for free on any project without credit. Have fun!