with Lorelle and Brent VanFossen

CSS Unleashed – Experiments with CSS Designs

W3c.org's CSS Check Icon
*And How To Do Them Well!

We decided to offer up some of our own experiments for you to learn more about CSS and for us to have a little fun, too. The following designs were completely created without tables, using only Cascading Style Sheets (CSS) for positioning and presentation. You are welcome to copy anything within these pages, though we recommend you have some fun of your own and take these experiments a little further with your own colors and experiments. If you come up with something really cool based on these designs, we’d love to see it and possibly add it to our offerings. Let us know at via the comments below.

The process, as you can imagine, of creating these CSS boxes, headings, menus, table of contents, pull-quotes and blockquotes, and titles came with a serious education into how Cascading Style Sheets work. We’ve shared notes about how these were created in our comments next to the codes and the bigger lessons at the end of this series of experiments where we explain how we created these creative CSS designs so you can create your own.


As with all experiments, these come with some warnings. They are not perfect and not perfectly viewed on every web browser. They have been moderately tested over the years and the various browsers. If your browser sees something garbled, please let us know so we can fix it.

These do have “breaking points”, points where the design might not hold up under pressure. These points are usually based upon screen width and resolution. To see where a design might “break”, resize your browser’s window or change the font-size specifications (From Menu > View > Text-Size).

The CSS in these experiments are over-coded. There are always simplier ways to do things, so streamline the code as you see fit. We are still playing around with these, so we’ve left much of the code inline without relying upon style sheets so we can tweak at will. To use these on your page, check out our examples of how to move the inline coding to style sheets.

To maintain a consistent look with these experiments, we used generic fonts available on most computers and a relative font size. We decided to preserve the size of the examples by using font sizes in pixels. In general, the fonts should not resize with the change in font-viewing size set by the browser. We recommend you change the font and font size specifications to meet your own needs.

We hope you enjoy and use our experiments and learn a bit more about the creativity of CSS as you go.

To see how these CSS experiment 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.

Many magazines highlight headings, sections, or departments with a reverse solid colored background with white or complementary text.

In this series, we simply change the backgrounds and letter spacing.




In the example below, we’ve eliminated the background color and added a border line to the bottom of each element. Watch your padding and margins to line up the borders. MSIE adds 3 pixels to containers, which makes this a challenge to reproduce on every brower perfectly.


While this design looks different, it only features a uniform background color.


Using the same techniques, we can create solid lines of background colors and stack them on top of each other within a single division.


The two following CSS examples use the same techniques of stacking divisions in a group.

50 Ways to Arrive Refreshed and Ready
50 Ways to Arrive Refreshed and Ready

Magazines also graphically play with text, messing about with line-height, letter spacing, and more to create more interesting headings, sections, and department titles.

Wide letter spacing makes this one interesting.


Line height creates this magazine look which can be changed to create some interesting overlap effects.


In this dramatic example, we’ve taken a design right off the cover of PC World computer magazine and put in our own text. It uses line height, color and font sizes in spans to create the final results. While it looks like a graphic, it is text. Try selecting the words with your mouse. Well, all is text except for the CSS verification logo, showing you how to incorporate an image into the text graphic.

W3c.org's CSS Check IconCSS*
*And How To Do Them Well!

Combining some of the techniques, we used colorful spans along with one span featuring a background color which makes the text look like it is in a box. I updated the solid color background with a gradient style not an image background available with CSS3 using the technique described by WebDesignerWall.

The Color Balancing Act
made easy!

Below the CSS green graphic was inspired from an advertisement for Biolage Matrix hair products and features the effects of playing with borders and background colors. The “borders” on top are DIVs with colored backgrounds, no borders. The bottom DIV featuring “nature” has a darker top border and bottom border of yellow. I was a purist, I could have put all the background effects in divisions but I wanted to keep some of the coding simple by using a borders on one DIV. The “E” in Nature is in a span to color it yellow to match the bottom border. It makes for an interesting header effect and one that could set an entire look for a web page design.


