Archive for the ‘CSS’ Category

Useful CSS3 Tools

Wednesday, January 11th, 2012

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

Read more…


Simple magnifier / zoom effect by jQuery & CSS3

Friday, October 28th, 2011

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.

Read more…


Multiple Approah to Zebra Table(alternate row backgrould color)

Thursday, May 5th, 2011

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

Read more…


Automatically Highlight Current Page in Navigation with CSS & jQuery

Tuesday, August 3rd, 2010

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.

Read more…


© All right reserved by Jessie Su. Powered by WordPress