How To Add Shadow And Round Corner to Blockquote

Blockquote can be style with different effect if you know the required code that need to be included, your ability of customize blockquote depends on your knowledge about CSS. In this tutorial, i am going to discuss on how you can add shadow effect and round corner to your blogger blockquote which will make it oustanding in look and feel. For a better understanding of this tutorial, it is advisable that you read the tutorials listed below.

Blockquote Tutorials

Customize blockqoute with light bulb effect on mouse hover

12 awesome ways to customize blockquote in blogger blog

How to add shadow and round corner to blockquote

How To Add Shadow Effect

You will need to locate your blockquote css code in your template, it will look very similar to the one below
I will be using the code below to sight and example on where to add the shadow effect css code to your existing blockquote css code.

.post blockquote {
background: #F3F3F1;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: bold 1.1em "comic sans ms", arial, Helvetica,verdana, Georgia;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Now to add the shadow effect, add the code below to your blockquote css code.

  -moz-box-shadow: 0px 5px 15px #ccc;

  -webkit-box-shadow: 0px 5px 15px #ccc;

  box-shadow: 0px 5px 15px #ccc;

After adding your result should look like the example below.

.post blockquote {
background: #F3F3F1;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: bold 1.1em "comic sans ms", arial, Helvetica,verdana, Georgia;
}
.post blockquote p {
margin: 0;
padding-top: 10px;

 -moz-box-shadow: 0px 5px 15px #ccc;

 -webkit-box-shadow: 0px 5px 15px #ccc;

 box-shadow: 0px 5px 15px #ccc;

}

The code written in green above is the shadow effect css code.

How To Add Round Corner

I will also be using the above code as an example on how to add the round corner css code to your blockquote. After locating your blockquote code, add the css code below to your existing blockquote code.

-moz-border-radius: 15px;
border-radius: 15px;

Now, after adding the round corner css code, your final result will look like the example below.

.post blockquote {
background: #F3F3F1;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: bold 1.1em "comic sans ms", arial, Helvetica,verdana, Georgia;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
-moz-border-radius: 15px;
border-radius: 15px;
}

The code written in green above, is the round corner css code.
Now, if you want to add the two effect to your blockquote, simply add it as shown below

.post blockquote {
background: #F3F3F1;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: bold 1.1em "comic sans ms", arial, Helvetica,verdana, Georgia;
}
.post blockquote p {
margin: 0;
padding-top: 10px;

 -moz-box-shadow: 0px 5px 15px #ccc;

 -webkit-box-shadow: 0px 5px 15px #ccc;

 box-shadow: 0px 5px 15px #ccc;

-moz-border-radius: 15px;
border-radius: 15px;
}

Hope this help's? take few seconds to share it with friends/follower. Peace pals! :)

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz