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!
In this tutorial you’ll learn how to:
- Work with CSS sprites
- Position stuff relative to the browser window, rather than the page
- Create CSS3 rounded borders
- Add CSS3 drop shadows, and
- Create cross-browser translucent gradient backgrounds (using no images!)
Ready? Let’s get started!