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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Sprites with Inline Images

CSS Sprites is a technique where you use a background-image, a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up page load times.The “sprite” is the single, combined graphic. We can use this same theory, only instead of using background-image to show the graphic, we can use an image right in the HTML itself inline image…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Image Maps: A Beginner’s Guide

While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp.

In this tutorial, we’re not only going to get you up to speed on how to create a CSS image map, but, we’re also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a “tooltip” like popup…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Font-Sizing: a Definitive Guide

Font sizing in CSS sounds as though it should be easy. Until you try it. Many developers use the force; they tinker with the font-size property until it looks right only to find it’s different in another browser. A little understanding can go a long way…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Web fonts and standards

It remains to be seen whether a font-licensing standard and universal browser support for @font-face will kill the middlemen, or whether the middlemen will prove so successful that they delay or stifle the adoption of a font-licensing standard and allow Microsoft to shrug its shoulders indefinitely at supporting @font-face for anything beyond its proprietary EOT file format…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)