Box Shadow CSS3 Essential Training

Box Shadow CSS3 Essential Training

CSS, TUTORIALS, WEB

Box Shadow CSS3 Essential Training




This lesson Box Shadow CSS3 Essential Training will teaches the basic box shadow effect on the box models and also know the text effects like drop the shadow on the background of the text and the general HTML elements like div and span elements.
As a step one create a normal box with some text and it is a very ordinary boxes with background colors and some icons inside the box.

For here we use the font awesome icons as the contents inside the boxes, we can embed them from the CDN network or we can download it offline and use the icons at local devices.
So far we also have the following styles to make the below effect like a box one by one with various background colors.

And the result will be like this,
Box Shadow CSS3 Essential Training
After the above result we think it is very basic effect and we wants to add some shadow effects for those box like we did in photoshop or some other image editing tools, the CSS 3 will helps us to make these kind of things.
In Box Shadow CSS3 Essential Training we use the box shadow property with some attributes like x and y offset values and also the blur range, finally the color. Here we give the syntax how to give the box shadow,




The above style will adds the following effect in our box element. Lets try this and see how the result has been changed,
Box Shadow CSS3 Essential Training
Here in Box Shadow CSS3 Essential Training the above example we told that the first value is X offset, which means the shadow on whether the right or left side of the element. The above style makes the shadow 10px left from the current position. If we make it negative then it will shows the shadow in the left side of the element.

Box Shadow CSS3 Essential Training
In the above examples we have used the color name to mention the shadow color but we can also use the rgba() code to mention the exact color you wants to be as a shadow color. A simple example for using the rgba() is shown below

And for the above code we got the following result.
Box Shadow CSS3 Essential Training
In the above example we’ve mentioned the rgba() values with the percentage of the opacity to the shadow effects. In the upcoming lesson we can learn about the text effects like we did Box Shadow CSS3 Essential Training. We hope this lesson will teach something different ways to add an shadow effects to the box models or any HTML elements.




Leave a Reply