Okay, I just did my first “cufón vs. @font-face” comparison and cufón ended up looking way better. These tests are from my online resume where I have been using cufón for quite some time to display the headers in the Kon Tiki Kona font (you won’t be able to tell the difference unless you are viewing this article on its own; if you view it from the front page of the blog both images will appear squished):

@font-face Test

cufón Test

Conclusion

Unless I can find a way to get lettering displayed with the CSS @font-face property to turn up clearer I may be forced to stick with cufón for now.

When I started learning about CSS in 1999 one of the CSS values I learned about was that of overline for the text-decoration property. It didn’t seem to have much to use it for but I did stumble across one website where overline and underline effects were added to links when hovered over.

A short time later I started a site at http://radio.lionking.org and since the title treatment for this animated film has an overline effect in it I decided to add one with CSS to the title of my site. The H1 for the title is as follows:

<h1>R<span>ADIO</span> L<span>ION KIN</span>G</h1>

Using my old school CSS techniques from “The Year 2000″ I set the base font-size for the H1 to 70 pixels (I might change it to an em-based sizing sometime) then set anything wrapped within a SPAN in the H1 to 75% of that. Then the second SPAN (the one that needs the overline effect) has text-decoration: overline; applied to it. The result, which turned out quite well, can be seen below or at the site: Read the rest of this entry »

In twelve-plus years of working with HTML I’ve noticed that many web developers take a crash course in it, learn a few basics, then “move on” to the “real stuff.” While HTML is admittedly easy to learn and not super difficult to master there are still many concepts relating to it which seem to be ignored or are maybe completely unheard of in the web development world. When these concepts are grasped they significantly increase productivity, clarity of code, ease-of-maintenance, etc. But so many people seem content to live without these benefits. In my own development experience I’ve come to be aware of many of these concepts but thought they were too idiosyncratic to bring up to other people. But the book I’m currently reading, HTML & CSS: The Good Parts by Ben Henick and published by O’Reilly Press, crystallizes my thought process on these matters and shows that they really are important to sites of any size. This is not a book to learn HTML or CSS from. It exists at an intermediate or perhaps advanced level but any serious web developer wanting to perfect their coding practices will benefit from reading this book. As I write this I am on page 68 in the book so I may add more to this entry later.

Looking through some coupons for my local grocery store I saw what hit my web developer’s eye as a circular DIV and I wondered if I could create it in HTML/CSS. I realized that it would make sense to make a square DIV (equal width and height) with a border radius set to half of what the value is for the width and height which would then turn each complete corner of the square into a curve and four curves would meet up and form a perfect circle. Even then I imagined I might have to go through a couple hours of fine-tuning to perfect it, if it was even going to work at all, but it turned out to work perfectly right away, with the usual caveat that it only works in browsers that support the border-radius property, or some proprietary variant thereof (i.e., not IE).

For those readers viewing this on a browser with decent CSS support the following style rules:

1. {
2. background-color: #BD8B00;
3. border: 3px solid #990000;
4. width: 200px;
5. height: 200px;
6. -moz-border-radius: 100px;
7. }

should produce a perfectly circular DIV here: Read the rest of this entry »

Just found this web comic at Smashing Magazine which attempts to clear up some of the misunderstandings about XHTML and HTML 5.

Read the rest of this entry »

Firefox 3.5 just got released and with the upgrade has come some enhanced CSS support. The thing that’s capturing my attention first is the -moz-transform property that basically allows you to spin web page elements in two- and three-dimensional space (although 3D transformations are not supported yet; sorry, Z-axis). There is also a Webkit version (for Safari and Chrome) named: -webkit-transform. These are both proprietary versions of the W3C-recommended transform property, which is only for transforming elements in two-dimensional space.

Let’s look at an example. Here is the blog’s logo with a border added to its DIV and a little text thrown in so you can see better what’s happening when it gets transformed:

Like my logo?

And here is the logo transformed: Read the rest of this entry »