with Lorelle and Brent VanFossen

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.

A & B
An Alphabet Company

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.

Taking Your Camera Taking Your Camera
on the Road on the Road
With Lorelle and Brent VanFossen
Taking Your Camera on the Road Taking Your Camera on the Road
With Lorelle and Brent VanFossen

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.

Seattle, Washington

Dedicated to the letters of the world


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.


Seattle, Washington

Dedicated to the letters of the world


I really believe that the old calling card, a business card with your name and contact information, is still one of the most elegant designs. I recreated that look in this CSS only logo design using borders and clean lines and spacing. For more examples of fun with CSS borders, see my CSS design experiments with borders.

Alphabet Company
A Subsidiary of Letters Soup

Changing the world one letter at a time


Using some of the CSS design experiments with borders, I created a more visual CSS only logo design, a colorful keyword focused design.

Budgets Taxes Investments

HTML Character Entities are great substitutes for simple symbols. You can have fun with CSS logo designs using the character entities and shades of interesting colors.

» » »Fred Smith Artistic Company « « «
» » »Fred Smith Artistic Company « « «
The Heart Goes On And On Company
Girls Love Diamonds Inc.

One Trackback

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.