Learn and share. The simplest harmony.

 

How To Create Animated List View Using CSS3 Only

Posted on April 19, 2012 and got 12 shouts so far

Listing items with some optional list view is a good practice to make user more comfortable on viewing our item list and it will be more nice to add some animation when they change the list view. In this post we are going to create an animated list view using pure CSS3 only.

 

Create Elegant Modal Window Using CSS Scale Transform

Posted on April 8, 2012 and got 8 shouts so far

Modal Window has become one of most important items on developing website or web application. It is useful for showing additional information or simple pages such as login form, in order to avoid new window. In this post we’re going to use scale transform to make our modal window more elegant.

 

Designing MacBook & iMac Using CSS3

Posted on March 31, 2012 and got 6 shouts so far

If you read my two previous posts (Photoshop Effect vs CSS3 Properties and CSS3 Music Player Menu) that explained about how strong CSS3 can do Photoshop’s job you must be familiar with some CSS tricks for creating some Photoshop-like effect. In this post we’re going to design Macbook & iMac using these tricks.

 

Auto Moving Submenu Using jQuery

Posted on March 23, 2012 and got 11 shouts so far

Today we’re going to create an automatic moving submenu based on selected its parent. Each submenu is horizontally stacked, sequentially in the order of their parent menu. So when user moving their cursor to the one of parent menu its submenu will appeared by moving its horizontal position.

 

Creating Consecutive Slide Using jQuery

Posted on March 17, 2012 and got 6 shouts so far

On displaying product items sometimes we need to slide each item consecutively not to slide each block of a group items. In this tutorial we’re going to create them using jQuery with the help of JavaScript native function window.setTimeout for holding animation sequence of each item.

 

Using Pictogram Webfont for Replacing Image

Posted on March 9, 2012 and got 6 shouts so far

Saving HTTP Request is one of many concern for webpage performances, using image sprites is one of them but how about if we have a font collection that can replace these image sprites? In this post we’re going to utilize pictogram webfont for replacing image that usually we use. We’ll utilizing this pictogram on many item including button, badge, headline text, form input, unordered list and navigation.

 

Sweet Tooltip a jQuery & CSS3 Tooltips

Posted on March 1, 2012 and got 30 shouts so far

Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip but seven. This imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selector, etc. I created this tooltip with aim for having a style-independent tooltip, so, for future usage I can pick or create a suitable-style tooltip with the project I’m working on, please enjoy!

 

Styling Form Elements Like Google Chrome’s Preferences

Posted on February 23, 2012 and got 10 shouts so far

I adore Google Chrome’s way for styling their form elements on Preferences panel. It’s simple and elegant, so I decide to recreate them for future usage. The form elements including button, radio button, checkbox, dropdown list and input text were stylized using CSS but the dropdown’s arrow and checklist image. Despite using images we’re going to create them using CSS only.