Get our posts emailed to you with our monthly newsletter, subscribe here.

Open source web development has seen a tremendous explosion in popularity. You can download free code snippets, plugins, WordPress themes, and the list is always growing. I have been infatuated with the amazing effects possible in CSS3 and some related JavaScript libraries.

In this gallery I want to share 30 powerfull frontend code snippets for web developers. Some of these effects are built entirely with CSS, and others utilize jQuery or some other JavaScript techniques. You can download a local copy of any script or try duplicating the effect into your next project. And if you know about any other fun code snippets, just drop a comment in the post discussion area.

Guided Website Tour Tooltip

html5 css3 animated guided website tour tooltip widget

Text Animation

open source free typography text animation

Dashboard UI

dashboard website ui design layout

CSS3 Apple Navigation

css3 apple navigation menu freebie

Pure CSS3 Loader

animated css3 loader spinner ajax design

Alternative CSS Loader

cool free open source css loader

Submit Button Animation

slow loading css3 animation button submit ui

Responsive Flat UI Kit

responsive flat ui kit design open source

Topcoat Breadcrumb

open source breadcrumbs css3 codepen freebie

CSS3 Gradient Zebra Highlights

text paragraph alternating gradients css3 design

Rainbow Navigation Menu

css rainbow naviation menu design open source

CSS3 Pricing Tables

pricing tables css3 open source codepen

Slide Toggle

clean open source css3 slide toggle ui

Sliding Dial UI

dark sliding dial ui open source codepen

Tabbed vCard

tabbed user interface vcard ui css3

Custom Checkboxes & Radios

custom form inputs radio buttons checkboxes

Super Cool Text Shadows

css3 hover text effects shadows open source

List/Grid View Switcher

list grid view jquery css3 switcher open source

CSS3 vCard

open source awesome vcard freebie html5 css3

Winter-Themed Website Layout

html5 css3 winter themed layout design

Parallax Scrolling Layout

fullscreen background images parallax scrolling

Animated CSS Book

animated css book ui design open source

Sortable Task List

sortable task list ui css3 open source

CSS3 Tree Branch

open source tree branch leaves coded in css3

Simple Blog Editor

css3 html5 open source blog editor jquery codepen

CSS3 Switch

open source codepen css switch freebie

Detailed OAuth Login Form

facebook connect or login form css3 freebie open source

HTML5/CSS3 Gauge Slider

css3 html5 gauge slider open source

Clean Glossy CSS3 Buttons

clean glossy open source css3 download buttons codepen

Animated Toggles

css3 animated toggles switch input

Posted by Jake Rocheleau

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design and web development techniques. You can check out his work on Dribbble and follow his tweets @jakerocheleau.

2 Comments

  1. thanks for sharing. awesome stuff!!

  2. Really useful! thanks for post.

Comments are closed.