: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 div
s 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!
Comments
Hello, great little bit of css.I’m wanting to incorporate it on my website.I’ve not put it on there just yet.
Only trouble I’m having is getting the first image to load with the last line of code in your tutorial.
I’m viewing it in Mozilla 10.0.2
everything else about it works :-)
Hi have a look at your CSS slide images in my demo website.
My issue is that when I click on the buttons to move to next image it moves the page down to the image when that’s not really neccessary on the page.
Might there be a way around this?
Any help is very much appreciated.
Many thanks
You could do something like this:
I haven’t tested it, but all you should really have to do is prevent the default action.
Where should I use use your mentioned code, which place in the Page HTML
Hello Johnny,
might you tell the interested community where your snippet is placed in the overall code, please?
Hi, May i know where to get the javascript for this?
Many thanks! :)
It’s all CSS, so there is no Javascript. :)
I’ve seen this version. Thanks for coding :)
Hi, this css is really cool, works perfect in Safari and Chrome but I’m having problem in IE and Firefox
– First image doesnt load, I did some research about compatibility of the hash script
window.location.hash = ‘#image-1’
Any suggestion?
Thanks in advance for any input
hello…
i have the same issue too…
when I click on the bullet buttons to move to next image it scrolls the page down to the image…
thanks :D
The problem is the :target psuedo element works by targeting certain elements and thus automatically jumps down the page. I’m thinking of writing a tutorial on how to accomplish this effect without the jumping. ;)
ah see…
so what must i do now to prevent that event?
:D
You would have to use Javascript (and jQuery if you wanted). See here for more information: http://stackoverflow.com/questions/2852321/stop-default-hashtag-behavior-with-jquery
Hey man! cool image slider. I’m using it for my tiny box.
I found the firefox and IE problem early on and because I’m using an iframe (I know old school shite)…what I was able to do was just create the link as http://blablabla.com/example.html#image-1 and that loads the first image up straight away…that might help others but I don’t know. I guess it only really helps those where the url is not needed….
Mark
Sorry here’s an actual example of what I mean…
http://designee.co.uk
Click on either kidrobot or the external HDD as they’re the only two I’ve had time to set up so far…
Brilliant Idea. I never thought about doing something like this!
nice.. can we have autoplay function for them?
Good info for image slide show.
Yea i am having the same problem, when i click on the next image, the page jumps down? can u explain how ur solution works
Is there anyway to set the rotation image to automatic?
¡MuchÃsimas gracias!
This really helped me a LOT. I messed up at first but it was because I had accidentally deleted a line.
AWESOME WORK. Kudos.
Nice tutorial..
Now want you to show how to play it automatically..
please upload the tutorial for it asap.
Thanx.
Mehul.
Any simple way to autoplay this?
You could run an animation and have a delay but there’d be no way to stop it.
Your time at the University is reserved for clinical and field hands on learning only.
amount, you will be able to start your work from home business and earn money online.
This package is also popular with businesses who want fibre
optic broadband it suits anyone, but whether you have the money to pay for it
is another matter entirely.
Awesome tutorials but i want to built my website designing skills.How can i start at intermediate level