Apr 30

Tagged in: , Comments: 95

Maximize the Use of Hover

Maximize the Use of Hover

Usually, we create hover effects by changing: font color, font styles, border styles, background, and etc. But there are a lot more that we can do with hover. We can use hover to beautify design, minimize clutter, and display additional information. In this article, I’m going to provide various examples of websites that maximize the use of hover. Also, I will provide several quick tutorials on how to create different mouse hover effects. So, read on.

Delicious Stumbleupon Digg

Feb 09

Tagged in: , Comments: 72

jQuery Sequential List

jQuery Sequential List

Have you ever had to manually code something that is sequential? Didn’t you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.

View Demo Sequential List

Delicious Stumbleupon Digg

Jan 30

Tagged in: , Comments: 83

CSS: Menu List Design

CSS: Menu List Design

This is a quick CSS tutorial to show you how to create a menu list using either the CSS border style or a background image. The trick is to apply a bottom border to the <li> element, then use the absolute position property to shift the nested elements down to cover the border. It is very flexible — you can easily change the layout by altering the border or background image. It even works when the browser’s font size is being scaled (increased or decreased).

View Demo Menu Design

Delicious Stumbleupon Digg

Dec 15

Tagged in: Comments: 117

Fonts and the Web

Fonts and the Web

Guest Post By: Juul Coolen

The web, and consequently its visual appearance, is dynamic by nature. For one, browsers interpret pages and show them accordingly. In a standards-compliant world every browser would adhere to the standards as set out by the W3C so pages look the same in any browser, but we all know the actual state of affairs. Granted, things have significantly changed over the last couple of years. ‘Bad’ browsers are phasing out (albeit slowly), handing over control to the designers by means of CSS. Which doesn’t mean total control, though. Especially when (enviously) looking at the area of print, there is one facet in particular we would love to be able to borrow: typography in all its glory. Or the way Jeffrey Zeldman puts it:

"The less sophisticated lament on our behalf that we are stuck with ugly fonts."

Delicious Stumbleupon Digg

Dec 05

Tagged in: , , Comments: 206

Best of CSS Design 2008

Best of CSS Design 2008

Last December, I posted a list of the best designs in 2007. Now, it is time for — Best of CSS Design 2008 (a new list of 50 websites hand-picked from Best Web Gallery). This year, more designers are using the large background technique and utilizing Javascript frameworks (such as jQuery and MooTools) to enchance the user experience. I also came across a few designs that mixed Flash with CSS; perhaps a new trend we should look for in 2009?

Delicious Stumbleupon Digg

Oct 20

Tagged in: Comments: 286

How to: CSS Large Background

How to: CSS Large Background

Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.

Delicious Stumbleupon Digg

May 27

Tagged in: , Comments: 374

CSS Decorative Gallery

CSS Decorative Gallery

Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).

View Demo Gallery

Download Demo ZIP

Delicious Stumbleupon Digg

Older Posts

Back to top