Borders around headings, sections and department titles can create dramatic attention getting results, too. Borders are more than lines around boxes. Borders are visual lines around objects created both with and without using CSS order styles. Borders aren’t limited to only one per division container. You can layer borders, use selective borders, play with colors, and create lines and geometric shapes with borders. Use your imagination with CSS borders, background colors, and more.

Lines above and below text add accent and drama to the words. These are great for headings and titles.


Going back to the basics, this simple box features a dashed border on a container inside of the parent container. The parent container features a 10px padding, which makes it appear like a border edge. Could be an interesting coupon effect.

Help Nature and work on with her; and Nature will regard thee as one of her creators and make obeisance. And she will open wide before thee the portals of her secret chambers, lay bare before thy gaze the treasures hidden in the depths of her pure virgin bosom.
H.P. Blavatsky (1831-1891)

Borders aren’t limited to one, or one color. This CSS design features three borders and plays with padding and border width to create its border effect. I’ve also used the CSS first-letter pseudo element style with the paragraph to enlarge the first letter of the first word in the sentence.

When you photograph something, don’t accept it as the end result; there’s always a next step. But repeat something only if you can improve on it. Otherwise, you must move on. A photographer must change to show change, and it is as much the photographer’s challenge to show change as it is to preserve what is. A picture must be a question as well as an answer.
Ernst Haas

Using the same above design, we’ve changed the colors of the borders to create a dramatic and a bit over the top border design. Use your imaginaton and use complementary or contrasting colors.

When you photograph something, don’t accept it as the end result; there’s always a next step. But repeat something only if you can improve on it. Otherwise, you must move on. A photographer must change to show change, and it is as much the photographer’s challenge to show change as it is to preserve what is. A picture must be a question as well as an answer.
Ernst Haas

A border doesn’t have to be on all four sides. This CSS design experiment features a top border on the inside container with a large dashed border.

The shadow’s the thing. Outside, shadows are blue, I read, because they are lighted by the blue sky and not the yellow sun. Their blueness bespeaks infinitesimal particles scattered down infinitesimal distances. Muslims, whose religion bans representational art as idolatrous, don’t observe the rule strictly; but they do forbid sculpture, because it casts a shadow. So shadows define the real.
Anne Dillard Pilgrim at Tinker Creek

Right out of a magazine design, the outer parts of this heading feature thin top and bottom borders. The middle section is simply a container with a border and background color. The three elements float to the left of each other to create the illusion of the two outer sections passing underneath the middle container.

Inside the
of Your Dreams

Going back to the top border only design, we’ve layered this CSS design with four colorful top borders. This is good as a blockquote or pull-quote design, too. Notice the arrows around the author at the bottom of the quote. Extended character entities were used to create these arrows.

Surely there is something in the unruffled calm of nature that overawes our little anxieties and doubts: the sight of the deep-blue sky, and the clustering stars above, seem to impart a quiet in the mind.
» » » Johnathan Edwards (1703-1758) « « «
An artist chooses which subjects to portray; this is a way of praising… ultimately, one’s work is merely a magnifying glass offered anyone looking in our direction.
Friedrich Nietzsche

We’ve stepped up the design by adding a left border to each of our side borders to create a frame only on the top and left sides.

An artist chooses which subjects to portray; this is a way of praising… ultimately, one’s work is merely a magnifying glass offered anyone looking in our direction.
» » » Friedrich Nietzsche « « «

The examples above show the use of borders to create color around the edges. By introducing a background color and padding, the background color of each division acts as another border color, adding more drama to the CSS design.

Though we travel the world over to find the beautiful, we must carry it wihin us or we find it not.
» » » Unknown Author « « «
Creativity is dangerous…Its pleasure is not the comfort of the safe harbor, but the thrill of the reaching sail.
» » Robert Grudin « «

We took away the background colors we added and kept an even 10px padding on each division container, then made the border lines 2px thick, creating a very dramatic container, good for quotes or headings.

