Archive for the 'CSS' Category

The smell of HTML and CSS in the morning…

Saturday, November 21st, 2009

A few days ago, Jeffrey Zeldman said: I love the smell of HTML in the morning.

To which I replied: @zeldman I bet it smells like a good cup of coffee! ;-)

And Jeffrey replied: @optimiced How right you are.

This inspired me to quickly create the following illustration in Fireworks:

The smell of HTML (and CSS) in the morning

(NOTE: Coffee cup is re-created from scratch in Fireworks, although it looks like this illustration. The final appearance of my little drawing was also inspired by @molif, for which I’d like to thank her!:-)

A better, more accessible CSS way to hide outline from links

Friday, October 23rd, 2009

When starting a new project, I do not use global CSS resets — like Eric Meyer’s excellent CSS reset. That’s why, I rarely have problems with removed outlines from links.

As you probably know, users which do not use a mouse but navigate webpages with keyboard only, need to see outlines on links when they tab through them. This helps them visually understand which link they will activate.

A fairly new trend is to remove (suppress) this dotted outline on links to make pages look “nicer” to the eye. While design may look “nicer” and more “Web 2.0″ to some, when this outline is removed, the accessibility aspect of this remains, and it is very serious.

But Roger Johansson suggested a much better approach: remove links from :active state only!

This is the article that he recommends to all Web developers:

Better CSS outline suppression

Basically, what happens:

You remove the dotted outline from links which are only clicked with the mouse, while keyboard users will see the outline normally!

How? Just use this bit of code, and that’s it:

a:active {outline:none;}

Excellent tip!

I promise to myself that if I will ever try to remove the outline from links, I will do it in this, much more accessible way! :-)

Anonymous Pro – an interesting font for coders

Monday, September 28th, 2009

If you write code (HTML, XHTML, CSS, JS, PHP, etc.), then the Anonymous Pro monospaced font may be of some interest to you. It’s intended for coders and developers/designers (the 0, of course, is crossed;-) and it includes Cyrillic characters.

Anonymous Pro font

You can download it for free from here:

www.ms-studio.com/FontSales/anonymouspro.html

But my personal preference for a monospaced font is Consolas. As far as I know, this new font by Microsoft can be downloaded for free, too; Consolas is readable and suitable for all kinds of code — in my case, I most often see XHTML and CSS code blocks in it:)


[ optimiced.com is the virtual home of Web & graphic designer Michel Bozgounov | powered by WP & hosted by DreamHost | also available in български ]

1.424 / 26 / 18.25