Wednesday, August 19

Create Shadow and Round Border with Simple CSS

By creating shadow and round border (border radius) is quite useful to decorate your site template, and also it is easy to do that. You can see how it looks in blockquote and ads banners from this site for the example.

For specific example, We'll give example how to create shadow and round border in blockquote.

Open your CSS from your site template and replace the existing code or opened with the CSS style below (you can customize the size, color, etc, to match your template later):

blockquote{width:90%;background:#FFF;padding:5px 15px; margin:5px;color:#555;
line-height:150%;font-size:12px;border:1px solid #eee;
-webkit-box-shadow:8px 8px 16px 4px rgba(0,0,0, 0.4);
-moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
Save your template and you will see the changes of your blockquote like the one used in this blog (if you don't change anything), but offcourse you can customize it yourself.

If you prefer to use separate style of shadow and round border, here is the code you can use:

/*CSS code to create box shadow*/
border:1px solid #eee;
-webkit-box-shadow:8px 8px 16px 4px rgba(0,0,0, 0.4);
-moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4); box-shadow:8px 8px 16px 4px rgba(0,0,0, 0.4);

/*CSS code to create round border*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px; border-radius: 10px;}
REMEMBER: This code can also be used for any other part of your template. Not only on blockquote, but also image border, banners, image caption and so on.
Newer Post Older Post

    Share This


Post a Comment