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.

Have you ever wondered what it takes to be a geek? Are geeks highly intellectual individuals who are obsessively passionate over computer technology, or elements of pop culture so much that their lifestyle revolves around this passion? Can we label anyone who is well-versed with these topics as a geek? Or is there something else more fundamental that helps make this distinction?

(Image Source: Scott Johnson)

My guess is that it has more to do with their attitudes than what they actually do that irritate (or perhaps, intimidate) others. Despite being socially awkward, their extraordinary attitudes are somewhat of a rare find, which is a good thing as these attitudes have lead to some of the biggest tech-news-making events of this century.

Today, we see a greater acceptance and recognition for geeks (you can thank the late Steve Jobs and Mark Zuckerberg for that). Who knows, you might even possess the very traits that they have. Check to see where you stand on the geek-o-meter.

Recommended Reading: Why Geek is the New Cool

1. Are You Incredibly Loyal To What You Love?

One thing that could potentially distinguish geeks from the rest of the people is their undying commitment to the things they love, be it gaming, high-tech gadgets or comics. They’re fanatical about the object of their obsession, always willing to put in that extra effort (sometimes to extreme lengths) to make sure they’re the first to know about the latest news or updates.

(Image Source: hollietree)

To others, it may just be a hobby or a pastime. To them though, it’s the reason they exist. It defines who they are. This is why they’re so passionate about it.

Do you have a particular obsession, the reason why you’re excited to get out of the bed every morning? If you have that something which your life revolves around, you’re closer to being a geek than you think.

2. Do You See Yourself As Distinct From The Rest?

Due to their extreme loyalty and commitment to what they love, they only seek the company of those who exhibit the same enthusiasm as they do. They tend to group together, in a small community, preferring to mingle with their peers and shunning those who are not as committed to the same passion – which would explain the social misfit-ness of geeks.

In any case, they are stringent when it comes to accepting people as their kind. It’s evident from the way geeks talk; you see that they speak in their own language (real or made-up), using their own terms, acronyms and lingo. It’s highly probable that only a fellow geek would understand what they are talking about.

It’s not likely that any Tom, Dick and Sally can just join the club by waltzing in, as even within the community itself exists a unique culture of their own. In a way it’s like the fraternities where they have their own initiation before new members can be welcomed into the group. You need to show them that you think at the same (high) level as them; you can’t feign being a geek.

3. Do You Tend to Be ‘Ethnocentric’?

I guess one inevitable side effect of seeing themselves as vastly different from others is that they are less able to see things from an outsider’s point-of-view. Having a lot of pride in their level of understanding of a subject, at times, geeks also expect others to comprehend what they mean without a need for explanation.

Terms like ‘pwned’ or ‘respawn’ (if they’re gamer geeks) will elicit responses like shrugs or raised eyebrows, long "uhhhh"s or "What a weirdo!" expressions. You can’t expect geeks to change, so when a non-geek doesn’t, the incompatibility sticks, and geeks shy away from making new friends of the non-geek nature.

From the outside, they are viewed as socially awkward because it’s easier to put a blame on a minority group than it is the general public. This would further push them into seclusion, preferring to instead talk and communicate with their own kind, rather than in real-life relationships.

4. Do you Lose Yourself Easily In Your Obsession?

With them passionate over what they love to do, it’s not surprising to find themselves achieving ‘flow‘, the state of mind when they feel fully engaged in what they do and consequently lose track of time. This would explain why geeks who are into gaming could spend hours and hours without stopping for food while trying to complete their games.

(Image Source: Danny McMunch)

Eventually, that feeling of euphoria from the flow becomes an addiction to them; that’s how gamers get addicted.

Recommended Reading: 5 Ways “Tech Addiction” Is Changing Human Behaviour

5. Do You Have An Insatiable Need to Know Everything?

As I mentioned earlier, the life of a geek revolves around what they love. With that, they have the constant desire to have that sense of power and control over what they’re good at and love doing.

They never stop exploring and always keep themselves updated about the things they are obsessed with: reading everything about the latest high-tech gadgets, attending every cosplay event and conference in town, etc.