As little children we all start out with eyes close to the ground, seeing, feeling, smelling, exploring, and learning. Seeing with a camera is the best way I have found to get close to the earth again.
» » » Earnest Braun« « «

The following two examples use a technique of creating geometrics with borders. This technique is explained very well by Infimum Examples of CSS Slants Using Borders.

Science tends to be more an intellectual exercise, tending to separate the observer from the observed. Art tends to intergrate the subject and the observer.
Story Musgrave
One of the hardest things in this world is to admit you are wrong. And nothing is more helpful in resolving a situation than its frank admission.
Benjamin Disraeli

These next two designs were inspired by a web page layout. I didn’t like what they did, so I played around with it until I found something I liked. This is part of the fun of experimenting and making it your own design. The blocks feature borders on the sides of different colors. Look for the style classes in the header of this page under blackblock. The first one is a very simple look that could be used as a heading and the second one uses the style as a menu with css rollover or hover colors.

Test Yourself. Are you paying attention? It is time to ask yourself. Just be.
Your loneliness is your Self wanting to make friends with itself. Your loneliness is your Heart wanting to sing to itself. Your loneliness is your Being wanting to dance with itself.
Rusty Berkus, Appearances

Another challenge in CSS designs, we found this design on a web page done with tables and wondered if we could recreate it as pure CSS. Well, we did. This is not the most user-friendly and totally accessible CSS design experiment we’ve done, but it was a serious challenge. We’ve added the white-space: nowrap to keep the whole thing together, so it won’t wrap when the screen width shrinks. If you choose to use this, change the height in the last division to accomodate the content you add, and also change the height on the other divs within that set, and add 10px for padding, or whatever your padding choice. If you change the width, since it is set in total absolutes, you have to change the widths throughout to add up appropriate. This one needs a lot of care and feeding, but it is a very cool geometric look.

An additional note. I first designed these using Internet Explorer versions that were pretty poor, but then came Internet Explorer 6 which broke all web standards conventions, and these designs. Thankfully, as I update this in 2011, the war on web standards has been won and most of these designs, including this one that relies so heavily on precision sizes and spacing, work.

