8 Examples of Logos Using Only CSS
Wednesday, January 23rd, 2008Categories: Web Design, Web Development
RSS Comment Feed
Trackback
In the event that you’re a developer, and not a designer, I’ve quickly thrown together eight examples of logos/headers that don’t require you to open a single image or vector editing program because they use uniquely CSS. I’ve provided examples and the inline CSS so that they can be inserted anywhere required.
If you’re someone that respects website validation, you’ll be pleased to hear that the CSS validates.
patrickburt
<span style=”color:#000000; letter-spacing:-2px; font:26px/28px Georgia, “Times New Roman”, Times, serif;”>patrick</span><span style=”color:#ff0000; letter-spacing:-2px; font:26px/28px Georgia, “Times New Roman”, Times, serif;”>burt</span>
PATRICK
BURT
<span style=”color:#000000; letter-spacing:-2px; font:bold 26px/16px Arial, Helvetica, sans-serif;”>PATRICK</span><br /><span style=”color:#ff0000; letter-spacing:10px; font:12px/14px Arial, Helvetica, sans-serif;”>BURT</span>
PATRICKburt
<span style=”color:#000000; letter-spacing:-1px; font:18px/28px Arial, Helvetica, sans-serif;”>PATRICK</span><span style=”color:#ff0000; letter-spacing:-1px; font:26px/28px Georgia, “Times New Roman”, Times, serif;”>burt</span>
PATRICKBURT
<span style=”color:#000000; letter-spacing:-2px; font:26px/28px Arial, Helvetica, sans-serif;”>PATRICK</span><span style=”color:#ff0000; letter-spacing:-1px; font:bold 26px/28px Arial, Helvetica, sans-serif;”>BURT</span>
patrickburt
<span style=”color:#000000; letter-spacing:-2px; font:italic 26px/28px Arial, Helvetica, sans-serif;”>patrick</span><span style=”color:#ff0000; letter-spacing:-2px; font:26px/28px Arial, Helvetica, sans-serif;”>burt</span>
PATRICK
BURT
<span style=”color:#000000; letter-spacing:-2px; font:26px/24px Arial, Helvetica, sans-serif;”>PATRICK</span><br /><span style=”color:#ff0000; letter-spacing:-3px; font:39px/26px Arial, Helvetica, sans-serif;”>BURT</span>
patrickburt
<span style=”color:#000000; letter-spacing:-2px; font:bold 26px/28px Arial, Helvetica, sans-serif;”>patrick</span><span style=”color:#ff0000; letter-spacing:-2px; font:italic bold 26px/28px Georgia, ‘Times New Roman’, Times, serif;”>burt</span>
PATRICK
BURT
<span style=”color:#000000; letter-spacing:-2px; font:italic 26px/26px Arial, Helvetica, sans-serif;”>PATRICK</span><br /><span style=”color:#ff0000; letter-spacing:-2px; font:italic bold 26px/14px Arial, Helvetica, sans-serif;”> BURT</span>
That’s all for now, hope that helps. 
Golf onlineshop with Adidas Golfschuhe ready for delivery
Related Posts
- Examples of Web Usability
- Don’t Forget To Kern Your Headers and Logos
- 10 Web Development Tips Part 3 (CSS Edition)
January 31st, 2008 at 1:08 pm
It doesn’t look bad. It even looks slightly good with anti-aliasing turned on. But … but … but … why go through the task of aligning and re-aligning your CSS to make it look good when you can achieve the same effect with a basic image editor in less than a minute?!
And with images you can be sure it is anti-aliased too!
January 31st, 2008 at 1:46 pm
Hi Dennison. Thanks for the comment! These are, in part, a result of me looking at so many blogs who had wordmarks typeset in a single font. It lead me to believe that they don’t have the knowledge or know-how to create images. (Ever see a logo JPG with 50 quality, byeruk). I figured I’d do my part to help. In terms of SEO, text is superior to imagery in terms of importance as well.
April 16th, 2008 at 6:41 pm
I have been looking for a way to do this, as I want to make a logo in text so the site searches better but when I try to use the code you display, it doesn’t work. Do I need the actuall css file?
April 16th, 2008 at 6:49 pm
Hi Mauro,
For some reason, it appears WordPress converts the double quotes to curly quotes, which will not display properly at all. All you need to do is change them all to straight quotes. No stylesheet required.
April 16th, 2008 at 7:17 pm
Patrcik, thanks for your speedy reply. 8 minutes is the probably the record for a trackback reply. Fixed the curly quotes. Ta-Da! It worked. I have been scouring the web for a way to change the font-weight for a First and last name on one line and your little demo has been very helpful. The thickness of a font is supposed to change by assigning a numerical value (font-weight 200;) but it doesn’t seem to work at least in IE7 — normal and bold, without the color, doesn’t seem to do very much.
April 16th, 2008 at 7:21 pm
My pleasure.
This one will take 13 minute. Good to see it worked. I’m not sure if the font-weight is well supported, especially in non anti-aliased departments. Is it possible the font is too small? I know on some browsers that Arial at 9 and 10 point will display the same for bold and normal.