Category: CSS

Weight scale using HTML5 drag & drop and CSS3 rotation

Lets start with a demo (only works in chrome). Weight scale Usage Drag and drop weight block into scale [over doted outline]. Double click to remove a weight. Demo uses jQuery for DOM manipulation, css3 rotation for needle movement. HTML5 Drag ...

StyleDocco – Create generated style guide and documentation for your web project

StyleDocco is a style guide and documentation generator. It parse CSS comments in your stylesheet and creates style guide based on the comments. Its a nodejs package and can install using npm install. Example style document generated using styledocco - twitter ...

CSS3 :target pseudo-class – Pure CSS based tab, lightbox and notification

Check out the demos to know what we are going to achieve with pure CSS. Pure CSS tabPure CSS image lightboxPure CSS notification Basics of target Target is a css3 selector. You can select an element using fragment identifier & id. Clicking on a ...

Simplest full fledged code editor using data:text/html

In one of Paul Irish's presentation "The Primitives of the HTML5 Foundation". He showed creating a simplest code editor using data uri [link]. Inspired from it, I created a small full fledged JavaScript code editor [code highlight & line number] ...

Centering an element with percentage height & width using CSS [Experiment]

Its just a quick post on a small issue I came across, when trying to center a div using absolute. There are couple of methods to make an element center. Quick way is to make it absolute & give 50% ...