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.
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.
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.
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).
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.
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!
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).