CSS Unleashed – Variations on a Theme

We’ve been looking at a variety of CSS experimental examples, and now I’d like to take you through a design journey. These ideas come from magazines and advertising material, but they also come from a simple idea that is then played with to create different effects. Play with these effects and you have variations on a theme, each one special.

To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.
There is no rule that says you can only have one “look” to your page. You can have several different types of pull-quotes and boxes styles, as long as they complement each other. Sure, too many is too much, but variations on a theme can give you different options to choose from, picking the appropriate design for your content.

Some of these look the same: Some of these CSS experiments that “look” the same in your browser may look different in other browsers. Some use filters to create dropshadows and other effects which will not appear in Firefox or other browsers. Try viewing these pages with different browsers to see the different effects.

Let’s try a different type of pull-quote and see how many variations on a theme we can come up with. The first four examples play around with different fonts, most of which are found on most computers around the world. If you don’t see a change, your computer doesn’t have that font. But scroll down, the variations on the theme continue without being dependent upon the fonts.