Maximize the Use of Hover 136

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.

Dache: Logo Design Process 182

Dache: Logo Design Process

Previously, I have featured David Pache of Dache on WDW, an amazing logo designer from Switzerland. He is known for designing unique and colorful logos. I'm very glad to have David to share his design process of the WebMYnd's logo. This case study (written by David himself) provides full creative brief and progress images from start to final. Read on to find out how David got inspired by Wassily Kandinsky's art (one of the most famous 20th-century abstract artists) to create this fantastic logo.

jQuery Sequential List 151

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

CSS: Menu List Design 147

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

Design Process of the Phoenix 235

Design Process of the Phoenix

This post will show you the design process of the Abstract Chinese Phoenix, one of my latest illustrations which was presented at the FOWD 2008 conference. I will briefly guide you through the process — from sketching to polishing. Hints and tips will be provided throughout the article. Most importantly, I'll explain what inspired me for this piece of artwork. If you like this illustration, you may download a high resolution JPG for your desktop wallpaper.

Photo Strip (Photoshop Tutorial) 337

Photo Strip (Photoshop Tutorial)

This is a Photoshop tutorial on how to create a beautiful photo film strip, as seen in Apple's iLife package design ('06 version) and DigitalMash website. The warp tool will be used to create the twisting effect (so, you need Photoshop CS2 or above to complete this tutorial). With the completion of this tutorial, you will be able build a photo strip with your own photos or artwork. Don't miss out this fantastic feature!

View Final Image

Download Photoshop File

Exporting and Importing WordPress 260

Exporting and Importing WordPress

In the last two chapters, I talked about Installing WordPress Locally and Building Custom WordPress Theme. This chapter will cover exporting your local WordPress to a web host. Assume you are done with the local WordPress development, it is time to learn how to export and import WordPress. Then you can keep the local version for backup purpose and future development (ie. testing new themes, plugins, and upgrades).

TWEET & SAVE: tweet a message to receive a 15% Themify discount code instantly. Tweet it now!