Matt Varone Digital Artist

— When you regularly work on similar projects, you often find yourself typing the same code over and over. That’s the reason why many of us use code templates and base style sheets. For example, it’s very common to have a base CSS style sheet with browser resets styles to use as a start point. This practice surely is a great and handy way to speed up our workflow.

I found that its also a great addition to include what I like to call helpers. By this I mean reusable classes that do common stuff like floating elements, adding a border, indenting text, etc. The idea might seem simple and the classes even a bit silly but I can assure you that once you have them incorporated they will surely speed up your coding process.

» Continue reading: CSS Reusable Classes…

— Although navigation bars can be styled very pretty using only text and CSS sometimes circumstances might require them to be image based. The problem this brings is that it’s not good at all to have the navigation’s markup to be actually made of linked images, being one of it’s biggest issue that search engines and screenreaders wouldn’t be able to pick up the text in those images. And it gets even worst if its have to be animated as most of the solutions for that would require Javascript. Having that said, in this short article I will hopefully show you how I create these animated imaged based, navigation bars in an clean and accessible way using images and CSS.

Preparing the XHTML:

Ok, lets pretend we need to have the following buttons: Home, Services, About Us and Contact Us. We will use a list to create the navigation bar, as navigation bars are a list of links, so they should be marked up as such:

<ul id="topnav">
    <li id="topnav_1"><a href="home.html" title="Home">Home</a></li>
    <li id="topnav_2"><a href="services.html" title="Services">Services</a></li>
    <li id="topnav_3"><a href="about-us.html" title="About Us">About Us</a></li>
    <li id="topnav_4"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
</ul>

» Continue reading: CSS Text based navigation bar with images…