December 8, 2015

Simple slider without any framework

Simple slider without any framework

A simple slider without using any framework. It is done using pure javascript. Easy to create when you learn it, later you will not search for any sliders. You will love to write your own slider.

December 6, 2015

Hide div on scroll down, show on scroll up

Hide div on scroll down, show on scroll up

Fixed headers are fairly common nowadays with big name brands. More and more people are using mobile phones where screen real estate is a commodity. Even on desktops and tablets applications that get out of the way and let users focus on content feel better. There’s more room to breathe; your eyes don’t feel like squinting.

December 5, 2015

Minimalist login box

Minimalist login box

A minimalist and a futuristic login box for you. It looks simple and clean without using more spaces. You can reduce the width of the box if required. It is purely responsive.

November 25, 2015

Fancy navigation

Fancy navigation

A fancy navigation style based on the material design and animations.

November 17, 2015

Smooth scrolling full width page

Smooth scrolling full width page

Responsive smooth scrolling full width page. It is done with the help of fullpage jquery.

November 10, 2015

Happy Halloween

Happy Halloween

Halloween pumpkin made using box-shadows, clip paths and html shapes. The highlight thing is the candle effect which is done using CSS animations.

August 25, 2015

Install Ember

The Little Techie

Ember.js is a framework for creating ambitious web applications. Ember.js is an open-source JavaScript application framework, based on the model-view-controller (MVC) pattern. It allows developers to create scalable single-page web applications.

May 25, 2015

Heart shape loader

Heart shape loader

A nice looking page loader that can be used for your website.

May 19, 2015

Transition Delay Menu

Transition Delay Menu

Menu items using CSS3 transition delay. This menu can be place any corners you want to with some slight changes in the code. On click of the menu the options gets visible one by one due to the transition delay that is taking place.

May 12, 2015

Responsive about team layout with social links

Responsive about team layout with social links

This is to showcase your team-mates. When the user hovers the container the social links of the person is shown. Here different styles have been shown. You can add some description if needed and change the styles.

May 11, 2015

Animated go to top icon

Animated go to top icon

Animated go to top icon SCSS. The icon is created using fontawesome.

May 7, 2015

Bouncing Cube

Bouncing Cube

Another experiment on animation keyframes using SCSS. A 3d cuboid bounces with shadow effect.

May 6, 2015

Responsive 3d flip card

Responsive 3d flip card

This is to showcase your team-mates. On hover of the image the card flips 180deg on Y-axis and the back view is displayed. It is done using CSS3 animations and is also responsive.

May 5, 2015

Slide in and slide out box

Slide in and slide out box

I where trying out to put my social plugins to a container and make it fixed at the bottom. But this is not a good user experience. So i figured out a way.

May 4, 2015

Glowing Buttons

Glowing Buttons

Glowing effect over the button. You can use a text instead of icons too or both. The effect alone brings beauty to the buttons.

May 3, 2015

May 2, 2015

Different social nav styles

Different social nav styles

Twelve different styles for social navs. Here i have used SCSS as a style sheet. The reason i am using SCSS is that it reduces the number lines and easily customizable.

Flask shaped animated loader

Flask shaped animated loader

Many will be seeing this if you have studied chemistry. This is a round bottomed flask. The bubble animation and the wave effect brings the loader an effect. The animation is done purely in CSS3.

May 1, 2015

Bouncing Ball

Bouncing Ball

Bouncing ball using CSS3 animations. You use different images instead of the ball image and have fun.

Responsive Menu

Responsive Menu

A fully responsive menu without any need of JavaScript. Fontawesome has been used for icons.

Expanding Column Layout

Expanding Column Layout

A responsive expanding column layout to present projects, articles, and more.

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.

March 31, 2015

Swinging light bulb

Swinging light bulb

This is made by pure CSS3 and no JavaScript. Radio button is used to control the switch on and off. The swinging is done using CSS3 transform property. The light effect is done using CSS3 shadow property.

Love heart animation using CSS3 & JavaScript

Love heart animation using CSS3 & JavaScript

You can create E-greetings using this. This is done my CSS3 animations and JavaScript.

Archive

Popular Posts

Views