Thursday, January 2, 2014

Bottom Shadow For Images In Blogger

Hello There,
Today we gonna learn how to add bottom shadow to the images in blogger.
This Tutorial is simply based on Css3, No Additional Js are required. After adding this to blogger you can just upgrade your blog's style of displaying image. It also provides a professional look to your blog.
So Lets Proceed for it's implementation.

 Bottom Shadow For Images In Blogger  

Note: Before Editing The Template you've to create a backup. So Take Care for that.

Step1: Visit your Blogger Dashboard and select the blog, Now Go to the edit template section. Now you just need to find ]]></b:skin> and add the following css code just before it.
/******************************************************/
/****** BOTTOM PERSPECTIVE SHADOW ******/

.BottomShadow {
position: relative;
}

.BottomShadow:before, .BottomShadow:after {
content: '';
position: absolute;
z-index: -1;
bottom: 0;
width: 30px;
height: 50px;
}

.BottomShadow:before {
-moz-transform: skew(40deg);
-webkit-transform: skew(40deg);
-o-transform: skew(40deg);
transform: skew(40deg);
}

.BottomShadow:after {
-moz-transform: skew(-40deg);
-webkit-transform: skew(-40deg);
-o-transform: skew(-40deg);
transform: skew(-40deg);
}

/*** SMALL SHADOW STYLES ***/

/* LIGHT */
.BSmall.BLight {
-moz-box-shadow: 0 52px 26px -36px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 52px 30px -39px rgba(0,0,0,0.7);
box-shadow: 0 52px 30px -39px rgba(0,0,0,0.7);
}

.BSmall.BLight:before {
right: 54px;
-moz-box-shadow: 9px 17px 18px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 14px 17px 26px rgba(0, 0, 0, 0.2);
box-shadow: 9px 17px 18px rgba(0, 0, 0, 0.2);
}

.BSmall.BLight:after {
left: 54px;
-moz-box-shadow: -9px 17px 18px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: -14px 17px 26px rgba(0, 0, 0, 0.2);
box-shadow: -9px 17px 18px rgba(0, 0, 0, 0.2);
}
/* NORMAL */
.BSmall.BNormal {
-moz-box-shadow: 0 52px 26px -36px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 52px 30px -39px rgba(0,0,0,0.8);
box-shadow: 0 52px 30px -39px rgba(0,0,0,0.8);
}

.BSmall.BNormal:before {
right: 54px;
-moz-box-shadow: 9px 17px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 14px 17px 26px rgba(0, 0, 0, 0.3);
box-shadow: 9px 17px 18px rgba(0, 0, 0, 0.3);
}

.BSmall.BNormal:after {
left: 54px;
-moz-box-shadow: -9px 17px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -14px 17px 26px rgba(0, 0, 0, 0.3);
box-shadow: -9px 17px 18px rgba(0, 0, 0, 0.3);
}
/* DARK */
.BSmall.BDark {
-moz-box-shadow: 0 52px 26px -36px rgba(0,0,0,0.9);
-webkit-box-shadow: 0 52px 30px -39px rgba(0,0,0,0.9);
box-shadow: 0 52px 30px -39px rgba(0,0,0,0.9);
}

.BSmall.BDark:before {
right: 54px;
-moz-box-shadow: 9px 17px 18px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 14px 17px 26px rgba(0, 0, 0, 0.4);
box-shadow: 9px 17px 18px rgba(0, 0, 0, 0.4);
}

.BSmall.BDark:after {
left: 54px;
-moz-box-shadow: -9px 17px 18px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -14px 17px 26px rgba(0, 0, 0, 0.4);
box-shadow: -9px 17px 18px rgba(0, 0, 0, 0.4);
}

/*** MEDIUM SHADOW STYLES ***/

/* LIGHT */
.BMedium.BLight {
-moz-box-shadow: 0 58px 26px -36px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 60px 44px -39px rgba(0,0,0,0.7);
box-shadow: 0 58px 30px -39px rgba(0,0,0,0.7);
}

.BMedium.BLight:before {
right: 60px;
-moz-box-shadow: 9px 25px 18px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 14px 25px 26px rgba(0, 0, 0, 0.2);
box-shadow: 9px 25px 18px rgba(0, 0, 0, 0.2);
}

.BMedium.BLight:after {
left: 60px;
-moz-box-shadow: -9px 25px 18px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: -14px 25px 26px rgba(0, 0, 0, 0.2);
box-shadow: -9px 25px 18px rgba(0, 0, 0, 0.2);
}
/* NORMAL */
.BMedium.BNormal {
-moz-box-shadow: 0 58px 26px -36px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 60px 44px -39px rgba(0,0,0,0.8);
box-shadow: 0 58px 30px -39px rgba(0,0,0,0.8);
}