Backgrounds & Borders Games


  • Posted April 16, 2005 at 9:03 | Permalink

    Great. Just that.

  • Bruce
    Posted April 26, 2005 at 16:25 | Permalink

    Cool. I “learned” CSS in the last few months, but there is always much more to learn. I viewed this in Firefox on Linux but I’ll have to give it a view under Windows XP and IE also. For me that was one of the biggest struggles originally to get multiple browsers to work similarly with CSS. I got to your site by following one of your postings on the WordPress Support forum. I am just starting with WordPress this week. I am integrating it into an existing site with its already existing layout and user account management in place. I also intend to make it multi-user, multi-blog, single database capable. The forum and codex is proving very valuable. Thanks

    P.S. I like your site. One small small observation, with your fixed with photo at the header the div with the content should be limited to that width so that the text and menu options are visible in an expanded window :)

  • Posted April 26, 2005 at 22:43 | Permalink

    Good luck on your usage of WordPress and I’m glad that my examples help. It’s a tough road you’ve set yourself for, and maybe multi-user, multi-blog, CMS style thing should not be done with WordPress. It’s like trying to fit a square peg in a round hole with sledge hammer. WordPress is brilliant, easy to use, and very capable, but I had to make MAJOR compromises and sacrifices in order to get my site to work within it. What you want to do…whew!

    And thanks for the comment on the design element, but I don’t know what you are talking about. This site has been tested on dozens of different browsers and computer systems, and there is no picture in the header. There is a page background image and a picture in the sidebar that changes, so if you could be more clear, then I can examine the issue.

    Everything except the sidebar is set to be completely flexible with borders and width, so I’m not sure what you mean by “fixed width”.

    Thanks again and I hope you learn something from these efforts. They were quite the instructional endeavours.

  • Bruce
    Posted April 27, 2005 at 8:23 | Permalink

    With WordPress I think there is enough good stuff there that it is at least worth a try. I’ll give it a few days and see how it works out. If I make any real progress I will post back to the support forum. I will attempt to do as much as possible with the plug-in architecture but that will not be flexible enough to do everything I want. The first thing was just to be able to have a page other than index.php, but I think I have that resolved now.

    On your site I was just referring to the category list menu (Home, Doing, Being, etc.) over the fixed width background image. Because the text is white for the categories and they are positioned to the right, they are not visible if my browser window is larger than 1024. My display is 1400×900.

  • Posted April 27, 2005 at 14:46 | Permalink

    I did some checking, and while it isn’t pretty, I set the background to repeat-x. Few people are past 1024 width, so it’s best to cater to the few, and I don’t want to change the white background nor change to a fixed width, which must make you crazy. I might have to, though. You gave me some things to think about. Thanks.

    I hope you aren’t designing with that screen width, but taking into considerating the narrower view of the masses. I used to have to force my entire montior resolution to 640 in order to view a tested page in the lower rez, but Firefox’s Web Developer tools makes it so easy to test now.

    And this might help you, Page Views is an article I wrote showcasing a single page viewed under many conditions. There are a lot of helpful links there that might help you with your plans, too.

    Good luck with using WordPress as a CMS. It was a long road for me but it works for me. I’m pushing every limit, though.

  • Jimmy Turtles
    Posted May 3, 2005 at 11:04 | Permalink

    Your site is wonderful and funtastic.

  • Posted May 3, 2005 at 12:55 | Permalink

    This is some amazing work. However I don’t think it would gain acceptance in a magazine-type site because big fonts always serrate the curved edges. Maybe some day monitors and fonts will improve…

  • Posted May 3, 2005 at 21:02 | Permalink

    Thanks for the comments. A “magazine-style” web page has it’s own rules, but if you want some interesting looks for your own web page, that’s what these experiments are for. They are just based upon things I saw in newspapers, magazines, television, books, and all over that I collected up for a few months before trying to emulate them with CSS, proving that amazing designs can be done with CSS free of tables, and even, in some case, free of graphics.

    When these were published a couple years ago, there was only one other site doing anything even close to this. Now, they are more common place as people are really pushing the envelope with CSS designs.

    I challenge everyone to try their own CSS experiments, pushing their CSS skills and knowledge to the limit. It’s an amazing lesson to see something done by conventional means and figure out how to do it with CSS. It challenges the mind to think design with words and not graphic images….all of my creative skills improved from this experience.

  • Posted May 4, 2005 at 14:13 | Permalink

    You know, I just realized that most of you only see this page and not the rest of the more than 8 pages of CSS experiments. These are only the tip of the experimental ice berg of the work I did a couple years ago to push CSS to it’s limits. There are several hundred different CSS design examples!

    To see more, check the links I’ve now added to the page or visit the CSS Tips and Tricks Category for a full listing of some great CSS designs and experiments.

  • Posted May 27, 2005 at 6:56 | Permalink

    This really is brilliant. I have been an early fan of CSS, (since 1999 I guess ;) and so nice that you have showcased what can really be done with CSS.

    And you have a great site too. So much content. I’m surely coming back regularly.

    Good that we share two common interests – Photography & CSS :)

  • Posted July 26, 2005 at 16:13 | Permalink

    Your pages are not viewable with IE6 (WinXP SP2).

  • Posted July 26, 2005 at 20:26 | Permalink

    >>Not viewable with IE6<<

    I’m sorry you can’t view some of these experiments with your browser. They were designed with IE6 in mind and work great under all upgrades. They also are viewable in Firefox, though Firefox doesn’t recognize most of the IE filters.

    These are “experiments” because they show what CSS can do and how to push a browser beyond it’s limits, which may break sometimes. Of the hundreds of experiments on these pages, only a few break down with browsers other than IE6, but most are very viewable with Internet Explorer. They have been tested under all the various browsers and for the most part, the majority of experiments “work”.

    Someday the push for web standards will apply to all browsers so we can all “see” what CSS is capable of.

  • Lawrence
    Posted October 1, 2006 at 18:49 | Permalink

    great in Safari, but pages not correctly viewable on Mac IE 5.x

