CSS3

The new properties in CSS3 give us more scope for creating more powerful design features with very little effort, many of which were previously only available through JavaScript or Flash. This example uses the :target selector, a healthy dose of CSS3 transitions and the general sibling combinator to create a modern user interface.

Recently, a reader asked us how we created our floating orange “follow” tab that appears on the right-hand side of every page on elated.com. It’s quite a nice effect and it also uses some interesting new CSS3 features, so I thought it’d make a good topic for a tutorial!

This week I presented at the Think Vitamin Online CSS3 Conference, kicking off the event with my presentation on CSS3 Selectors. I have now uploaded my slides and also my working file examples of the different selectors in use.

I’ve created a few charts showing CSS3 support in IE9 Beta. The list does not include every conceivable CSS3 property or selector. I’ve tried to stick to the well-known stuff, and I’ve also included a list of pseudo-selectors and pseudo-elements. Most of the information is taken from this page on MSDN.

Lots of abbreviations in the title and URL, but with an audience like TechCrunch’s I’m not too worried about the point coming across or not. At this week’s Opera press event held in Oslo, Norway, I had a chance to spend a couple of minutes talking to Håkon Wium Lie, who is not only the software company’s chief technology officer but also broadly known as the “father of CSS”.

Earlier I showed you how to rotate a video using HTML5. It is a little complicated so luckily you can achieve the same effect using a CSS3 2d transform.

You will be able to see the effect in IE9 Platform Preview (but not the beta), chrome, safari and firefox.

CSS3 gradients are available to use in Webkit (Safari, Chrome) and Mozilla (Firefox) browsers. They’re not exactly new but I only recently started using them consistently myself so I’ve put together this quick article.

FYI this isn’t the holy grail of CSS3 gradients, it’s more of a reminder for me or quick getting started guide.

During an argument with a developer today I, in a roundabout way, arrived at the question ‘are CSS3 gradients Fool’s Gold?’ The argument itself is somewhat irrelevant and far too long winded to go into here, but the long and short of it was that he was trying to force some crazy CSS3 syntax into doing something that only a background image should be used for.

CSS3 opens up new avenues for design and creativity on the web, with the ability to better control the display of content through the browser. One of the major areas of improvement in CSS3 are new methods that can be applied to text and typography to create unique results.

We’ve gathered up some way cool CSS3 typography experiments for you to check out, and hopefully inspire you when using CSS3 in your own projects.

Although I didn’t like CSS animations at first, the more I work with it, the more I do like the way it’s implemented. A couple of days ago, I visited a website called Pubwich. The overall design of the website looks pretty good, but the part with the social media buttons attracted me even more. When you hover a icon, a small tooltip is displayed with the name of the social media. All other icons have a low opacity.

I wanted to take this concept and bring it to the next level using CSS3 transitions. The goal was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit. With that in mind, I was able to create a beautiful social media icons display using CSS3.