.BMedium.BNormal:before {
right: 60px;
-moz-box-shadow: 9px 25px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 14px 25px 26px rgba(0, 0, 0, 0.3);
box-shadow: 9px 25px 18px rgba(0, 0, 0, 0.3);
}

.BMedium.BNormal:after {
left: 60px;
-moz-box-shadow: -9px 25px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -14px 25px 26px rgba(0, 0, 0, 0.3);
box-shadow: -9px 25px 18px rgba(0, 0, 0, 0.3);
}
/* DARK */
.BMedium.BDark {
-moz-box-shadow: 0 58px 26px -36px rgba(0,0,0,0.9);
-webkit-box-shadow: 0 60px 44px -39px rgba(0,0,0,0.9);
box-shadow: 0 58px 30px -39px rgba(0,0,0,0.9);
}

.BMedium.BDark:before {
right: 60px;
-moz-box-shadow: 9px 25px 18px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 14px 25px 26px rgba(0, 0, 0, 0.4);
box-shadow: 9px 25px 18px rgba(0, 0, 0, 0.4);
}

.BMedium.BDark:after {
left: 60px;
-moz-box-shadow: -9px 25px 18px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -14px 25px 26px rgba(0, 0, 0, 0.4);
box-shadow: -9px 25px 18px rgba(0, 0, 0, 0.4);
}

/*** LARGE SHADOW STYLES ***/

/* LIGHT */
.BLarge.BLight {
-moz-box-shadow: 0 64px 26px -36px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 66px 58px -39px rgba(0,0,0,0.7);
box-shadow: 0 64px 30px -39px rgba(0,0,0,0.7);
}

.BLarge.BLight:before {
right: 64px;
-moz-box-shadow: 9px 30px 18px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 10px 32px 26px rgba(0, 0, 0, 0.2);
box-shadow: 9px 28px 18px rgba(0, 0, 0, 0.2);
}

.BLarge.BLight:after {
left: 64px;
-moz-box-shadow: -9px 30px 18px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: -10px 32px 26px rgba(0, 0, 0, 0.2);
box-shadow: -9px 28px 18px rgba(0, 0, 0, 0.2);
}
/* NORMAL */
.BLarge.BNormal {
-moz-box-shadow: 0 64px 26px -36px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 66px 58px -39px rgba(0,0,0,0.8);
box-shadow: 0 64px 30px -39px rgba(0,0,0,0.8);
}

.BLarge.BNormal:before {
right: 64px;
-moz-box-shadow: 9px 30px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 10px 32px 26px rgba(0, 0, 0, 0.3);
box-shadow: 9px 28px 18px rgba(0, 0, 0, 0.3);
}

.BLarge.BNormal:after {
left: 64px;
-moz-box-shadow: -9px 30px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -10px 32px 26px rgba(0, 0, 0, 0.3);
box-shadow: -9px 28px 18px rgba(0, 0, 0, 0.3);
}
/* DARK */
.BLarge.BDark {
-moz-box-shadow: 0 64px 26px -36px rgba(0,0,0,0.9);
-webkit-box-shadow: 0 66px 58px -39px rgba(0,0,0,0.9);
box-shadow: 0 64px 30px -39px rgba(0,0,0,0.9);
}

.BLarge.BDark:before {
right: 64px;
-moz-box-shadow: 9px 30px 18px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 10px 32px 26px rgba(0, 0, 0, 0.4);
box-shadow: 9px 28px 18px rgba(0, 0, 0, 0.4);
}

.BLarge.BDark:after {
left: 64px;
-moz-box-shadow: -9px 30px 18px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -10px 32px 26px rgba(0, 0, 0, 0.4);
box-shadow: -9px 28px 18px rgba(0, 0, 0, 0.4);
}

Step 2: Now we're done with the core, Let's add the final code snippet. just add it after the above code snippet, i.e. before ]]></b:skin>.

.set {
width: 380px;
height: 180px;
margin-bottom: 40px;
background: #fff;
padding: 10px;
}
.set img {
width: 100%;
height: 100%;
}
Well, Now you need to hit the Save Template button. That's all. You're done with the addition, the bellow part comes about the implementation to your posts

Note:
    -- width: 380px; is the width of your image, you can change it according to your needs
    -- height: 180px; is the height of your image, you can change this too.
    --background: #fff; is the color of the border of the image.

Step 3: Create a new post, Now in the HTML Section add the following code:
<div class="set BottomShadow BSmall BDark"><img src="_IMG URL_" /></div>

Replace _IMG URL_ with your image url. Now we're done with the complete implementation of bottom shadow add-on in your blog.
If  you have enjoyed this post please take a few minutes to share this post !

Bottom Shadow For Images In Blogger Rating: 4.5 Diposkan Oleh: mohamed lamdoune