Easy Ways to Create Shadow Effects (Box Shadow) With Css

This time I will share about how to create a shadow effect (box shadow) on the blog. This shadow effect, of course, when applied to a blog template design will be better and more interesting of course. How to make it is not difficult, the most important thing is that you know a little CSS (cascading style sheet). To learn to use CSS is not difficult, there are many web tutorials that discuss this. Box shadow basically creates a blur effect until it looks like a shadow, the resulting blur effect depends on how you place the direction according to your dreams, it can blur with vertical or horizontal conditions.

Its use can also use CSS or writing HTML code directly, so here’s a simple box shadow effect code pattern and an explanation. For use with CSS then the writing will be like this:

#example box {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

As for writing HTML mode, the pattern for writing the directive is as follows:

But basically all these directives are in the following form:

box-shadow: x-point y-point blur spread color inset;

The description of the box shadow directive is as follows:

  • x-point is a shadow that leads to a horizontal offset (horizontal shadow). If the value is negative, then the resulting image will point to the left side and vice versa, if it is real, it will point to the right side.
  • y-point is a shadow that leads to a vertical offset (vertical shadow). If the value is negative, then the resulting image will point up and vice versa, if it is real, it will point down.
  • blur to adjust the blur distance from the shadow (determine the size of the blur effect on the shadow).
  • the spread is a measure of the shadow itself.
  • color to determine the color of the shadow that will be generated.
  • inset to put a shadow in the box and is optional, meaning it may or may not exist.

This time I will share a little about the application of the pattern using the box shadow, pay attention to the image below without the shadow effect:

A

#box a{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
}

Now here’s the addition of CSS for the box shadow or shadow impact:

B

#box b{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;

}

C

#box c{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;

}

D

#box d{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;

}

E

#box e{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;

}

F

#box f{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;

}

G

#box g{
border: 1px solid #ddd;
background:#eee;
width:620px;
height:70px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;

}

Now it’s easy, right, how to create a box shadow on a blog, you can apply it either through CSS or HTML directly, so that the article is useful.