Useful CSS3 Tools

CSS3 is out for a while, we are so excited to see the new features and glad we could simply use css to get somewhere we must get help by images & JavaScript before. CSS3 has been used in real projects, and a lot web designers are making experiments and showing us the amazing results.

I would like to share some tools which help us to use CSS3 easily here.

1. CSS3 Features Preview

CSS3 previews shows you the examples of CSS3 most popuplar and ready to use features, and explain how it work.

2. Web Font

Limited fonts we could use in web is always a big pain in ass though we have Multiple-Approach to get beautiful fonts in web by Font-Replacement Solutions, such as SIFR, FLIR, Cuf√≥n, etc. CSS3’s @font-face is a great way to use pretty fonts wherever we want. With a little help from the tools below, the job will be easiler and possible.

Font quirrel Font-face Generator


Simple magnifier / zoom effect by jQuery & CSS3

Did you ever see a magnifier glass in a web page? When your mouse move over a small image, you could see the details in the magnifier glass? And would do you like to make the zoom effect in your own web page? Let’s write some simple lines by jQuery to have the task done.

Click here to see the demo page
Download the Demo pages

First, let’s put the image in the page, and give it a width and height to make it smaller.


<div class="zoom">
	<img src="blueDoor.jpg" width="400" height="265" />

We will show the big image in the magnifier glass as background image, and change background image position while user move the mouse. If the mouse move out of the small image, we fade out the magnifier glass, vice versa. There is an illustration to show how we calculation the positions.


Make equal height columns by jQuery

We use equal height column layout in web page a lot. If we have to use pure CSS, probably we would give the column container a repeat-y background image( like the image below) to make the columns look with equal height.

In this case, the columns do not really have equal height, but look in that way with the background image. If you want change the column’s background, border, spacing, etc., you will have to edit the background picture. It’s sort of annoying, especially for UI. However, with a little help from jQuery, we can get equal columns easily.

Two columns layout


Multiple Approah to Zebra Table(alternate row backgrould color)

Table was used to manage layout in the past, but after CSS was introduced to the internet world, table quits the job it’s not capable for and steps back to it’s original task: arrange data into rows and columns of cells. In UI design, zebra table is the most common way to display data, alternate row with different background color will guide our eyes along the row. It’s not a difficult job, and there are different approaches to achieve the result


5 Tips for Improving User Interface Design

How we make users have great experience when they start to use the service the website provides is always a challenge, and with time and improved techniques, users have different expectations. We have to consistently test, analysis, and improve. There are 5 tips I would like to share:

1. Show steps

Showing step number helps users get idea where they are and what they have to do to finish the process.

2. Inline form validator

Well designed form is especially important and inline validator makes the filing processing clear and bearable.


Web Designer&Developer’s goal is to help the audience get their needs effortlessly

In today’s world wide web, there are millions websites out there, and millions are on their way to get there. We cannot help but wonder: what are these websites doing? what’s the purpose of a website? what can we do to make a website stand out? what can web designer&developer help?

Contend is the king

A website has to provide something useful and unique to attract and keep users. Content is the thing to make your site stand out, is the thing you should focus on, is the actual number. Design, technology, SEO and etc. are the help we provide, are the number “0” which follows the content number. These stuffs alone are nothing, professional help cannot improve poor content a big deal.

No fancy website

We do NOT need a fancy website, unless the website is about fashion, arts, movie, music or something else like that. Especially, for a serious commercial website, the only thing user should noticed is what they want to find, what the website is there to offer for. Users’ attention should not be distracted by pointless images/animation, useless flash, or annoying background music. Everything in a web page has a purpose: giving users what they need; design elements there only has one goal: helping users get what we offer.


Automatically Highlight Current Page in Navigation with CSS & jQuery

It’s common that we want to highlight the current page in navigation to tell users where they are now, and it’s very easy to do it with CSS. Just by adding a class “highlight” to < li > tag and write the style we want in stylesheet. Let’s start it with a simple page:

HTML markup
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li class="highlight"><a href="product.html">Product</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
Style Sheet
<style type="text/css">
a, a:visited{color:#000; font-weight:bold; text-decoration:none;}
ul.navigation{list-style:none; font: 0.75em/1.5em normal Tahoma, Verdana, Geneva, sans-serif;}
ul.navigation li{ background:#ececec; margin:1px;padding:5px 15px; display:block; float:left;}
ul.navigation li.highlight{ background:#666;}
ul.navigation li.highlight a{ color:#f5f5f5; cursor:default;}

Then, we will get a page look like this:

screenshot of highlight navigation

However, we have to change class “highlight” position in each page in order to show the highlight link correctly. It’s not convenient when we have a complicated navigation, and how about when we have to write php/asp templates or .net masterpages? Can we use exactly same html code in each page but highlight the navigation link automatically? The answer is YES. Few lines of jQuery code will simply does the trick. Let’s still paly with this simple page to explain the idea.