Shadows:
The shadows, or shading, around different elements of your blog can add depth and grab attention. Shadows can make elements of your page pop out or sink in. This is the code you'll need, shown here with no values:
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0);
To get the desired effect, I have to add the size of the shadow in pixels (px) in the first set of zeros, the color in rgb values the next three zeros, and the opacity as a decimal in the last zero.
-moz-box-shadow: 20px 5px 10px rgba(0, 0, 0, .5); -webkit-box-shadow: 20px 5px 10px rgba(0, 0, 0, .5); -goog-ms-box-shadow: 20px 5px 10px rgba(0, 0, 0, .5); box-shadow: 20px 5px 10px rgba(0, 0, 0, .5);
Going in order, "20px" is the size of the shadow on the right, 5px is the size of the shadow on the bottom, 10px is how blurry the edge is (0px makes a hard, sharp edge on the shadow). The next three zeros determine the color, but I wanted it to stay gray, so I left them all at zero. Because they indicate the values of red, green, and blue respectively, I could make a purple shadow with "rgba(128, 0, 128, .5)". You can find these values for any color in most image editing programs, but if you aren't too particular, look here. The last value must be a decimal for the opacity of your shadow. "0" would mean you can't see it, 1 would mean it's a completely solid color. I went in the middle with ".5"
Because Blogger will show the changes as you make them, you will see how these values affect your page.
Now for a bit of magic: if you would rather have an inset shadow, all you have to do is add "inset" after each colon.
-moz-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5); -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5); -goog-ms-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5); box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .5);
I changed the shadow to be smaller, since a big inset shadow overlaps the text.
And there you have it! Shade away!
Borders and Corners:
Though some page elements allow you to change the borders of different page elements, the option is not always there. Similarly, some designs have rounded corners and others don't. Here's how to change both
The sidebar content in the design I picked for the test blog did not have a border around it or a background. I added a dashed border, rounded corners, and a transparent background to the stuff in the sidebars like this:
The sidebar content in the design I picked for the test blog did not have a border around it or a background. I added a dashed border, rounded corners, and a transparent background to the stuff in the sidebars like this:
aside{
border: 2px dashed grey;
moz-border-radius: 8px;
webkit-border-radius: 8px;
border-radius: 8px;
goog-ms-border-radius: 8px;
The first statement, "border:" is of course the border. 2px is the thickness of the border. "Dashed" is the style of the border. (Solid, dotted, dashed, and double are among your options.) "Grey" is the color. If you want a different color, you can use words, hexadecimal or rgb colors. The next four statements are about the rounded corner. It's the same rule stated for each type of browser. The bigger the number, the more rounded the corner. The last value is for the background color. I used rgba so I could have a transparent color, just like the shadows above.
Another quick note, you can use multiple border styles together, or just put border on certain sides. Read more about that on w3schools.
Hover
Hover is usually associated with links, but it can be used on any element. I'm going to use it for rollover image effects in my sidebars. Here's the CSS I used on the side bar elements to make them show a clip from the background when you hover over them:
aside:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Tm7fVyaoiHubFdDqwocGdj27H3SSQP4Rv_w7A5-mq9GrmvxJA-xfqSVNWvYQkvovr9fpZutWskWlJ2QHyrXINOHs4genAyn3OjEVnorSu3StoU4IkL9sok-0hccFb6-Tztl532GNKA/s1600/blogbackground.jpg) ;
}
