99 THINGS
YOU DIDN’T
KNOW
YOU COULD
DO WITH CSS *

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

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.