This is a request post from my reader. He asks me how to create a simple menu that have a flying effect when user hovering them using only CSS. As we know CSS3 is more powerful with its transition property, it help us creating animation without any JavaScript or even Flash help. We’ll use them for creating the flying effect and here is the result. Enjoy!
Read the rest of this stuff »

Tags :   Code Snippet    CSS    Menu  

Share :           [CodeSnippet] CSS3 Flying Menu (via @hdytsgt)

In this tutorial we are going to create our own dashboard menu as in Leopard dashboard. Dashboard menu in Leopard usually uses as a container for a tons of widgets we have and that will be nice if we have one on our web application. First, take a look at below demo to know the result we want to build.
Read the rest of this stuff »

Tags :   CSS    jQuery    Menu  

Share :           Create Your Own Dashboard Menu (via @hdytsgt)

As we know, CSS3 has many good features for help us creating more sweet User Interface. One of them is box shadow, it helps us adding shadow effect on each styled element. You must be familiar with drop down menu with shadow effect on it, I usually add the effect using some images but now we’ll create that one using pure CSS.
Read the rest of this stuff »

Tags :   CSS    Menu  

Share :           Simple CSS3 Dropdown Menu (via @hdytsgt)

Twitter has a nice effect in presenting their tweet box by adding outer glow effect on it while the tweeps are tweeting. If you’re webkit-based browser user you must’ve notice that glowing effect works with the animation. We’ve discussed that technique on previous post (Stylize Input Element Using CSS3), the thing we’ve not yet do is adding the animation on it. Read the rest of this stuff »

Tags :   Code Snippet    CSS  

Share :           [CodeSnippet] Twitter-like Input Using CSS3 (via @hdytsgt)

Tobias Ahlin is a great designer from Sweden, I admire his work and his way showcasing his portfolio. It comes up with the list of all his works and the anchor for filtering work type above them, we can choose one of the filter and it’s automatically hiding and showing portfolio item using horizontal slide effect. Now, in my view, I am going to explain how they beautifully works. Read the rest of this stuff »

Tags :   CSS    jQuery    Menu  

Share :           Filter Image View Using jQuery (via @hdytsgt)

This post is the sequel post from “Photoshop Effect vs CSS3 Properties“, as you know on previous post we have tried to maximize the CSS3 power to create Photoshop-like effect. So, as I promised earlier, this post will explain how to use CSS3 properties only to create CSS Music Player Menu. Read the rest of this stuff »

Tags :   CSS  

Share :           CSS3 Music Player Menu (via @hdytsgt)

Stuff collections is one of the two topics (Tutorial and Stuffs) i featured on this blog, it contains daily update for any useful stuffs I collected from all over the web for web development (such as free themes, icons, plugins, etc.), but recently I hesitate to keep it running for some reason. Read the rest of this stuff »

Tags :   Intermezzo  

Share :           Announcement : Stuff & Community News (via @hdytsgt)

In previous tutorial I was explained how to stylize input element with photoshop effect (color gradient, smooth border, box shadow, drop shadow) using CSS3 only. In this post We will play in depth with them, since they have advantages on their own field I’m not going to compare both of them nevertheless. Read the rest of this stuff »

Tags :   CSS    Forms    Menu  

Share :           Photoshop Effect vs CSS3 Properties (via @hdytsgt)