CSS ASCII Art Digg & DesignFloat Logos
ASCII art has been around for ages and I have played around with it in the past, see the CSS file for this site, but combine CSS and ASCII art and you've got a whole new form of art. The interesting thing about using text and CSS to make images is how it behaves when you change the text size in your browser. Fonts are vector shapes - that means these drawings can be scaled without any effect on the file size.
The inspiration for all this was Román Coutés CSS Homer and Matthew James Taylor’s Reddit Alien and thought I would have a go at creating some CSS ASCII art of my own. Continuing the social bookmark site theme I made the Digg logo and the DesignFloat Logo.
The Digg logo is made up of ASCII characters, mainly em dashes (—) and vertical bars (|) a few square brackets and the slightly more obscure intersection (∩), subset of (⊂) and superset of (⊃) glyphs.
[
]
—
—
]
[
-
-
|
|
|
—
—
|
?
?
?
The Digg logo made using purely CSS and HTML.
The DesignFloat logo is made up of stacked bullets (•) and a simple plus sign (+). Take as look at this pages source code to see the CSS and Markup.
•
•
•
+
•
•
•
The DesignFloat logo made using purely CSS and HTML.
The above should work in any modern, standards-complient browser I have not tested it extensively as its just a bit of fun. If you have been inspired to do your own CSS ASCII leave a comment below and let us see what you come up with.
This article was posted on 06/19 in CSS, Misc
Save a massive 36% on a subscription to .net magazine!
We love .net magazine (known as "Practical Web Design" outside the UK) and have teamed up with Future Publishing to get our readers up to a massive 36% off a years subscription.
What's the matter cat got your tongue? Be the first to comment...
That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.
Mint
comments
add comment