Simple Blogger Tutorials

CSS3 and Blogger

Do you know that my blog uses some properties of CSS3? For example, look at my main-wrapper and sidebar, you will find that there are shadow effects. If you look at my footer, there you can find text-shadow effects. All the new versions of browsers mainly Firefox (3.5+), Opera (10.5+), Chrome (5+) and Webkit/Safari (3.1+) supports CSS3, while IE (9+) support very few (till date).

CSS and Blogger

What are the Styles that can be Done by CSS3 in Blogger?


So let’s have a look at the styles and properties used for each (supported in all the browsers mentioned above except IE):
1.
Background colors with RGBA and transparacy
background-color: rgba(100, 100, 100, .7);
2.
Rounded Corners in Blogger.
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
3.
Amount of border radius and corners to particular sides.
-webkit-border-top-left-radius: 150px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 150px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 150px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 150px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 150px;
border-top-right-radius: 0px;
border-bottom-right-radius: 150px;
border-bottom-left-radius: 0px;
4.
Box Shadows Effects that can be used for styling Blogger sections like: header, main-wrapper or sidebars.
-webkit-box-shadow: 10px 10px 2px #969696;
-moz-box-shadow: 10px 10px 2px #969696;
box-shadow: 10px 10px 2px #969696;
5.
Text Shadow
text-shadow: 5px 5px 3px #b8b8b8;

"-webkit-border-radius" is used for Webkit browsers, "-moz-border-radius" for Firefox and "border-radius" for Opera.
Find out more at Web Designer Wall: Basics of CSS3.
Reference: W3.org: Introduction to CSS3

Adding rounded corners in Blogger

Let’s take the example of header. If you want to have rounded corners for the header section of blogger then find for:
#header {
(Styling properties goes here)
}
And add:
#header {
(Styling properties goes here)
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}
The same can be done with outer-wrapper, main-wrapper and sidebars and get rounded corners for each section in Blogger.
Like