CreateaFreeWebsite  with Responsive Web Design

Box Shadow - CSS3

The box shadow property is one of those CSS techniques that has been experimental for some of the last releases of CSS.

It is now supported by the latest versions of all major browsers.

When used properly it adds a nice raised almost 3 dimensional appearance to square images, divisons, tables, h1-6 elements and many other web page elements.

If used too much it can be a little monotonous.

Experiment, experiment, experiment!!

The CSS

box-shadow: 5px 5px 10px #0e0e0e

h-shadow Required. The position of the horizontal shadow. Accepts Negative values.
v-shadow Required. The position of the vertical shadow. Accepts Negative values.
blur Optional. The blur distance
color Optional. The color of the shadow.
spread Optional
inset Optional 

Examples of Box Shadow

Since we use it on this page, you might look around and see the different places we use it. I know we overdo it a little, but once you find out how easy it is to add, you'll probably do the same for a while.

Use on Headings

Paragraph headings.

 

The Code

HTML

<div>
<h1>Text</h1>
<p>Text</p>
</div>

CSS

width: 75%;
background: #990000;
border: solid #ffd700 6px; 
border-radius: 30px 30px 0 0; 
padding: 3% 5%; 
box-shadow: 5px 5px 10px #0e0e0e

 

Use it on pictures.

chelsie

 

HTML

<img src="images/chelsie-400.jpg" alt="chelsie">

CSS

display: block; 
margin: 0 auto; 
box-shadow: 2px 2px 8px #000000; 

 

Inset

 

box-shadow: 5px 5px 10px #0e0e0e inset

Works well with most box elements.

Difficult to use with images, because it displays behind.

Buttons on the Fly?

The CSS which we used to enhance a simple h5 element:

width: 85%; 
margin: 0 auto;
color: #ffffff;
background: #ff6600; 
text-align: center;
box-shadow: -10px -10px 30px #0e0e0e inset;
border-radius: 30px;
padding: 2% 2%;

Note the use of negative values.

Orange Tube Anyone?

 

Free Tools We Recommend

Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the Geany Code Editor. You'll find it in your Linux Mint software repository. It's simple but powerful and FREE.
For image resizing we've found the easiest Linux tool to be Krita.

Have you tried our Free Mobile Ready website template kit? Download Template #402 - 6 Page Kit