CSS Tutorials

CSS3’s ‘space’ and ‘round’ Values for background-repeat

on | 8 Comments

CSS3 space and round Values for background-repeatIf you’ve seen the code for CSS3 border images then you’re probably familiar with the space and round values for the border-image-repeat property.

Well, in the CSS3 spec, the well-known background-repeat property now includes those two new values (in addition to repeat, repeat-x, repeat-y, and no-repeat — all of which most CSS developers will be thoroughly familiar with).

The “inherit” Value for CSS Properties

on | 5 Comments

The inherit Value for CSS PropertiesIn CSS, there are some properties that are naturally inherited from parent to child. This is useful because it prevents needing to define that same property for all children.

For example, the font-size property can be set (as it often is) on the <body> element, and virtually every element that is a child of <body> will inherit that font-size setting.

(photo by Mariska van Brederide)

CSS3 Transitions Without Using :hover

CSS3 Transitions Without Using :hoverUp to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class.

These types of transitions are pretty common, and you’ve probably seen or used something similar. But transitions are not just limited to use with :hover.

You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined (with demos) in this article.

Multiple Borders with CSS

Multiple Borders with CSSWhile 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.

Background-Clip in CSS3

Background-Clip in CSS3With 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.

An Option to Mimic CSS3 Text Shadow in Internet Explorer

An Option to Mimic CSS3 Text Shadow in Internet ExplorerBaseball 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:

Here’s Something Interesting About CSS Borders

Here's Something Interestiong About CSS BordersAfter 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):

A New Way to Trigger hasLayout on Elements in Older Versions of IE?

on | 4 Comments

A New Way to Trigger hasLayout on Elements in Older Versions of IE?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: