Web Design: 10 Creative Techniques Using CSS3 Box Shadow

Web Design: 10 Creative Techniques Using CSS3 Box Shadow:
We have seen a tremendous number of advancements in CSS3 web development over just the past few years. Popular websites all around the Internet have begun incorporating many unique styles such as rounded corners and mobile-responsive media queries. But even more importantly this has opened the door for creative interfaces to be prototyped in a matter of minutes.
In this article I want to share 10 code snippets relating to brilliant CSS3 box shadow designs. I’ll explain how the code works and how you can implement each box shadow into your own website.
These styles are all attributed to great design influence from other popular websites. This is a great example of how current web developers are building impactful trends for the future of web design.
Recommended Reading: HTML5/CSS3 Tutorials

1. Fixed Top Toolbar

The Romanian social media service Trilulilu uses a floating top toolbar around their entire website. This can be created quickly using a position: fixed; property on any top bar element. But this additional box shadow takes the effect to a whole new level.

#banner {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}

#banner h1 {
    line-height: 60px;
}

• Demo

You’ll notice the box-shadow property is actually set up with a fairly simple value combination. The shadow will fall below the box, and blur by 3px on either side.
We can use the rgba() method for applying slight opacity onto the shadow, so the element doesn’t appear too dark. It’s a subtle addition which will surely capture your visitor’s attention.

2. Sub-Navigation Dropdown

Here is another creative box shadow method applied onto a scalar dropdown sub-menu. A similar effect can be seen on Entrepreneur as you hover over each of the top main navigation links. This is definitely a bit more tricky to configure but well worth the patience.

#bar { display: block; height: 45px; background: #22385a; padding-top: 5px; margin-bottom: 150px; position: relative; }
#bar ul { margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif; }
#bar ul li {  background: #22385a; display: block; font-size: 1.2em; position: relative; float: left; }
#bar ul li a { 
display: block; 
color: #fffff7; 
line-height: 45px; 
font-weight: bold; 
padding: 0px 10px; 
text-decoration: none;
z-index: 9999;
}

#bar ul li a:hover, #bar ul li a.selected {
color: #365977;
background: #fff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}

#bar ul .subnav {
display: block;
left: 14px;
top: 48px;
z-index: -1;
width: 500px;
position: absolute;
height: 90px;
border: 1px solid #edf0f3;
border-top: 0;
padding: 10px 0 10px 10px; 
overflow: hidden;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333');
}

• Demo

The nav links can be styled to change color when selected or on mouse hover. I’m also adding some rounded borders onto the links and over the dropdown menu box. This gives a nicer feel rather than hard edges all around. I am also making good use of the -ms-filter and filter properties which are solely proprietary to Internet Explorer.
If you setup a full navigation system you’ll be able to change the display set to none and hide the menu once the page loads. Then using some jQuery you can target the .hover() event and display the subnav bar with updated content.

3. Glossy Shadow Button

This is possibly one of my favorite styles to create just because of how dynamic it appears on the page. If you can’t tell, this is the small blue button found on YouTube’s home page after you first login.

blues {
color: #fff;
width: 190px;
height: 35px;
cursor: pointer;
font-family: Arial, Tahoma, sans-serif;
font-size: 1.0em;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-width: 1px;
border-color: #0053a6 #0053a6 #000;
background-color: #6891e7;
background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));
background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);
}

.blues:hover {
border-color: #002d59 #002d59 #000;
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf ,EndColorStr=#0053a6);
background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
}

.blues:active {
border-color: #000 #002d59 #002d59;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);
background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
}

• Demo

The whole button code is a lot to look at, but we’re trying to support as many browsers as possible. There are text shadows and box shadows with accompanying support for MS Internet Explorer 7+. Also we’re setting the background-image property with CSS3 gradients over a wide number of vendor specific prefixes.
But if you love this design style then the hover and active states will also catch your attention. We’re basically updating the border to include some shadows inside as you push down, while updating the background gradient to show a bit darker.
Since there are no images on the button you can update the hex values and morph this to blend into practically any color scheme.

4. Notifications Flyout Menu

I am not a big user of Facebook but I have noticed some UI techniques from their redesigns. This flyout menu can be compared to your notifications or friend requests popup found on the homepage.

.flyout {
width: 310px;
margin-top: 10px;
font-size: 11px;
position: relative;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
background-color: white;
padding: 9px 11px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #c5c5c5;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.flyout #tip {
background-image: url('images/tip.png');
background-repeat: no-repeat;
background-size: auto;
height: 11px;
position: absolute;
top: -11px;
left: 25px;
width: 20px;
}

.flyout h2 {
text-transform: uppercase;
color: #666;
font-size: 1.2em; 
padding-bottom: 5px;
margin-bottom: 12px;
border-bottom: 1px solid #dcdbda;
}
.flyout p { padding-bottom: 25px; font-size: 1.1em; color: #222; }

• Demo

There isn’t a whole lot of new mind-bending code to display here. I am using a small .tip class with an internal span element to add the tooltip triangle. It is possible to create pure CSS3 triangles but this method is not easy, as you may imagine. If you prefer this method it may be worth hacking something together. But the CSS3 rotation properties are not supported everywhere; meanwhile images do not require any fallback method.

5. Apple Page Wrapper

There are so many impressive CSS3 box shadows you can find on Apple’s official website. This example below is a small box container with a few column spans. When looking over Apple’s layout you’ll notice many of their pages made up of numerous wrapper boxes.

.applewrap {
width: 100%;
display: block;
height: 150px;
background: white;
border: 1px solid;
border-color: #e5e5e5 #dbdbdb #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}


.applewrap .col {
float: left;
box-sizing: border-box;
width: 250px;
height: 150px;
padding: 16px 7px 6px 22px;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #343434;
border-right: 1px solid #dadada;
}

• Demo

You could put together a similar page split up by content boxes of various width and height. Although I have put a few columns into this demo it is not a necessary formatting technique by any means. The box shadow will fit best on a white/grey background. But I think displaying over any light color would look pretty good.

6. Apple Content Box

This other style of content box on Apple’s website is used mostly for column designs. These are primarily at the bottom of the page showcasing deals and other related information. It’s a totally different design style with the box shadow displaying inside from the top down.

.applebox {
width: auto;
height: 85px;
box-sizing: border-box;
background: #f5f5f5;
padding: 20px 20px 10px;
margin: 10px 0 20px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
}

.applebox .col {
width: 140px; 
float: left;
margin: 0 0 0 30px;
}

• Demo

I don’t think this code should be too difficult to follow and copy onto another div container. The only box-shadow we’re applying is using inset with the rgba alpha-transparent color codes. So although we have the drop shadow set to pure black we’re only displaying about a 30% opacity.

7. Featured Links

This is probably my favorite box shadow style from Apple’s current website. You should find a live demo style of this technique on the iCloud page with a series of floating link boxes.

.applefeature {
height: 150px;
margin: 8px;
vertical-align: top;
display: inline-block;
}

.applefeature a {
display: block;
width: 168px;
height: 140px;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
font-weight: bold;
line-height: 1.3em;
background: #f7f7f7;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.applefeature a:hover {
background: #fafafa;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f7f7f7));
background: -moz-linear-gradient(100% 100% 90deg, #f7f7f7, #fff);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); 
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); 
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
}

.applefeature a img { 
display: block;
margin: 26px auto 4px;
}
.applefeature a h4 {
display: block;
width: 160px;
font-size: 1.3em;
font-family: Arial, Tahoma, sans-serif;
color: #646464;
text-align: center;
}

• Demo

These featured links are set to a fixed width and include a distinct icon and display text. Apple’s example uses a similar box shadow as we saw in the previous content box. However the entire box can now be activated as a link which includes both the :hover and :active states. There is a lot of flexibility with this link box and you should try playing around with the source code.
It’s possible to shorten the height/width and create a much smaller list of links. These could be a set of chapters or pages in an article, or you could make a sub-menu limited with link icons. It’s honestly a great set of newer CSS3 techniques which demonstrate how much power you have as a web designer.

8. Framed Images

I’ve added a grey background onto this example so you can see the box shadow styles more clearly. This box is similar to the featured preview shots on wordpress.com except I’ve added a bit more depth to the source code.

.wpframe {
background: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 8px;
-webkit-box-shadow: 1px 2px 1px #d1d1d1;
-moz-box-shadow: 1px 2px 1px #d1d1d1;
box-shadow: 1px 2px 1px #d1d1d1;
}

• Demo

Since the images are given a small padding on either side this frame appears as a large white border. You can always update the background color, or even add a small external border to separate the image from the background. But this fairly simplistic set of styles can be maneuvered into various box shadow techniques. Play around with the code and see how you can improve image designs on your own website.

9. Glowing Input Fields

I got this idea after visiting the Pinterest login page a couple of times. Their animated styles really display some eloquent examples of multiple inline box shadows, both outside and inset.

.formwrap { display: block; margin-bottom: 15px; }
.formwrap label { 
display: inline-block; 
width: 80px; 
font-size: 11px; 
font-weight: bold; 
color: #444; 
font-family: Arial, Tahoma, sans-serif; 
}

.formwrap .shadowfield {
position: relative;
width: 250px;
font-size: 17px;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: normal;
background: #f7f8f8;
color: #7c7c7c;
line-height: 1.4;
padding: 6px 12px;
outline: none;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
border: 1px solid #ad9c9c;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
}
.formwrap .shadowfield:focus {
border-color: #930; 
background: #fff;
color: #5d5d5d;
box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
}

• Demo

Although the initial styles are very attractive I am drawn to the transition effects as you focus on each input field. You can tab between them and see the immediate difference in so many properties. The external glowing box shadow is applied along with an updated inset shadow. Also the text color gets lighter as you’re focused on a particular input, then fades out as you defocus.
Even copying over one of these effects would greatly improve the user experience of your form fields. Be sure that you don’t go too far overboard to the point where your forms are barely usable. However most visitors will enjoy the pleasing aesthetic effects which also encourage interaction and further involvement with your website.

10. Elastic Shadow Buttons

These unique shadow buttons are styled with a slow transition during hover and active states. You can find similar examples on the Mozilla homepage with their large “Download Firefox” button. Some of the box-shadow properties actually combine three different shadows together into one command.

.blu-btn {
display: inline-block;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
background-color: #276195;
background-image: -moz-linear-gradient(#3c88cc,#276195);
background-image: -ms-linear-gradient(#3c88cc,#276195);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#3c88cc),color-stop(100%,#276195));
background-image: -webkit-linear-gradient(#3c88cc,#276195);
background-image: -o-linear-gradient(#3c88cc,#276195);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc',endColorstr='#276195',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc', endColorstr='#276195', GradientType=0)";
background-image: linear-gradient(#3c88cc,#276195);
border: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 16px;
padding: 0px 20px;
height: 40px;
line-height: 40px;
min-width: 100px;
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
font-family: Arial, Tahoma, sans-serif;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-o-transition: all linear .2s;
-ms-transition: all linear .2s;
transition: all linear .2s
}
.blu-btn:hover, .blu-btn:focus {
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
}
.blu-btn:active {
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
}


.grn-btn {
display: inline-block;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
background-color: #659324;
background-image: -moz-linear-gradient(#81bc2e,#659324);
background-image: -ms-linear-gradient(#81bc2e,#659324);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#81bc2e),color-stop(100%,#659324));
background-image: -webkit-linear-gradient(#81bc2e,#659324);
background-image: -o-linear-gradient(#81bc2e,#659324);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e',endColorstr='#659324',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e', endColorstr='#659324', GradientType=0)";
background-image: linear-gradient(#81bc2e,#659324);
border: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 16px;
padding: 0px 20px;
height: 40px;
line-height: 40px;
min-width: 100px;
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
font-family: Arial, Tahoma, sans-serif;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-o-transition: all linear .2s;
-ms-transition: all linear .2s;
transition: all linear .2s;
}
.grn-btn:hover, .grn-btn:focus {
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
}
.grn-btn:active {
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
}

• Demo

I’m using full transitions for 200 milliseconds on hover and active button states. What is so great about these styles is that you can apply them to nearly any clickable element. Buttons, anchor links, form elements, or anything else you think is appropriate – although these styles should be used sparsely so as not to overload your design.
Buttons like these are often saved best in the same manner that Mozilla uses them. Attach these styles into your blog where you have buttons for freebie downloads, or something similar. Users love to interact with unique interfaces and this often translates into a much higher percentage for your click-through rating.

Final Thoughts

I hope you can take away some great lessons from this collection of box shadow techniques. There are many different areas you could focus on including forms, modal boxes, buttons, toolbars, and even full website layouts.
Feel free to implement any of these shadow effects into portions of your own website. There are plenty of other techniques out there, but this collection is perfect for both beginners and advanced developers. Also if you have any suggestions or questions about the article you can share with us in the comments discussion area below.

Related posts:

1. Creating A Rocking CSS3 Search Box
2. Creating Stylish Responsive Form With CSS3 and HTML5
3. How to Create Gmail logo with CSS3
4. CSS3 Linear Gradients [CSS3 Tips]