CSS Unleashed – Experiments with CSS Logo Designs

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

We order a lot of photographic equipment from B&H Photo-Video and their ads fill most photography and computer magazines. We thought we’d have a little fun on a take-off of their company logo.

Sometimes a simple concept can create a powerful logo look. This logo design is timeless.

This logo design incorporates absolute and relative positioning to move the letter “D” into place and overlap the bottom banner, creating a dramatic logo look.

Using a technique of creating shadows with actual duplicates of the same content and not using CSS filters allows this shadow effect to be used across all browsers. You can find more information about creating such filters on the final page of this series. The style codes are listed at the top of this page in the head section.

In the following CSS logo design experiment, I wanted to play with the dramatic effects of strong blocks of black and the empty space effect it can create when there are feelings of holes in the blocks. If you are using Internet Explorer, you would see “Alphabet” as vertical lettering. If you aren’t, you just see “Alphabet” in a white “block” space.

I feel sorry for the rest of us who rarely use Internet Explorer, so here’s another black and white graphic block example on a similar vein for a CSS only logo look.