Developer blog Archive
Category ‘Webdesign’
January 22nd, 2011: On CSS pseudo elements ¶
With the end of Internet Explorer 6 drawing near and a new era of CSS3 coming, knowing how the so-called CSS pseudo elements work is crucial for creating modern, beautiful and semantic code. The concept of pseudo elements already existed in the CSS1 specification with the two pseudo elements :first-letter and :first-line.
However, I want to concentrate on the other two pseudo elements which were introduced in CSS2. They were quite underused, mainly because Internet Explorer 6 just refused to understand them. With the upcoming death of IE6, they have regained popularity among web designers. I’m talking about :before and :after.
January 8th, 2011: Reflecting text with pure CSS3 ¶
While designing some new site, I’ve decided to use some text reflections on the header in my designs… I’ve already created the header using @font-face and I didn’t want to create an header image, so I thought… hey, just try to imitate the reflection with CSS only.
The HTML code is very straight forward and semantic:
<!-- HTML code -->
<h1 class="reflected">Reflected Text!</h1>
December 30th, 2010: Smoothing text on Windows ¶
Font rendering on Windows is (still) really hideous and the way fonts gets rendered just can’t get out of one’s head, because it’s too awful and it haunts you in your nightmares. Especially big sans-serif fonts look unbearable. It really sucks and you can’t really do anything about it at all. One can use Safari on Windows with Apple’s font rendering engine… but I, myself, can’t survive with my favorite browser of choice: Firefox.
Last week, when I took a peek at some examples of Google’s Font API on Windows, I got goose bumps. The font rendering was too bad. Typefaces aren’t smooth at all. It looks like crap. You can’t make the web beautiful like that.
To smooth the text I have come up with a fairly simple solution. I’ll just use text-shadow, apply some blur on it and the text will be as smooth as butter. Well at least in theory.