CSS

While fiddling around with the CSS3 box-shadow property, I stumbled across a method to put a double border on a single element. I thought to myself, that’s pretty cool, but obviously, it will only work in newer browsers that support box-shadow.

So I wondered how many different ways there are to create an element that has the appearance of a double border. Naturally, the most common way is by using a non-fluid background image. But that’s obviously not ideal.

So, I’ve compiled five different methods for doing this. Only one requires use of an image; the rest are pure CSS, with pretty good browser support for all methods. For brevity, in the code examples I’ve removed the common stuff like width, height, background, etc.

With all the excitement over the flashy new stuff in CSS3 (like transitions, transforms, and keyframe animations), some other properties may get pushed into the … well… background.

The CSS3 spec has introduced some new properties related to backgrounds. Here’s a quick and dirty description, along with a few examples, of one of those properties: background-clip.

Baseball season is in full swing in North America and I’ve noticed some nice changes to the design of the MLB.com website. In addition to changing their Flash content slider to JavaScript, they’ve also started to supercharge their design with some CSS3 enhancements.

On the game wrap-up pages, there’s some subtle use of rounded corners, opacity, and text-shadow, the latter of which I’ll be focusing on here.

The experience on the site is pretty similar on older versions of IE as it is on modern browsers. Here’s a screenshot of a game wrap-up page in IE6:

This is not going to be an extensive post, but just something to serve as a quick reference, along with some interesting points from the spec.

In another post, I’ll break down CSS3 radial gradients, but for now I’ll just focus on linear, to keep things simple.

After years of developing CSS layouts and reading web design blogs and CSS books, I still can’t believe I come across things that I don’t know about super-common CSS properties.

Maybe it’s just me; maybe I’m just a creature of habit and fail to look closely at things I’m really used to seeing, and I forget that there’s more to CSS than what I’ve personally discovered and learned so far.

Well, while reading Christian Heilmann’s chapter in the Smashing Book 2, I noticed he used the following code snippet when showing some CSS (edited for brevity):

I’ll be the first to admit that I haven’t given this too much thought, so I admit there could be some drawbacks I haven’t considered, but I thought I’d throw the idea out there and see what my readers think.

Suppose we have an element that, for design and flexibility purposes, has no set width, and no set height. But obviously it has content, so in most browsers it expands to hold its content. We want that element to have a linear gradient background using CSS3, and we add a Microsoft proprietary filter to cover all versions of IE.

Here’s the element, demoed live on the page, with the aforementioned characteristics:

As anyone who codes CSS knows, the color property in CSS defines the color of the text in a specified element. I’ve often wondered why this property was not named text-color or something similar.

A comment that was posted today on one of my older articles by someone named Stu Goymer actually instigated my research into this, but he raised an interesting point: Why doesn’t the font shorthand property allow the color to be defined?

Well, according to the spec, here’s what the color property is supposed to do:

When using or researching CSS pseudo-elements, you may have come across different syntax for the :before and :after pseudo-elements, specifically in the form of a preceding double colon, instead of the traditional single colon. This seems a little confusing at first, but there’s actually a pretty simple explanation.

I had assumed that there would be some difference in the way each functioned, but that’s not the case, as the short and long answers below make clear.

Here’s a CSS3 property that has very little support and that I’m not sure has too many real world applications or if it would even be extremely beneficial — the CSS3 resize property.

The resize property is part of the W3C’s Basic User Interface Module, which is in the candidate recommendation stage.

Unfortunately, the resize property is listed in the Features at Risk section of that same document, so it’s quite possible that this feature will be removed if browser-makers don’t support it. Nonetheless, here’s a quick review of exactly what this property is all about so you can decide if it’s of any practical use in your projects.

The main reason CSS attribute selectors have been avoided up to this point is their complete lack of support in IE6. But since IE6’s market share is continuing to slowly but steadily decline, it’s becoming safer to use them.

I’m not going to go through the basics of CSS attribute selectors and their syntax. There are some pretty good resources explaining them, which I’ll link to at the bottom of this post. So if you don’t have at least some grasp of what this CSS feature is all about, please check those out first.

This article will go a little further and focus on some interesting facts and bugs surrounding attribute selectors that you may not have known.