AdesBlog.com

One line of CSS code can do so much to improve your blog’s readability. It’s a simple thing to do, yet I see many blogs are not making use of it. It’s the line-height: code in CSS. It defines the space between the lines. Screenshots below show two different pages; one without line-height code and another with line-height set to 20pixels.

As you can see, it’s so much easier to read the second page.

Just add: line-height: XXpx; to your main theme in style.css file

Whitespace around images

Another thing that is usually neglected is, not using whitespace around the images (i.e padding). It’s a simple thing to do too. I have blogged about it here, this post teaches you how to specify margins for your images, so that the text around the image won’t stick to the border of the image.

While these things are fairly simple things to implement in blogs (which many of us do not bother to do it), but the result that they produce is: better blog readability and professional looking blog.

If you are viewing this post in Firefox, then you will be able to see variations of the same picture of me (above) with different opacity levels (visibility levels). For the first picture, opacity level is set to 0.1, and for the second 0.3, then 0.5, 0.7 and finally to 1. This is a great feature in Firefox where you can change the opacity of any image on the fly, just by inserting style=”-moz-opacity:0.5″ in any image code (IMG src).

Example: <img src="photo.jpg" style="-moz-opacity:0.7" />

You can change the opacity level from 0.7 to any number between 0 (totally not visible) to 1 (fully visible). Choose anything in between from 0.1 to 0.9 for displaying the image in partial visibility.

How about MouseOver effect?

That is possible too… mouse over to the picture (left) to see what I mean. This effect can also be done on the fly, by adding additional code to the IMG code of any image. Code to be added is onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6". Again, you can set any number between 0 to 1. In this code 1 is the mouse over opacity level of the image and 0.6 is the mouse-out opacity level (when you remove your mouse from the image).

Example: <IMG style="-moz-opacity:0.6" src="photo.jpg" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">

So, in this code above, there are three opacity levels:

1. For the initial state
2. Mouse-over state
3. Mouse-out state

Usage Suggestion

You can use this effect on some ads, banners, and images where you do not want your readers to be distracted by them. Using this effect will still allow them to view the images in 100% opacity by just mouse-overing on them.

Too bad it does not work on other browsers. There are many cross-browser javascripts for doing these kind of effects. But usually they require you some sort of installation (uploading additional css, js files..etc). But this one doesn’t! And that is the best thing about it.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Here is the examples of what ThickBox can do.

jquery.com/demo/thickbox/

Here is a useful CSS tool that converts size in pixels to relative em units, which are based on a text size.

In case if you do not know what is em, here is a nice article about the difference between using pixels for the text size and em.

Why not px?

The most important thing to keep in mind is that opposed to pixel units, em units are relative to the font size of parent elements. If you take a step back and look at it, everything boils down to the font size of the browser itself – essentially giving the developer no control of the font size of their document. Read full article.

According to Ahmed of TechSoapBox, CSSVault has been sold to Host Gator for $100,000. CSSVault belonged to BloggyNetwork family.

Thanks to Hanafi for letting me know about this.

Source: TechSoapbox

Leslie Franke has compiled a CSS Cheat Sheet all in one page, you can also get this page in PDF form here. He says about his page: “This one page cheat sheet is intended for web developers who are new to CSS and want to have a quick look up guide for CSS related work.”

Here is a similar CSS Shorthand Guide by Dustin Diaz.