with Lorelle and Brent VanFossen

CSS Unleashed – Experiments with CSS Designs

99 THINGS
YOU DIDN’T
KNOW
YOU COULD
DO WITH CSS *
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.

HOT! | PURE CSS DESIGNS

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.

 
BLUE WHITE
 
REDWHITE
 
REDBLUE
 
REDBLUE
 
HELLOTHERE
 
HELLOTHERE
 
HELLO
THERE
 
HELLO
HELLOTHERE
 
HELLO
THERE

HELLO

 

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.

 
HELLO
THERE
 

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

 
FLORIDA | BIRDING SPOTS
 

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

 
PHOTOGRAPHY
NATURE AND WILDLIFE
 

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

TRAVEL
TRAVEL TIPS FOR THE TRAVEL WEARY
50 Ways to Arrive Refreshed and Ready
 
TRAVEL
TRAVEL TIPS FOR THE TRAVEL WEARY
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.

SKIPPING ACROSS THE STONES OF LIFE
WE FIND SIMPLE THINGS ARE THE BEST
 

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

 
50
GREAT
IDEAS
 
50
GREAT
IDEAS
 

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.

 
20 THINGS
YOU DIDN’T
KNOW
YOU COULD
DO WITH
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.

 
NATURE

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.

 
LIVINGNOW
 
 
DREAMA LITTLEDREAM
 
 
LIVINGNOW
 
 
DREAMA LITTLEDREAM
 

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
Camera
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.

TalkingListeningConversationQuestionsAnswers
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
 

13 Comments

  • WordPress › Error

    There has been a critical error on this website.

    Learn more about troubleshooting WordPress.