High Performance CSS Animation

High Performance CSS Animation

Ensuring your page’s animation running at 60fps (frame per second) is the key to a silky smooth animation. When an animation begins to run, the browser executes your script and start to figures out what it need to paint and composite on the screen. So it is important to know how browser handles animation in order to optimize your script.


Continue reading on High Performance CSS Animation

Build Google’s Material Design Spinner in 10 Minutes!

Build Google’s Material Design Spinner in 10 Minutes!

In this tutorial, you will learn to build a Google’s Material Design progress bar (Indeterminate indicators) for your website & web application.


Continue reading on Build Google’s Material Design Spinner in 10 Minutes!

Build Responsive Image Gallery Using CSS Calc()

Build Responsive Image Gallery Using CSS Calc()

In this tutorial, we will learn to leverage CSS Calc() function to fit 3 images relatively in a row with 10 pixels margin between them.


Continue reading on Build Responsive Image Gallery Using CSS Calc()

Reduce Rendering Time for Page Speed Optimization

Reduce Rendering Time for Page Speed Optimization

Specifying the image dimension will definitely increase the browser rendering & painting performance…


Continue reading on Reduce Rendering Time for Page Speed Optimization

Replacing jQuery Animation With CSS Hardware Accelerated

Replacing jQuery Animation With CSS Hardware Accelerated

We’ll discuss the techniques here,: replacing JQuery animation / transition with CSS Hardware Accelerated transition.


Continue reading on Replacing jQuery Animation With CSS Hardware Accelerated

Create Facebook App Style Slide-Out Navigation

Create Facebook App Style Slide-Out Navigation

This tutorial will show you how to build a Facebook app-like slide-out navigation for your web app using CSS & JQuery.


Continue reading on Create Facebook App Style Slide-Out Navigation

Build Intelligent Layout Using CSS Calc() Property

Build Intelligent Layout Using CSS Calc() Property

The CSS calc() property allows us to calculate a length value using arithmetic expression, which means we can use it to define the sizes of div, the values of padding, the widths of margin, and so forth.


Continue reading on Build Intelligent Layout Using CSS Calc() Property

Design Your Own Responsive Web Template

Design Your Own Responsive Web Template

2012 has been a unusual year in PC market. Pc sales are lower than they were in the previous years. Accoding to the global market research company, Tablets and Smartphones sales are expected to exceed notebook in this year. Nowadays, users no longer just use desktop to view websites. They now use a variety of […]


Continue reading on Design Your Own Responsive Web Template

Solving CSS Float’s Problem

Solving CSS Float’s Problem

A technique to address the problem of CSS float.


Continue reading on Solving CSS Float’s Problem

Develop A jQuery Parallax Scrolling Framework

Develop A jQuery Parallax Scrolling Framework

In this tutorial, we are going to shows you how to build your own Parallax Scrolling effect powered by jQuery.


Continue reading on Develop A jQuery Parallax Scrolling Framework

Android, iOS Development Tutorials