• Share
  • Email
  • Embed
  • Like
  • Private Content
CSS3 box shadow
 

CSS3 box shadow

on

  • 7,034 views

 

Statistics

Views

Total Views
7,034
Views on SlideShare
6,372
Embed Views
662

Actions

Likes
9
Downloads
192
Comments
1

9 Embeds 662

http://www.maxdesign.com.au 337
http://wrmf.ca 242
http://ciberdix.net 39
http://www.gordw.com 32
http://localhost 7
http://meltwaternews.com 2
file:// 1
http://131.253.14.66 1
http://translate.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS3 box shadow CSS3 box shadow Presentation Transcript

    • CSS3 BOX-SHADOW
    • The CSS3 box-shadow property allows you to apply one or more shadows to any box.
    • You can also define outer and inner box shadows.
    • Box-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
    • An outer box-shadow casts a shadow as if the box were opaque. The shadow is drawn outside the border edge only .
    • An inner box-shadow casts a shadow as if everything outside the box were opaque. The inner shadow is drawn inside the padding edge only .
    • box-shadow syntax
    • The property allows 4 required lengths values , a color and an “inset” keyword. .test { box-shadow: 10px 10px 5px 5px #000 inset; }
    • Horizontal offset
    • The horizontal offset of the shadow is defined first: .test { box-shadow: 10px 10px 5px 5px #000 inset; } Horizontal offset
    • A positive value will place the shadow on the right of the box. .test { box-shadow: 10px 10px 5px 5px #000 inset; }
    • Box Positive horizontal box-shadow
    • A negative value will place the shadow on the left of the box. .test { box-shadow: -10px 10px 5px 5px #000 inset; }
    • Box Negative horizontal box-shadow
    • Vertical offset
    • The vertical offset of the shadow is defined second: .test { box-shadow: 10px 10px 5px 5px #000 inset; } Vertical offset
    • A positive value will place the shadow below the box. .test { box-shadow: 10px 10px 5px 5px #000 inset; }
    • Text Positive vertical box-shadow
    • A negative value will place the shadow above the box. .test { box-shadow: 10px -10px 5px 5px #000 inset; }
    • Box Negative vertical box-shadow
    • Blur radius
    • The blur radius of the shadow is defined third: .test { box-shadow: 10px 10px 5px 5px #000 inset; } Blur radius
    • If set to a value of “0” the shadow will be hard edged . .test { box-shadow: 10px 10px 0 5px #000 inset; }
    • Box Hard edged box-shadow
    • The higher the blur radius number, the softer the box-shadow will be . .test { box-shadow: 10px 10px 0 5px #000 inset; }
    • Text Soft text-shadow
    • Negative values are not allowed for the bur radius. .test { box-shadow: 10px 10px 5px 5px #000 inset; }
    • Spread distance
    • The spread distance of the shadow is defined fourth: .test { box-shadow: 10px 10px 5px 5px #000 inset; } Spread distance
    • Positive values cause the shadow to expand in all directions (so the shadow appears larger than the box). .test { box-shadow: 10px 10px 5px 5px #000 inset; }
    • Box Positive value spread
    • Negative values cause the shadow to contract in all directions (so the shadow appears smaller than the box). .test { box-shadow: 10px 10px 5px -5px #000 inset; }
    • Box Negative value spread
    • Color
    • The color can specified using a variety of methods including…
    • Keyword values .test { box-shadow: 10px 10px 5px red ; }
    • 6 integer hexidecimal values .test { box-shadow: 10px 10px 5px #00ff55 ; }
    • 3 integer hexidecimal values .test { box-shadow: 10px 10px 5px #0f5 ; }
    • Integer functional notation (RGB) values .test { box-shadow: 10px 10px 5px rgb(0,255,85) ; }
    • Percentage functional notation (RGB) values .test { box-shadow: 10px 10px 5px rgb(0,100%,33%) ; }
    • Hue-saturation-lightness values .test { box-shadow: 10px 10px 5px hsl(140, 100%, 50%) ; }
    • Alpha transparency values .test { box-shadow: 10px 10px 5px rgba(0%,100%,33%, .6) ; }
    • Essential and optional values
    • Box-shadow must include the two offset values . Blur radius, spread, shadow color and inset are optional. .test { box-shadow: 10px 10px 5px -5px #000 inset; } essential optional
    • If no blur radius is specified, browsers will assume a ‘0’ value and the shadow will be hard edged. .test { box-shadow: 10px 10px ? -5px #000 inset; } Zero value used if none defined
    • If no spread is specified, browsers will assume a ‘0’ value and the shadow will be the same size as the box. .test { box-shadow: 10px 10px 5px ? #000 inset; } 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 { box-shadow: 10px 10px 5px 5px ? inset; } Text color value used if none defined
    • If no “inset” keyword is defined, browsers will assume the shadow is “not inset” . .test { box-shadow: 10px 10px 5px 5px #000 ? ; } Non-inset value used if none defined
    • Multiple box-shadows
    • Multiple box shadows can be defined, separated by commas. .test { box-shadow: 10px 10px 5px #000 , 20px 20px 20px yellow; } Box-shadow 2 Box-shadow 1
    • The shadow effects are applied front-to-back : the first shadow is on top and the others are layered behind.
    • Text Text-shadow 1 Text-shadow 2
    • box-shadow and border-radius
    • The box-shadow should follow any curved corners that have been defined with border-radius.
    • Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley