CSS3 Effects and YQL (Part 1)

Jul 19, 2010
Episode 33
This week, Nick takes a look at some new CSS3 properties and Jim goes over the basics of YQL.

Thanks to those who make Doctype possible!

Text Effects


When the web 2.0 movement came along, most people in the design world went crazy using reflections. However, reflections still have their place in design, and with CSS3, you can create them very easily.

To create a reflection in the webkit rendering engine, which is used by Chrome and Safari, you simply type -webkit-box-reflect, and then punch in a few values.

The first value is the direction. This is a constant, and can be set to the strings above, below, left, or right. Usually, you’ll want to set this to below, so that your reflection will appear below the element.

Next is the offset. This can be a pixel or percentage value, and it specifies the distance that the reflection should be from the edge of the original element. Usually you’ll want your reflection to be pretty close to the element, so this value will usually be set to something that’s fairly small, and sometimes, it might even be a negative value.

Finally, there’s the mask-box-image value. This is simply a mask-box-image that you can overlay over the reflection. If you leave it out, the reflection won’t have a mask. The mask-box-image value is a great opportunity to use a linear gradient, because in most cases, you’ll want your reflections to become less visible as they get further away from the element.

In practical situations, reflections can be used to add depth to an image. They are capable of making objects feel like they’re set further back in space. Just always remember, that as fun as reflections may be, try not to overuse them!

Text Stroke

The text-stroke property is new in CSS3, and using the webkit vendor prefix, we can try it out in Chrome and Safari.

After you type out -webkit-text-stroke, there’s just two arguments to fill in. The first argument is the width. This will default to 0, but if you set it to a pixel value, you can specify just how much stroke you want to apply to your text.

Next, is the stroke color. This can be any CSS color, and it simply sets the color of the stroke.

In addition to the text-stroke property, there’s also the text-stroke-fill property. This allows you to specify what color you want your text to be. If you don’t use this property, the color of the text will default to the normal color property. So then, why are there two ways of doing this?

The reason is, the text-stroke-fill property doesn’t just allow you to set a color. It also allows you to make text transparent. In other words, if you had a text stroke and a text shadow on a block of text, you could set the text-stroke-fill to transparent, and actually see the text shadow peeking through the hollow outline of the text.

From a practical perspective, a text-stroke can sometimes look pretty cheesy, but it’s actually quite useful in combination with the first-letter pseudo-element, if you want to make the first letter of a block of text look extra fancy.