Active State in Navigation – CSS Navigation Tutorial

I am sure you have been on a website where the navigation has an “active” state, basically showing you which page you are currently on. It’s a great way to let visitors know exactly where they are on a site. This tutorial shows you how to use a CSS sprite to create a navigation menu with normal, hover and active states…

CSS Sprit.es a Free Online Tool to Create Sprites

CSS Sprit.es is an online tool to help web designers and web developers to build CSS Sprites.

If you don't know what is a CSS sprites and are a web designer/developer please, do Internet a favor and consult this great article on A List Apart on the subject.

How to detect screen size and apply a CSS style

I needed today to format the content differently according to the screen resolution of the user. So I thought that just by detecting the screen width using the screen.width property, I could change the stylesheet using jQuery. And so it was. Check the example and continue reading…

Aligning Images The Right Way Using CSS

Images are great for blog posts and chunks of text in general. Even if they’re just remotely relevant, they’ll add some space and make the content more accessible. You want to spice your texts up with images.You can position images however you like, of course, but a nice feature is to have the floating to the left or right, with the text flowing around them.

@font-face and 15 Free Fonts You Can Use Today

Fonts are a huge part of design (as we all know). Text on the web needs to be much more dynamic than in any other media. We have solutions like Cufón, sIFR, etc. but perhaps one of the better options is using @font-face in CSS.

We’ll take a quick look at using @font-face in CSS and 15 great free fonts you can start using today…

15 Ways to Optimize CSS and Reduce CSS File Size

I have gathered a long list of CSS optimization and file size reduction techniques that have been using by most designers/developers. Depend on the complexity of your CSS code, these techniques might greatly reduce your CSS file size, or maybe just a few kilobytes…

Baseline – a designer framework

Build with typographic standards in mind. Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser default behavior, build a basic typographic layout – including style for HTML forms and new HTML 5 elements – and build a simple grid system. Baseline was born to be a quick way to prototype a website, it grew up to become a full typographic framework for the web using “real” baseline grid as it’s foundation…

Supercharge Your CSS with PHP Under the Hood

Cascading Style Sheets is a presentational style sheet language. In that sense, it does not have a lot of the functionality that many developers want to satisfy their programmer instincts. Today, we’re going to learn how to supercharge your CSS by putting some PHP under the hood…

A Crash-Course in Advanced CSS3 Effects

Webkit is one of the few – if only – browser engines that really embraces advanced CSS3 effects. Unfortunately, this presents somewhat of a double-edged sword. We get to play with all of these amazing effects – such as CSS masks, reflections, transitions, animations, scaling, etc. – yet, we can’t truly implement them into our projects until more browsers provide support. With all of that said, it’s important to be on the cutting edge of what’s possible…