Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How To Add Shadow And Round Corner to Blockquote

by Durodola Ridwan | Thursday, September 20, 2012 | 2 Comments

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
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!".

2 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger