AdesBlog.com

3 Free CSS Web Templates

Posted in » Adobe, CSS - by Ades

13 Comments 

Originalix of www.bboy.cz sent me a 3 Free CSS Web Templates. I looked at them and found them quite interesting, they are clean and well designed. As you can see, it’s a variation of one layout in three different colors. Download file contains source file too (.psd - photoshop file).

You can download them here. I have also put them on my shared folder.

CSS Tip: Increasing readability of your blog in one easy step

Posted in » Blogging Tips, CSS - by Ades

19 Comments 

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.

Firefox: changing opacity-level of the image on the fly

Posted in » CSS, Firefox, General - by Ades

7 Comments 

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.

ThickBox3 - Cool Ajax script for image and text display

Posted in » AJAX, CSS - by Ades

1 Comment 

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/

CSS Tool: Pixel to Em Converter

Posted in » CSS - by Ades

5 Comments 

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.

CSSVault sold for $100,000

Posted in » CSS - by Ades

2 Comments 

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

CSS Cheat Sheet - all in one page

Posted in » CSS - by Ades

3 Comments 

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.

How to design Web2.0 sites - Design Guide

Posted in » CSS, Usability - by Ades

2 Comments 

Summary of features covered

1. Simplicity
2. Central layout
3. Fewer columns
4. Separate top section
5. Solid areas of screen real-estate
6. Simple nav
7. Bold logos
8. Bigger text
9. Bold text introductions
10. Strong colours
11. Rich surfaces
12. Gradients
13. Reflections
14. Cute icons
15. Star flashes

www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

24ways.org - 24 ways to impress your friends

Posted in » CSS, Usability - by Ades

2 Comments 

1. Easy Ajax with Prototype
2. An Explanation of Ems
3. Improving Form Accessibility with DOM Scripting
4. CSS Layout Starting Points
5. DOM Scripting Your Way to Better Blockquotes
6. Practical Microformats with hCard
7. Don’t be eval()

…etc

www.24ways.org