PHP Library

Support Us

Donate

CSS Library

Css Box Shadow

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. 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). Devsocial.net offers free online tutorials, references and free SEO Tools the world wide web design library.

CSS Box Shadow Implementing & Examples

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

Hover over this box.

<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;
width:250px;
height:100px;
}
#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 https://www.Devsocial.net &
 WebMaster Ramon Sanchez */
</style>

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:210px;
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:210px;
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>

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

Rating:

Capable: broswers

Date Posted: 2/5/2023

Note: Make sure your page contains a valid doctype for this menu to render properly.

Revision History: Nov 8th, 2023': updated code..

Usage Terms: | Please Read - -> >

Viewed: 73,562

info Share our library with others. Spread the love. Share:

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. Donate through PayPal.

Buy Ready made Web Apps

Real Estate ready made Web App

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $3,500

Social Network Software + Install + Domain + Hosting.

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $3,700

Services/Booking Web APP

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $4,500

Videos / Streaming Web App

Includes 5 Yr. Domain + 5 Yr. hosting FREE.

Price: $23,500

Live Radio Station

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $4,700

Video Courses/Training

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $17,500

Free Tools

Dev's Tips

Dev: Ramon Sanchez

TIP: # 251 | 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...
Contact Developer