(Image Source: thedailybubbletea.com)

They just want to be the first to be there, the first to hear about unconfirmed rumours and of course, the first to break the news to everyone. Put simply, it’s extreme fandom at its best, almost a cult-like zeal.

6. Do You Take Pride In Your Expertise?

They’re the experts on the field. From time to time, they might talk to ‘outsiders’ about their obsession when others asked about it during the course of everyday conversations. Although they might openly resent it when others don’t get their ideas or jargon, deep inside, the geeks take delight in the fact that they’ve established themselves to be an expert.

Given the amount of time and effort that geeks are willing to devote themselves to the object of obsession, it’s quite understandable to be proud of themselves. After all, it is very much their life goal.

7. Do you Have a Niche Within Your Passion?

Even when they’re geeks for a particular field, chances are that they have developed a preference within their passion. Take for instance the case of the stereotypical computer geeks. Sure, they may be crazy over computer technology and the latest technology trends in computing, but they often focus on a particular brand or system.

It’s like going to the second layer of fanaticism, where you delve deeper to find one niche. It’s why we always hear of the battle between supporters of different operating systems like Android vs iOS.

8. Are You Willing to Stick to it Til the End?

Being a fan to a specific OS, comic superhero, cosplay costume, sci-fi movie, programming language and others is one thing, while sticking to it no matter what happens is another. Geeks do both. This is what makes them so different, so special and perhaps so intimidating to ‘outsiders’.

They are willing to stand up for what they believe in, even when times are really bad. It’s not really about the objective assessment of the object they love; it is more than that. It involves emotions when it comes to their fandom.

One is not a geek if he or she is knowledgeable about the subject but lacks the passion about it. A real geek is totally into it, intellectually and emotionally. This idea explains why geeks will stay true and loyal to their idolized OS or superhero till the end; they have grown emotionally (or even spiritually) attached to them. To speak ill of their passion is to speak ill of them.

If your Android device is missing or stolen, stay calm and take a breather. We’ve got 5 great anti-theft apps that can help you get your smartphone back or at least keep your sensitive data safe from identity theft.

Some of these apps have features that can help you track down your missing phone by triggering it to ring off the hook, send its GPS location to your email or when worse comes to worst, allow you to wipe your data from the missing smartphone remotely. Not enough? Snap a photo of the perpetrator or record their audio with your phone’s microphone. Yes, these apps can do that and more.

But remember that only some of them can be installed after the phone is lost. The rest of them are preventive measures, meaning you should already have them before something bad happens to your device. With that out of the way, let’s go get your phone back.

Recommended Reading: 20 Essential Apps For Your Android Phone

Top 5

Here are 5 of the most popular Android apps to track down a lost or stolen Android device.

Where’s My Droid

[Free] Where’s My Droid is a pure Find my Phone app to help you locate your phone. When your smartphone goes missing, sending a code via text will make the phone ring (even when set in silent mode) while another text code sends you the GPS coordinates of the phone.

Alternatively, you can remotely control your phone by connecting it to the Commander option, a web-based interface. Where’s My Droid also offers a Pro version which lets you take pictures with the camera (you might be able to take a snapshot of the perpetrator), remote lock the phone rendering it impenetrable or remote wipe the app to save your data from misuse.

Plan B

[Free] If you had not install any tracking app before your Android device was stolen or misplaced, Plan B will be a lifesaver. Plan B is an Android app from Lookout Labs which locates your smartphone using cell towers and GPS, then sends the location of your smartphone to your Gmail Inbox.

In some smartphones, Plan B can enable the GPS on the phone then update you with its location every 10 minutes. For phones with no such support, you can text ‘location’ from another phone, and details of the missing phone’s location will be sent to your email. In the absence of a data connection, the software will send its location via SMS instead.

Android Lost Free

[Free] This app is not only perfect for finding your lost phone, it will also torment the thief (something which we’re sure they fully deserve). You can activate (via SMS or the Web) the alarm to ring with a flashing screen, enable and disable the GPS, data and Wi-Fi connection, remote wipe the SD card, and get their latest call list.

