Tangled in Design Branding Decoration

Tangled in Design is the work of Stephen Greig, currently a Web Designer/Front-end guy in Nottingham, UK.

Read more about Stephen

I wrote a book on advanced CSS3, published by John Wiley & Sons. You should totally buy it…

Buy my book: CSS3 Pushing the Limits

Tangled in Design is the work of Stephen Greig, currently a Freelance Web Designer/Front-end guy in Nottingham, UK.

Stephen specialises in design and front-end development, notably HTML5 & semantics, scalable CSS, along with particular expertise in the experimental, cutting edge CSS3 modules.

Stephen's been in the industry as a full-time professional for over 5 years, during which he has graduated with a First Class BA Honours degree, written a 380 page book on advanced CSS3 and held Senior positions in both New Zealand and South Wales.

He has since moved back to his home in Nottingham where he now works as a Senior Web Designer.

Stephen loves sports and is a keen follower of Hereford FC as well as the Welsh Rugby Union and Football teams.

He also has a deep passion for music and boasts an extremely varied taste, as is evident by his last.fm profile.

He also likes swearing and thinks that talking in third person is cool as fuck.

Want to know more? Tweet me. I'm nice.

Slide Back

A Presentation about CSS3, Created with CSS3

Tweet

CSS3 SlidesEarlier 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).

The slides…
View Slides

View Demo

Overview

Contents

  1. Intro
  2. Border Radius
  3. CSS3 Transitions
  4. Opacity and RGBA
  5. Text Shadow and Box Shadow
  6. Multiple Backgrounds
  7. 2D Transforms
  8. Using 2D Transforms with Transitions
  9. Pseudo Elements
  10. Linear Gradients
  11. Radial Gradients
  12. Selectors
  13. 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.

View DemoView CSS

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.