CSS Tips and Tricks: Box Shadow + FREEBIE

As a lover of web design and CSS/CSS3, I love to experiment with new elements to give your website character (and to make it look pretty, obviously). In this post I wish to introduce you to perhaps the most simple yet effective CSS element: box shadow.

With Photoshop it’s extremely easy to apply a drop shadow to boxes, however, when building a website Photoshop is not needed or the best way to go about things. In fact, the more CSS and less images used on your website, the better.

CSS:

.boxshadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc; 
-webkit-box-shadow: 3px 3px 5px 6px #ccc; 
box-shadow: 3px 3px 5px 6px #ccc; 
}

The horizontal offset of the shadow: a positive number means that the shadow will be on the right side of the box, a negative offset will move the shadow to the left of the box.

The vertical offset of the shadow: a negative number means that the box-shadow will be above the box, a positive offset will move the shadow below the box.

The blur radius (optional): if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

The spread radius (optional): positive numbers increase the size of the shadow whereas negative numbers decrease the size. The default is 0 (the shadow is same size as blur).

Colour: you most often use a hex colour code for the colour, eg. black: #000, white: #fff

HTML:

<div class="boxshadow"></div>

Example:

FREEBIE: The Full CSS For The Box Above:

.boxshadow {
font-family: Calibri;
background: #8d8d8d;
border: 4px solid white;
color: #fff;
display: block;
float: left;
margin: 5px;
overflow: hidden;
padding: 20px 20px 20px 20px;
text-align: left;
width:196px!important;
min-height: 140px;
-moz-box-shadow: -1px 2px 6px 0px #692A26;
-webkit-box-shadow: -1px 2px 6px 0px #692A26;
box-shadow: -1px 2px 6px 0px #6a6a6a;
}

If you’d like anything explaining or would like some additional information, please drop me a comment!

Advertisements

Share Your Thoughts, Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: