Learn and share. The simplest harmony.

 

How to Create a Walking Navigation

Posted on February 16, 2012 and got 6 shouts so far

On a single page website with fixed position navigation, it will be nice to tell user on what section they are reading at. In this tutorial I am going to share how to create a walking navigation, on the other words, auto focus navigation based on user scrolling, by taking advantage of both jQuery and CSS animation.

 

Creating “Next Level” Search Form Using jQuery & CSS3

Posted on February 7, 2012 and got 34 shouts so far

Lately we found ton of new style search form crafted beautifully using CSS3 and JavaScript. Apple’s for example, widen the input field when it receive focus from user. The question is “how far we can go for styling search form?”, in this tutorial we are going to move search form to the next level using jQuery & CSS3.

 

Enhance Type and Spot

Posted on September 30, 2011 and got 2 shouts so far

In previous post (Type and spot using jQuery’s :contains()) we have create a simple content spotter using :contains() selector, the possibility to spot an element using that technique are numerous, by hiding and showing in animation for example.

As you remember in another post (Filter Image View Using jQuery) we have try to create a filter image view using horizontal slide effect. The effect would we add to show or hide the element that contains or not contains the text we specify.

 

Type and spot using jQuery’s :contains()

Posted on September 20, 2011 and got 9 shouts so far

Today I’m going to share a tutorial on how to create a simple content spotter using one of jQuery’s selector, :contains(). This selector, as in jQuery’s description, will select all elements that contain the specified text. Using that ability we can find any element that contains the text we specify and modify the selected element, for example, we have a numerous unordered list item on our webpage yet hard to find the one we need, we can use :contains() to select and spot the matched element with the text we specify.

 

Free PSD : Sticker Buttons

Posted on November 28, 2010 and got 11 shouts so far

Today I am giving away a PSD file named Sticker Buttons, a sticker-style buttons collection. The PSD file contains 56 buttons in four different colors and 14 different button icons. The button’s type including Download File, Upload File, Attach File, Lock Folder, Unlock Folder, Mail Invoice, Save Changes, Refresh Content, Sample Tag, Copy Content, Paste Content, Cut Content, Quick Look and Add Plugin.

 

[CodeSnippet] CSS3 Flying Menu

Posted on June 25, 2010 and got 15 shouts so far

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!

 

Create Your Own Dashboard Menu

Posted on June 16, 2010 and got 13 shouts so far

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.

 

Simple CSS3 Dropdown Menu

Posted on June 10, 2010 and got 26 shouts so far

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.