A logo without images
Sunday, 15 August 2010While we spend a lot of time on software development (MageBridge, Magento, Joomla!), we always try to get some extra time to study new technologies - and see how we can adept them again in our development. Last months, our design guru Hans was busy with CSS3 and also came up with our Yireo logo ... without images.
Our Yireo logo ... without images
As you can see in the top of this page, our Yireo logo is quiet simple in colors (only red and white) but has a lot of strange curves. These curves can be drawn by cutting-and-pasting circles (or rounded rectangles) - one on top of the other. Because CSS3 allows you to give rounded corner-effects to rectangles (div-boxes) this allowed for the reshape of our Yireo logo by only using CSS-code and no images.
The end-result looks kind of cool - at least, if you're using a CSS3-compliant browser. Forget about IE8 or IE9, because they just don't get the concept of CSS rounded corners.
About CSS3 rounded corners
The new CSS3 standard, which is written down by W3C, defines the use of a border-radius, and that's actually where the whole magic starts. Tricks include defining the size of the border-radius (for instance 20px) on a rectangle of 40px by 40px, to create a perfect circle. Or you can stack div-boxes on top of each other, and - by using the right positioning - create curly effects that were previously impossible with CSS.
While we already mentioned above that this doesn't work on IE8 and IE9 (duh), the other browsers also add complexity. While the W3C-standard defines a border-radius, Firefox requires a -moz-border-radius (Mozilla-style) while Safari and Opera (based on the webkit rendering engine) require -webkit-border-radius.
The Yireo font
On the same page where our CSS3-logo is displayed, the text YIREO is also drawn by using a custom font - yet another feature of CSS3. Instead of designing an entire TrueType or OpenType font, we choose to create a very limited font with only 5 upper-case characters. Very cool stuff.