CSS3 text-shadow

CSS3 TEXT-SHADOW

The CSS3 text-shadow property allows you to apply one or more shadows to any block of text.

Text-shadow support: Chrome 5 Firefox 3.6 Opera 10.6 Safari 5 Chrome 5/6 Firefox 3.6 Opera 10.6 Safari 5 IE7 IE8 Yes Yes Yes Yes Yes Yes Yes Yes No No Mac Win

How it works

The property takes 3 lengths values and a color value . .test { text-shadow: 10px 10px 5px #000; }

Horizontal offset

The horizontal offset of the shadow is defined first within the length values: .test { text-shadow: 10px 10px 5px #000; } Horizontal offset

A positive value will place the shadow on the right of the text. .test { text-shadow: 10px 10px 5px #000; }

Text Text Text Positive horizontal text-shadow

A negative value will place the shadow on the left of the text. .test { text-shadow: -10px 10px 5px #000; }

Text Text Text Negative horizontal text-shadow

Vertical offset

The vertical offset of the shadow is defined second within the length values: .test { text-shadow: 10px 10px 5px #000; } Vertical offset

A positive value will place the shadow below the text. .test { text-shadow: 10px 10px 5px #000; }

Text Text Text Positive vertical text-shadow

A negative value will place the shadow above the text. .test { text-shadow: 10px -10px 5px #000; }

Text Text Text Negative vertical text-shadow

Blur radius

The blur radius of the shadow is defined third within the length values: .test { text-shadow: 10px 10px 5px #000; } Blur radius

If set to a value of “0” the shadow will be hard edged . .test { text-shadow: 10px 10px 0 #000; }

Text Text Text Hard edged text-shadow

The higher the blur radius number, the softer the text-shadow will be . .test { text-shadow: 10px 10px 9px #000; }

Text Text Soft text-shadow

Negative values are not allowed for the bur radius. .test { text-shadow: -10px -10px 5px #000; }

The color may be specified before or after the length values. .test { text-shadow: #000 10px 10px 5px; }

The color can specified using a variety of methods including…

Keyword values .test { text-shadow: 10px 10px 5px red ; }

6 integer hexidecimal values .test { text-shadow: 10px 10px 5px #00ff55 ; }

3 integer hexidecimal values .test { text-shadow: 10px 10px 5px #0f5 ; }

Integer functional notation (RGB) values .test { text-shadow: 10px 10px 5px rgb(0,255,85) ; }

Percentage functional notation (RGB) values .test { text-shadow: 10px 10px 5px rgb(0,100%,33%) ; }

Hue-saturation-lightness values .test { text-shadow: 10px 10px 5px hsl(140, 100%, 50%) ; }

Alpha transparency values .test { text-shadow: 10px 10px 5px rgba(0%,100%,33%, .6) ; }

Essential and optional values

Text-shadow must include the two offset values . Blur radius and a shadow color are optional. .test { text-shadow: 10px 10px 5px #000; } optional essential

If no blur radius is specified, browsers will assume a ‘0’ value and the shadow will be hard edged. .test { text-shadow: 10px 10px ? #000; } Zero value used if none defined

If no color is specified, a user-agent color will be used. Most browsers will use the color of the text . .test { text-shadow: 10px 10px 5px ? ; } Text color value used if none defined

Multiple text-shadows

Multiple text shadows are allowed, as a comma-separated list. .test { text-shadow: 10px 10px 5px #000 , 20px 20px 20px yellow; } Text-shadow 2 Text-shadow 1

The shadow effects are applied front-to-back: the first shadow is on top and the others are layered behind. Shadows cannot overlay the text itself .

Text Text Text Text Text-shadow 1 Text-shadow 2

Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley

CSS3 text-shadow

by Russ Weakley on Oct 04, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

CSS3 text-shadow — Presentation Transcript