Purely CSS – Faking Different Color Columns

We want to create a layout with two columns, each a different color, yet have both colors extend the the edge of the browser. This is a technique intended for people that want a multi-colored column fixed width eg. 960px layout.

The secret behind this technique is an 3000 pixel width background image don’t worry about file size – it’s only 360 bytes. This image will be the background of the element that contains our two columns. Since it extends beyond even a 30″ resolution 2560 pixels wide, it will effectively fill in the gaps in color between the edges of our two columns and the edge of the browser window…

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

CSS Opacity: A Comprehensive Reference

CSS opacity has been a bit of a trendy technique for a few years now, and it’s been especially frustrating for developers trying to implement opacity (also referred to as CSS transparency) in a cross-browser fashion, because it’s taken a while for the different browsers to finally agree on settings. There is still not a universal method to ensure opacity settings work on all currently-used browsers, but things have improved in the last little while.

This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers…

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

Screencast: Understanding CSS3 Gradients

Creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes…

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

CSS3 In Transition

With the addition of the CSS3 transition property comes a lot of uncharted territory. Never before has it been so easy to bring animation into a usable, standards-based browsing environment. Determining how often and to what degree one should use animation on a web build can be tricky. As we evaluate how to implement animations from project to project, we’ll need to carefully consider how it might affect user experience. Here are a few observations I’ve made from the field…

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

How to Create Inset Typography with CSS3

In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: "Jacob already wrote a Photoshop tutorial on how to do that." That is correct, but this time we are going to do it using only CSS…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS Font Shorthand Property Cheat Sheet

In the past I’ve displayed some serious animosity towards the CSS font shorthand property. I still don’t agree with ever using font shorthand, I do think it’s important that CSS developers understand how it works. I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS in Depth: Floats and Positions

We’ll be discussing CSS positions and floats as well as what the differences are and when it’s best to use them. Both floats and positions deal with the relationship of elements between each other. Without these, padding and margins would be ineffectual…

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

Meet the Pseudo Class Selectors

Pseudo class selectors CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover. They are immensely useful in a variety of situations. Some of them are CSS3, some CSS2, it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support of them. The link-related ones work but not much else. Let’s take a brief look at each one of them. Don’t worry, there aren’t that many…

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

Curtis CSS Typeface

Curtis is the name I’ve given for a family of geometric sans-serif fonts currently in development. Other incarnations exist as Fontstructions: Curtis Heavy and Curtis Pixel 14. This version takes form in CSS. All shapes are rendered by the browser, using a combination of background color, border width, border radius, and a heavily reliance on absolute/relative positioning…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)