Multiple Backgrounds and Borders with CSS 2.1

Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required…

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

CSS – The Space Combinator

Combinators are an overlooked part of CSS development. Most juniors don’t even know they are making use of them, others are unaware of their full potential and let’s face it, even most professionals don’t really know about the ins and outs of CSS combinators. It’s all connected to that little piece of nothingness in between class names, so let’s start by taking a good look at the space (descendant) combinator…

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

The CSS white-space Property Explained

CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.

This article will attempt to describe, in a very practical, no-nonsense way, the different values for the CSS white-space property, and how each one can be used. I’ll do my best to avoid overly-technical jargon, but with this property, it’s not easy to explain without sounding overly-complex…

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

Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS…

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

The Principles Of Cross-Browser CSS Coding

In this article, I’ll be describing what I believe are some of the most important CSS principles and tips that can help both new and experienced front-end developers achieve as close to a consistent cross-browser experience as possible, with as little CSS code as possible…

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

Pure CSS Reflections

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property. I’ll show you how to use it in today’s video quick tip…

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

Wrapping Long URLs and Text Content with CSS

By default, the white-space property is set to normal. So you might have problems when trying to force long URLs and other continuous strings of text to wrap. To force long, continuous strings of text to wrap within the width of our <pre> content or other block-level element, such as <div> and <p>, we need a different value for the white-space property. Here are our options…

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

The Multi-Column CSS3 Module

For over six years, CSS3 columns have been available to us; yet, strangely, they’re rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that – again – no support in Internet Explorer. But that’s okay! The world will not end if IE users see one longer paragraph. I’ll show you how to use this helpful module in today’s video quick tip…

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