12 CSS Tools 2014

In this post, i have collected new CSS tools that every developer and designer should know about. Hope you’ll find the list below handy.

10 Impressive CSS3 Tutorials & Demos

Here are 10 impressive demos and tutorials of a new CSS3 feature that you can’t wait to start using it in websites.

Pure CSS3 Lightsaber Checkboxes

Pure CSS3 Star Wars Lightsaber Checkboxes. This is a quick fun little project built to demonstrate the power behind CSS3, and an awesome little checkbox hack (:checked ~ div). Not “too” practical for UI/UX, but overall some cool code.



This Hyperspace demo looks just like traveling through hyperspace in virtually every sci-fi film out there. It’s a really neat effect, and while not practical, it’s yet another great example of what you can achieve with CSS3.


Make a calculator using Javascript and CSS3

Learn to make a cool looking calculator using Javascript and CSS3. CSS3 box shadows are used to create the 3D effect and transitions are used for the smooth press effect. Basic regex is used for validations and text replacements. For every button(number or operator) pressed, the value is appended to an equation string displayed on the calculator screen which is later used in the JS eval function to generate the output.


CSS3 Pong – with scoring

An exercise in the futile but fun. This is a playable version of Pong complete with working scoring system — built entirely with CSS. Not a line a Javascript to be seen. All game logic is built using hover state and sibling selectors.


Tearable Cloth


Perspective Mobile App Mockups

Make some cool looking perspective mockups for your designs using CSS3 3D transforms. Very basic usage of 3D transforms but impressive visuals achieved. Great for starting 3d stuff if you haven’t yet.


Grid Animation Effects

A small and simple walkthrough showcasing the usage of jQuery .delay(), jQuery easing plugin, and CSS3 transforms to animate some thumbnails in a grid. On clicking the animate button the thumbnails disappear randomly with a ripple effect and quickly storm back in from the left in a cool 3D way.


Animated SVG Icons with Snap.svg

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.



Odometer is a Javascript and CSS library for smoothly transitioning numbers. Odometer’s animations are handled entirely in CSS using transforms making them extremely performant, with automatic fallback on older browsers.


Logos In Pure CSS

Company logos created in pure CSS. Hover or tap over the icons for a behind-the-scenes reveal.


7 Pure CSS Tooltips

A long time ago if you called to develop a stylish tooltip or a message bubble with flexible content you would need a lot of time and images to create a stylish flex box. Now you just need one or two containers with some lines of CSS, no images and no javascript.

8 Amazing Clocks Rendered Using CSS

Animation are relatively new and super awesome CSS property that allows web designers to create cool jquery-like effects using only a couple of lines of CSS. Here are awesome clocks based on the power of CSS3 transforms and transitions.