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.

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.

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.

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!

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.

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.

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.

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.