Developer Ramon Sanchez has something to say ?
Welcome to the scripmaual the database where you an find anything from Css menus to javascript script's and more scripting language. This week we have placed nore css menus that are very simple to integrate ... Check them out »

Advertise your Product on scriptmanual ?
Get your product known with a special format always on top of all categories join the scriptmanual advertiser network. We offer cheap prices for all advertiser's ..get real results... Read more >>

Home » CSS3 Box Shadow

CSS3 Box Shadow Implementing & Examples


Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix).

Capability: Firefox, Safari/Chrome, Opera and IE9

Simple Example with :hover - box-shadow: 10px 10px 5px #888;


#div-id-or-class{box-shadow: 10px 10px 5px #888;}

You can also add the #div-id-or-class:hover{box-shadow: 10px 10px 5px #888;}

Implementing the Script: The CSS 3 Code


<style>

#div-id-or-class{
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}



#div-id-or-class:hover{
-moz-box-shadow: 10px 10px 5px #09f;
-webkit-box-shadow: 10px 10px 5px #09f;
box-shadow: 10px 10px 5px #09f;}

 /* This is the Hover Effect with color #09f - Provided by Scriptmanual.com &
 WebMaster Ramon Sanchez */

</style>


Recommended to add inside the <head> of the Page. but can be used anywhere in the body as well or added to your stylesheet.

More Examples

Example 1* - Offset to the left and top by 5px

<style>

#Exampleone{
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
height:150px;
width:500px;
background:#ffc;
}

</style>

Example 2* - Shadow with a blur distance of 5px

<style>

#Exampletwo{
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
height:150px;
width:500px;
background:#ffc;
}

</style>

Example 3* - Shadow with a spread distance of 5px

<style>

#Examplethree{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
height:180px;
width:500px;
background:#ffc;
padding-left:30px; }

</style>

Was this article & Examples Helpful ?

If so you can help us bring this and more to become available for you at anytime. You can help us by donating any amount or Sharing & Following Us.. P.S Web hosting cost us alot of money..

Business Services

Graphics Design

  • Business CardsBusiness Cards
    Just $35 per card. Order / More Info »
  • Logo DesignLogo Design
    Just $55 per logo. Order / More Info »
  • Company BrochureCompany Brochure
    Just $65 each. Order / More Info »
  • Website Listing inWebsite Listing in 2,000 Directories
    Just $35 each. Order »
  • Party / Events Flyers DesignParty / Events Flyers Design
    Just $55 each. Order »
  • Advertisement Units Design & Flash AdsAdvertisement Units Design & Flash Ads
    Leaderboard (728 x 90) - $95
    Banner (468 x 60) - $40
    Skyscraper (120x600) - $125
    Skyscraper2 (160x600)- $130
    Half Banner (234x60) - $75

    Order Now » We can design your custom
    Ad banners in days.
  • Social Buttons For Websites
    Just $55. More Info »
    ~ Example below ~

Follow Us

Website Design queens ny Linked In NYWDS.com

Developer's Tip

  • Ramon Sanchez
    TIP: # 256 | Meta Tags
    When adding META TAGS make sure you dont over Repeat the keywords it wont help with SEO.Keep it Simple dont overdue it...