Home

Web Design Resources- Latest

User rating:

A pure CSS Before and After image effect

This tutorial shows how to use CSS to create a "before" and "after" image effect, whereby moving the mouse over the image container peels back one image to reveal another.
http://www.javascriptkit.com/dhtmltutors/beforeafterimagecss.shtml
User rating:

CSS Circle Buttons

These large, circular buttons employ CSS3 shadows to create a 3D, depressible look. Four different button colors are presented to give you a jump start in inspiration.
http://www.dynamicdrive.com/style/csslibrary/item/depressible_circle_buttons/
User rating:

Before and After image script

Lets you view an "after" version of any image as an overlay of the original one in dramatic fashion.
http://www.dynamicdrive.com/dynamicindex4/beforeandafter.htm
User rating:

CSS3 oval switch checkboxes

Slick looking, oval shaped checkbox replacement switches using CSS3.
http://www.dynamicdrive.com/style/csslibrary/item/css3_oval_switch_checkboxes/
User rating:

Blur Image effect

This Blur Image script lets you easily blur an image by varying intensities using HTML5 canvas.
http://javascriptkit.com/script/script2/imageblur.shtml
User rating:

Grayscale Image Gallery

Using CSS3 filters, this image gallery creates thumbnails that are initially rendered in grayscale until the image is enlarged.
http://www.dynamicdrive.com/style/csslibrary/item/grayscale_image_gallery/
User rating:

Parallax Slider

Parallax scrolling comes to a slider with this jQuery content slider script.
http://www.dynamicdrive.com/dynamicindex17/parallaxslider/index.htm
User rating:

Creating a basic parallax scrolling effect using CSS and JavaScript

This tutorial unmasks the mystic surrounding parallax scrolling by creating a simple one from scratch.
http://www.javascriptkit.com/dhtmltutors/parallaxscrolling/index.shtml
User rating:

Fixing a parallax scrolling website to run in 60 FPS

Tips on how to efficiently implement the popular parallax effect on your web site.
http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/
User rating:

Creating a live CSS clock using CSS3 and some JavaScript goodness

This tutorial guides you through building a clock interface using pure CSS, then bringing it to life with JavaScript's requestAnimationFrame method.
http://www.javascriptkit.com/dhtmltutors/css3clock.shtml
User rating:

Velocity.js

Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance with little change to your existing jQuery code.
http://julian.com/research/velocity/
User rating:

Responsive Iconic Menu

A sleek CSS3 horizontal menu bar that stays tucked away until the user clicks on an icon, revealing the menu.
http://www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu/
User rating:

scrollMagic

A jQuery plugin for doing cool scroll related animations such as parallax.
http://janpaepke.github.io/ScrollMagic/
User rating:

Grid: A simple guide to responsive design

Awesome, one page guide to responsive design.
http://www.adamkaplan.me/grid/
User rating:

PhysicsJS

A JavaScript 2D Physics engine to add some nice physics effects to your code.
http://wellcaffeinated.net/PhysicsJS/

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

Hosting Coupon Code

Hostgator Hosting at $3.96/mon. Use CSS Drive exclusive coupon code "cssdrive25" for an additional 25% off

All images and content copyright © 2004-2014 CSS Drive. Contact Info | Back to Top