Water Drop Effect in HTML & CSS

The best way to learn anything is by doing it, plain and simple, trial and error. With the explosion of mobile devices and the evolution of HTML5, CSS3 and browsers, knowing to code is almost a…

SVG Drawing Animation

A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them. SVG is finally becoming a more…

CSS3 Hover Effects Collection

I recently wrote a tutorial on how to create a CSS3 hover effect, the tutorial used CSS3 transitions, transforms and delays. The final result was an image which on hover an overlay rotated in with…

Free square social Icons

Free square social Icon set consist of eleven sizes, black and white, from 16px upto 4096px. with an accompanying list of colour codes. See the icons and colours at simpleicons.org. The Simple Icons…

Sticky headers and columns for tables

A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem…

Progress button styles

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the…

Syntax highlighting for the Web

Highlight.js highlights syntax in code examples on blogs, forums and, in fact, on any web page. It’s very easy to use because it works automatically: finds blocks of code, detects a language,…

Block scroll jQuery Plugin

Block scroll is a jQuery plugin that turns a set of DIV elements into a blocks and displays them one screen at a time. The idea is to break up your page into chunks for better presentation and…

Jeditable jQuery Plugin

Jeditable is a jQuery plugin, which allows you to click and edit texts in elements with few lines of codes. The plugin was based on Dylan Verheul’s editable. Normal flow is this. User clicks text…