CSS3 Pushing the Limits

Chapter 15

Creating Practical Solutions Using Only CSS3

Throughout this book I've introduced an extensive range of new CSS3 features—some right on the cutting edge and highly experimental, others more mature and already finding a place in the real world. I've explained what they do and how they work individually, but now it's time to bring them all together to showcase their immense power and capabilities and to really maximize their potential.

In this chapter, I show you how to create practical, aesthetically desirable, and interactive features that would usually be possible only through use of JavaScript (and plenty of it). Of course, these pure CSS examples show what can you achieve in an ideal world of complete browser support, but in the real world, it's just not yet feasible to implement such functionality with the need to maintain some kind of support for the older, noncompatible browsers. However, while the world waits for the bliss of browser support utopia, these experiments serve as examples that showcase just how far CSS has come and what the future holds for CSS development.

So, as I alluded to previously, you should now be well versed on the theory, but this chapter is all about the practical because it walks you through the creation of three common interactive elements that typically run on JavaScript, using only HTML and CSS3. The first of these examples is relatively simple as I describe how to create tabbed content. The second is more substantial as I walk you ...