29 Trackbacks

  • […] from davidbisset.com

    99 Things You Didn’t Know You Could With CSS Interesting experiments, but nothing earth-shattering.

  • By boredumb » Chinese Food for the Soul on May 3, 2005 at 12:48

    […] give us up to the second updates from the floor. Did you know that you can do as many as 99 things with CSS? Rumor has it that they’re working on the 100th thing, but I’m not […]

  • […] Apples to Oranges has info on making bar graphs and charts with CSS, a technique I experimented with ages ago in my popular series of CSS Experiments in the experiments with creating Backgrounds, Bar Charts, and Graphs with CSS techniques. […]

  • […] « « CSS Unleashed – Experiments with CSS Designs International Standards » » Connect the Dots […]

  • […] CSS Design Experiments […]

  • […] My very popular series on CSS Experiments in Design consists of almost a dozen pages with hundreds of different design experiments. Most of these feature inline styles, but a lot of them had their own styles in a separate style sheet. The styles sheet was huge. With about a thousand articles on my site, why should I include over 30K of styles in my site’s default style sheet when I only need them for a handful of articles? […]

  • […] You can add more style references, like DIV or SPAN, to the title to further its design elements. From here, the design elements are infinite. […]

  • […] You would think that exciting and innovative articles like CSS Unleashed – CSS Experiments with Design Elements, which took months to produce and is still one of the best single resources on the web for showcasing CSS design elements for web page designs, would attract a lot of attention. You would think that our online books on photography, “How To? What For? The Basics of Nature Photography”, “I Long to Be Close to You: Closeup Nature Photography Techniques”, and “Bows and Flows of Angel Hair: Photographing Patterns in Nature” would consistently draw people into our site. Not into photography? Then the article series on “Know Before You Go”, about travel planning should attract a substantial number of readers. Right? […]

  • […] CSS Experiments – Web Fonts and Embedded Fonts Learning and Web Pages and CSS Tips and Tricks By Lorelle VanFossen CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] CSS Experiments – How They Were Done and More Learning and Web Pages and CSS Tips and Tricks By Lorelle VanFossen CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] 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. 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. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] CSS containers and boxes can be used to create a wide range of blockquotes, pull-quotes and quotes in general, highlighting a bit of content to attract attention. These can also be used as boxes to highlight tips, advice, or sidebar information with the help of a few bullets in a list. We want to push the limits on what you can do with CSS containers and boxes with our CSS experiments. Inspiration for our CSS experiments come from a variety of magazines and printed informational material, using their graphic use of text and color as inspiration. Remember, none of these use tables, only CSS to create the design. Color and text style always plays an important role in creating dramatic and attention-getting blockquotes and pull-quotes, but also notice the use of space around and in-between a pull-quote. Empty space can also enhance the impact of the quote. And remember, these are CSS experiments, and they may break in different browsers, page designs and layouts, as well as column widths. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] Think of CSS divisions and spans as children’s toy building blocks. Give them a background. Fill them with text. Flip them around and see what you can come up with through the creative use of CSS in your CSS experiments. As with many of these CSS experiments, they don’t all work equally under different web browsers. Sideways text using the flipv and fliph filters don’t work equally across the browsers. Currently, these will only work with Microsoft Internet Explorer as they are proprietary to that browser. These can also “break”. Narrow the window size or change the browser’s font size and these might fall apart. Still, they are CSS experiments and ideas worth exploring. If you find a way of improving or expanding upon these CSS experiements, let us know by leaving a comment below. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] As nature and travel photographers, we are always looking for interesting ways to showcase and display our photographs and images, whether on their own in a photo gallery display online or within our articles. These are some examples of the CSS experiments with CSS design that we’ve been working on to showcase and display our photography, and to give you some ideas for your own CSS experiments with displaying photographs and images in your website, blog, photoblog, or photo gallery. As with all CSS experiments, these are overcoded and may not work exactly the same on all browsers. We do our best to make sure our CSS and HTML meets web standards compliance, but not all browsers are equal. Test these thoroughly to make sure they withstand the rigors of your design needs. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] The background element in CSS offers a wide range of possibilities including embedded background images, content over backgrounds, and backgrounds as art. As you play with your CSS experiments with backgrounds and background images, it’s important to understand how they work, where they work, and how to control their appearance. Let’s start with a few CSS experiments in placement. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] There are many ways of arranging content. Articles often feature tip boxes, pull-quotes, blockquotes, lists, tables of contents, and menu items helping people get the information they need within and without of the scope of the article. These can also include step-by-step instructions pulled from the article to help take people through the process. We decided to experiment with a few of these content handling designs to find ways of moving beyond the pull-quote or blockquote to actually presenting bits and pieces of information in an interesting and eye catching fashion with CSS as part of our CSS experiments. In general, the HTML is simple, but the design elements can be sophisticated. As mentioned before, these are CSS experiments, so test them thoroughly within your own design to make sure they work. Most of these content handling designs begin with a list. It’s what you do with the list that makes the design interesting and part of our CSS experiments. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] We’ve shown you some of our experiments in CSS designs, playing with text, borders, displaying your photography, pull-quotes and blockquotes, lists and menus, logos, and more. Now we want to show you some of the tips and tricks we learned from doing these experiments and how to turn the inline CSS code into style sheets which complement the HTML tags and streamline the coding process. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] A few years ago I did an extensive series on CSS design element experiments and a lot of people are having trouble figuring out how they work. I will help you to understand how to copy and emulate these design elements to incorporate them into your blog, whether or not you use WordPress. […]

  • […] Some nice experiments with css. Great for headers read more | digg story […]

  • […] We’ve played with blocks and a wide variety of CSS experiments designs. Now let’s apply these techniques to creating business and web page logos. Your website should have a logo, whether it is your company logo or one specific to the web page. Our company is called VanFossen Productions, but our sebsite is called “Taking Your Camera on the Road”. We’ve created a graphic logo for the site, and below we’ve made a few attempts to reproduce it with CSS as part of our CSS experiments. A pure CSS logo loads faster and saves bandwidth. But there are some limits. Unless you use embedded fonts, a technique limited to only a few web browsers, fonts are limited to a select few fonts available on most people’s computers. With a limited selection of fonts, the logo designs must concentrate on the graphic display of the content rather than the typographics. That still leaves the field wide open to a powerful imagination and a wide variety of CSS experiments in design. For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together. 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. CSS Experiments CSS Unleashed – Experiments with CSS Designs […]

  • […] CSS Design tips Posted on October 27, 2008 by thinkrajesh http://www.cameraontheroad.com/index.php?p=153 […]

  • […] for her early innovative explorations into the possible in web design elements with her series on CSS Unleashed – Experiments with CSS Designs and other web designs, development, and standards. She works with many individual businesses, […]

  • […] for her early innovative explorations into the possible in web design elements with her series on CSS Unleashed – Experiments with CSS Designs and other web designs, development, and standards. She works with many individual businesses, […]

  • […] CSS Unleashed – Experiments with CSS Designs […]

  • […] to see some great CSS designs and elements which you can incorporate into your WordPress blog, see CSS Experiments, a series I wrote on what is possible with CSS. The instructions are in each page’s source […]

  • […] CSS Unleashed – Experiments with CSS Designs […]

  • […] CSS Unleashed – Experiments with CSS Designs […]

  • […] my CSS Unleashed – Experiments with CSS Designs series done many years ago, I have many examples of how to style content and graphics using only […]

  • […] work life. Two months before, I’d finally completed a twelve article series called “CSS Unleashed – Experiments with CSS Designs, creating one of the most extensive examples of CSS artwork at the time. I’d spent several […]

Post a Comment

Your email is kept private. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.