Customize It: Part 2

So far, I’ve only made one customization that involves CSS, which I wrote about in the previous post. Now it’s time to show some of the many tweaks you can make with just a little added CSS.

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:

aside{ 
border: 2px dashed grey;
moz-border-radius: 8px;
webkit-border-radius: 8px;
border-radius: 8px;
goog-ms-border-radius: 8px;
background: rgba(204, 153, 204, .5);
}
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:

Simple enough! I edited this image on my own, added it to another post in my blog, then linked to that image on the post. You can link to any uploaded picture, just make sure that it is yours or free for public use. 


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s