Although it’s a free app, the app lets you take pictures from the smartphone camera (front and rear) and make your phone speak using text-to-speech. Once the SIM card is changed, you will be informed via email. This app can be used even after you have lost your smartphone due to its remote install feature and is hidden from the launcher to prevent uninstallation.

SeekDroid Lite

[Free to download; Pro: $2.99/mth] This has all the regulars, remote lock and wipe, SMS activation, ring alert even in silent mode, hide from view mode, and GPS-enabling feature. You can also retrieve the most recent call logs – and it works even without a SIM card plugged in.

The Pro account (monthly subscription) lets you track the movements of the stolen smartphone with a history map so you know where your device is heading. You can also get protection for multiple devices, and receive notification for when it leaves a pre-selected fenced-in area (good for keeping watch on your little ones).

AntiDroidTheft

[Free] Here’s a simple anti-theft device which lets you locate your phone via GPS, track changes made to the SIM card and view the pictures that have been taken by the smartphone all through the Web. Here’s some news coverage on how the app actually helped a user get his stolen phone (and the car it was in) back.

More Anti-theft Apps

Didn’t like any of the above? Here are a few more anti-theft apps, some with the added protection against viruses that you might pick up while surfing the Web.

Cerberus

[Free; Pro: 2.99 euros] Cerberus has all the works, remote alarm trigger, tracking via GPS, remote wipe of the SD card as well as the internal storage, remote lock of the phone, plus alerts of a SIM change. You can also record audio from the microphone. The free version lasts for a week, while the Pro version lets you use it for up to 5 devices under the same account.

Prey Anti-Theft

[Free] To use Prey Anti-Theft you have to get it installed before the phone goes missing. To find your lost phone, you can activate Prey via SMS with the words "GO PREY" in all caps then log into the Control Panel via the Web to mark the device as ‘Missing’. You can then receive notices of where your phone is. The app is hidden and can only be uninstalled with a password.

Find My Phone

[$0.99] Find My Phone is a simple app that lets you track down your phone via GPS. Just text "findme" to start tracking and "ringaloud" to make it start ringing. You can text from a friend’s phone or from free online SMS services.

Lookout Security & Antivirus

[Free; Premium: $2.99/month] You can find your lost phone on Google Maps, sound a loud alarm (even from silent mode) and lock your phone remotely with this app. In the event that your phone has run out of battery, it will notify you of its last known location. Also has an automated backup and restore function which can be accessed from the website.

McAfee Antivirus & Security

[Free to download; $30 a year to keep] Here’s the award-winning software that will keep your smartphone safe from the inside out. It comes as a 7-day free trial but to keep it on your phone, it’s a $30/year subscription. For that sum, you get the regular anti-theft protection, antivirus protection, plus data backup and restore functions.

Kaspersky Mobile Security

[$4.95] This one has plenty of anti-theft protection, with remote block, remote wipe and device-tracking capabilities via GPS, Wi-Fi and Google Maps even if your SIM card has been replaced. Unwanted or unknown calls and text messages can also be blocked, and it lets you hide certain information from friends and family who borrow your phone for use.

Norton Mobile Security Lite

[Free; Pro $29.99] This software can give you total protection for all your devices. Lost devices can be located on a map, and the Pro version gives you a scream alarm to help you find your missing device. A nifty trick it has is that the phone is automatically locked once the SIM card is removed. It also backs up your data whch can be easily restored.

AVG AntiVirus

[Free] Besides protecting your devices from virus attacks, it also can locate your lost or stolen phone via Google Maps and lock your device to protect your privacy via a text message. If your phone or tablet is stolen or missing, you can also set a lock screen message to help the locator find you and make your device ring even when it’s on silent mode.

Avast! Mobile Security

[Free] The anti-theft feature for this antivirus is actually a hidden component which can be remotely controlled via SMS commands sent from another phone or through the Web. You can log into Web controls to perform mobile tracking and/or give your phone commands.