CSS Unleashed - Variations on a Theme

Web Pages and CSS Tips and Tricks and Photography

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.

CSS Experiments
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles


Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles


Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles


Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles

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.

For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the Sage or Poet write, But the Fair Paradise of Nature's Light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature's light.
Keats (1795-1821)
 
random images, photography by Lorelle and Brent VanFossen - copyrighted

Authors, photographers, teachers, and public speakers, Lorelle and Brent VanFossen, travel extensively with their camera and pen in hand to bring you a variety of articles on nature and travel photography including basic nature photography and the photography business, writing, travel, recreational vehicles, web page design, and life on the road. All images, design, and content are copyrighted and protected by law.

You can find related articles to this topic in our Web Pages and CSS Tips and Tricks and Photographycategories. The previous post is CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes and the next post is CSS Unleashed - Experiments with CSS Designs. CSS Unleashed - Variations on a Theme, Issue Number 156, by Lorelle VanFossen, was updated January 29th, 2007.

You can follow comments through the RSS 2.0 feed and you can find more feeds on our Feeds List. Your comment is welcome, as are trackbacks from your site.

Article Series - CSS Experiments

  1. CSS Unleashed - Experiments with CSS Designs
  2. CSS Unleashed - Variations on a Theme
  3. CSS Unleashed - Experiments Playing With CSS Blocks
  4. CSS Unleashed - Experiments with Background Images and Backgrounds
  5. CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More
  6. CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes
  7. CSS Unleashed - Experiments Showcasing Your Photography
  8. CSS Unleashed - Experiments with CSS Logo Designs
  9. CSS Unleashed - Experiments Putting It All Together
  10. CSS Experiments - How They Were Done and More

Next: CSS Unleashed - Experiments Playing With CSS Blocks
Previous: CSS Unleashed - Experiments with CSS Designs

Related Articles

Have Something to Add?

All comments are moderated, so play nice.

The previous is CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes
CSS Unleashed - Experiments with CSS Designs is next