A Presentation about CSS3, Created with CSS3
Earlier on this week I held a training session on CSS3 for my colleagues at Adtrak, focusing on the basics and how we can use it today in our clients’ sites – sites that receive the majority of their traffic from IE browsers (which you probably know don’t like CSS3 oh so much). I should probably start calling this blog Tangled in CSS3 considering how much I go on about it!
I wanted to make my presentation browser based so I could include working examples of certain features of CSS3 that require interactivity, so I put the slides together and animated them using jQuery.
Then I thought – wait a minute, surely I can do this with CSS3 and rid myself of any scripts! So that’s exactly what I did.
I’m going to provide a quick overview of the presentation and finish with a brief explanation of how I put it together (It’s pretty much the same method as the tutorial I posted last week on my responsive sliding image gallery).
Overview
Contents
- Intro
- Border Radius
- CSS3 Transitions
- Opacity and RGBA
- Text Shadow and Box Shadow
- Multiple Backgrounds
- 2D Transforms
- Using 2D Transforms with Transitions
- Pseudo Elements
- Linear Gradients
- Radial Gradients
- Selectors
- Take Away
It doesn’t cover everything (it barely touches the surface) and there are a few bits and bobs that aren’t strictly CSS3, namely the selectors, but I felt there were certain selectors that fly a bit under the radar in the mainstream and deserve a bit more coverage.
I do plan on expanding these slides considerably and transforming it into a significant resource for all things CSS3.
How to make a presentation with CSS3
It’s really quite simple. CSS3 takes all the glory but the real star here is simply the :target
pseudo-selector, which applies styles to the element whos id
is targeted at the end of the URL.
All our slides need an id; I’ve gone for #one, #two, #three etc. And within each slides we need navigation controls to take us to the next or previous slide. I’ve simply styled the controls to be transparent, with the ‘previous’ link taking up the entire left half of the slide and the ‘next’ link taking up the entire right half of the slide.
Obviously the navigation controls for the number #three slide (for example) would have a ‘previous’ link to #two and a ‘next’ link to #four. Like so…
<div class="panel" id="two">
<a class="back" href="#one"></a>
<a class="next" href="#three"></a>
</div>
<div class="panel" id="three">
<a class="back" href="#two"></a>
<a class="next" href="#four"></a>
</div>
<div class="panel" id="four">
<a class="back" href="#three"></a>
<a class="next" href="#five"></a>
</div>
Probably should be a <ul>
rather than a list of <div>'s
but we won’t get hung up on that right now.
The CSS
Before we get to any CSS3 we could simply say…
.panel {
display:none;
}
#one:target, #two:target, #three:target /* etc. */ {
display:block;
}
And job’s a good ‘un!
CSS3
But we want to be a bit more adventurous than that don’t we?
Yes. Firstly, lets get rid of the display
properties because we can’t transition them. Let’s use opacity:0;
instead and stick opacity:1;
on the targeted elements. Don’t forget the transition
property too!
.panel {
opacity: 0;
transition: all 1s ease; /* Don't forget vendor pre-fixes! */
}
#one:target, #two:target /* etc. */ {
opacity:1;
}
Things are already looking much better. From here it’s simply a case of experimenting with various CSS3 properties.
I’ve used some transforms to make the animation look a little nicer and allow the slides to actually slide in.
.panel {
opacity: 0;
transform: scale(0.1) translate(960px, 0);
transition: all 1s ease; /* Don't forget vendor pre-fixes! */
}
#one:target, #two:target /* etc. */ {
opacity:1;
transform: scale(1) translate(0);
}
So this pushes the panels 960px to the right and pulls it back to centre position when it’s targeted, allowing for the sliding transition from the right. I’ve also added a scale so it also appears to expand from small to big.
There’s a few more details you might need to know if you’re looking at employing this technique, so I’d strongly recommend taking a look at the CSS file.
About Stephen Greig
Stephen Greig is a 25 year old Freelance Web Designer/Front-end guy, currently living in Nottingham, UK. Stephen is also the creator of messivsronaldo.net and author of CSS3 Pushing the Limits, a book on advanced CSS3. You should follow him on Twitter where he talks about the web, sports, music and swears a lot. Stephen's also on Google+ if that's more your bag.