QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads CSS3 Text And Box Shadows

CSS3 Text And Box Shadows

text-box-shadows

text-shadow

text-shadow property in CSS3 allows you to apply shadow to your text.

text-shadow property take four arguments:

  1. First property is the horizontal distance between the text and its shadow. It can have positive or negative value.
  2. Second property is the vertical distance between the text and its shadow. It can have positive or negative value.
  3. Third property is the z directional distance between the text and shadow. More distance causes more blur. It has to be positive value. This is optional.
  4. Last argument is the color of shadow text. This is optional

A text can have multiple shadows. We can provide shadows comma separated.

Check browser support for text-shadow property.

textshadow polyfill can be used to create text shadow in not supported browsers.

box-shadow

box-shadow property allows us to create shadows for any displayed element.

box-shadow property take six arguments:

  1. First property is the horizontal distance between the box and its shadow. It can have positive or negative value.
  2. Second property is the vertical distance between the box and its shadow. It can have positive or negative value.
  3. Third property is the z directional distance between the box and shadow. More distance causes more blur. It has to be positive value. This is optional.
  4. Four argument is the size of the shadow. This is optional.
  5. Fifth argument is the color of shadow shadow. This is optional
  6. When last argument is assigned to “inset” the shadow becomes inner shadow instead of outer shadow(its outer by default).

A box can have multiple shadows comma separated.

Check browser support for box-shadow property.

CSS3 Pie polyfill can used to create box shadow effects in a not supported browser.

Jul 12, 2014Narayan Prusty
Layout Concepts For Web DesignersCSS Specificity: Priortizing Selectors Rules

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • text-shadow
  • box-shadow
Related Articles
  • Horizontal and vertical Centering Using CSS
  • HTML Textarea Fixed Size
  • Changing Text Selection Color Using CSS
  • JavaScript Change Console Log Color
  • CSS3 Multiple Columns Example
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license