April 30, 2015

Material Design Preloader

Material Design Preloader

A CSS3 only solution that recreates the Material Design preloader without any JavaScript or jQuery. You should set aria-busy to false when your stuff is loaded.

Scroll to down icon

Scroll to down icon

Mouse shaped scroll down icon indicating scroll down for more.

April 29, 2015

Color fun

Color fun

Another CSS3 experiment. Its like the wings of the dragon fly which is colorful or its like a disco light or whatever.

April 28, 2015

Upload button with progress

Upload button with progress

A simple material design upload button showing a progress indicator. I have used fontawesome for the icons.

Crazy cow

Crazy cow

Another CSS3 experiment. Where the eye balls changes its view continuously by animation element present in CSS3. For each 5% of the keyframe the eye balls move top and left.

April 25, 2015

Animated weather icons

Animated weather icons

Various weather animated icons with no images. It's purely CSS. Just click the button and see the various animation effects. Weather animations like rain, sun, moon, storm, cloudy, snow, wind, tornado, fog, rainbow.

Cubes scoots around with shadow

Cubes scoots around with shadow

Two 3d cubes scoots around with shadow effect. This can be used as a page loader.

April 24, 2015

Monster eye

Monster eye

Monster eye using CSS3. There are 3 buttons to close or open eye, view right and left.

Heart envelope

Heart envelope

A single element heart with css3 animation. Here the heart gets fold on different direction still having the heart shape.

Mosaic pattern

Mosaic pattern

The canvas element is only a container for graphics. You must use a script to actually draw the graphics. The mosaic pattern is drawn into the HTML5 canvas element via scripting (usually JavaScript).

April 23, 2015

Colorful ring rotation

Colorful ring rotation

Here the ring rotates continuously. The rotation is done using CSS3 animations. The rotation stops when clicked on pause and starts playing when click on play. Each ring is of different colors.

Ring rotate

Ring rotate

Here the ring rotates continuously. The rotation is done using CSS3 animations. The rotation stops when clicked on pause and starts playing when click on play.

Cross stitch butterfly

Cross stitch butterfly

Cross stitch butterfly pattern using css and javascript.

April 22, 2015

Tic Tac Toe

Tic Tac Toe

Tic Tac Toe a game suitable for all ages is created using CSS and html alone without any javascript.

April 16, 2015

April 15, 2015

Fixed header on scroll

Fixed header on scroll

You need some JS to do scroll events. When scrolling goes to a certain point the header gets fixed.

April 14, 2015

Skype logo using CSS3

Skype logo using CSS3

Just wanted to create logos using CSS3 with no images. It's just simple. This is done using CSS3.

April 13, 2015

Heart pixel animation

Heart pixel animation

Done using CSS3 animation and animation-delay properties. No javascript or images used here.

CSS3 full page loader

CSS3 full page loader

Another page loader here using CSS3.

Fire style loader

Fire style loader

Another page loader here, using purely css and no images used.

April 10, 2015

Face expression animation on tab change

Face expression animation on tab change

Make Hippie piss off and you will be in trouble. Just open the demo and change over your browser tab. Each time when you change over your browser tab Hippie changes his expression. Try em out!

Cube resizing 3d

Cube resizing 3d

Another experiment with CSS3. CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat.

April 8, 2015

Search box animation using CSS

Search box animation using CSS

Just another experiment by me using CSS and jQuery. Here when the user hovers on the search icon it changes to a search box whre the user can type in.

April 3, 2015

CSS3 text hover effect

CSS3 text hover effect

Just an experiment on text hover effects. The text effect is done by skew and rotate properties in CSS3. This is a full width page and responsive on all devices.

April 2, 2015

Nested circles and squares nested inside each other

Nested circles and squares nested inside each other

A nested circle on hover changes to squares nested inside each other. It is done by transition/animation properties in CSS3.

April 1, 2015

Amazing frog animation using CSS

Amazing frog animation using CSS

Amazing frog animation using CSS. You wont believe it there are no images used here. Each parts are drawn using CSS. The smile and eye lid close animation is done using CSS animations.

Wake me up - Animation with CSS selectors

Wake me up - Animation with CSS selectors

Experimenting animation with selectors in CSS. You can also combine pseudo selectors e.g: button:hover:after, which can be used to add a hover effect.

Popular Posts

Views