Easily Turn Your Images Into Polaroids with CSS3

Yesterday, Jon and I were going back and forth about what to blog about next. Love of CSS and doing something cool with it is kind of our thing and we quickly jumped on a brand new idea: polaroid style images with just CSS. Holy super awesome, Batman!

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

How to Create Simple and Effective Sub Navs with Definition Lists

When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we’re going to share with you a fast, lightweight method for how we’ll use CSS to do it…

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

Really Simple CSS Trick for Equal Height Columns

This tutorial describes a really simple CSS trick to implement a fake equal height columns effect using the CSS properties position:absolute and border. Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post…

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

xCSS – OO CSS Framework

xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features. But, most frameworks are bulky and inflexible, aren’t they? Not xCSS! It’s lightweight and seamlessly integrates into any existing workflow. Aside from that the CSS overhead is getting reduced while your XHTML attributes remain semantic…

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

How to distribute elements horizontally using CSS

In this post I want to reply to a frequently asked question that I receive from my readers about how to distribute horizontally a certain number of elements within a main container using CSS. This problem is not particularly complex and can be solved simply using the CSS selector :first-child…

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

Becoming a Font Embedding Master

I’ve spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process. Here’s the findings…

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

Methodic Approach to CSS Coding

Which approach is better to write CSS code? In general I always prefer to use a methodic top-down approach I want to present you in this post. I called this process Four Bubbles Model.The model is based on four progressive phases that helps you quickly develop CSS files and maintain a better control of code you’re writing. The following picture illustrates the four main phases that compose the model…

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

Interactive CSS3 Generator

Many browsers have been experimenting with new custom CSS properties lately. Keeping track (and learning how to use them) can be a bit of a challenge.

Via WidgetPad comes a nifty CSS 3 Generator that helps you understand the new CSS 3 features in Webkit with an interactive tool that will build up and show how each new property affects an element. Here, for example, we see the results of applying rounded corners, box shadows, reflections, and a transform to an element…

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

CSScaffold – a CSS Framework Written in PHP

CSScaffold is a CSS framework written in PHP. Rather than try and create a static framework that uses the standard abilities of CSS, like Blueprint, it uses PHP to extend CSS. The syntax looks and feels exactly like CSS, except that you have some new, powerful abilities.

The best part is that all of this is done transparently. You can drop Scaffold into your site and you’ll instantly have access to all of its functionality…

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

Purely CSS – Faking Minimum Margins

Sadly, min-margin is nonexistent in the CSS world. I was okay with that – until recently, when I realized I needed it. After a fair share of general thought and Google usage, I arrived upon a solution, which I invite you to check out below. So what situation would you need min-margin in? Take a second to look at the demo to see a before and after…

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