Design Superstars

25 Neat CSS3/Javascript Plugins and Coding Techniques That Will Boost Your Productivity

June 19, 2012 Development No Comments

20 Flares

20 Flares


Using CSS3 and Javascript, you not only are able to do some awesome stuff but also to do it more efficient and faster. If you don’t know how to work with cascading style sheets or with JavaScript, then the best way to learning it is by looking at some examples, tutorials and coding techniques.  Also, if you do know how to work with CSS and JavaScript, then this resources will definitively help you to boost your productivity. In this article you will see 25 great plugins and techniques for CSS3 and Javascript.

Creating a Rotating Billboard System with jQuery and CSS

In this tutorial you will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads.

Create a Content Rich Tooltip with JSON and jQuery

This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.

Making a Mosaic Slideshow With jQuery & CSS

A very detailed and advanced tutorial on how to create a mosaic slideshow by using CSS and jQuery.

Create an Image Rotator with Description (CSS/jQuery)

This tutorialwill let you learn how image rotation works and how to create image rotator with CSS and jQuery.

Supersized jQuery Plugin

This is a simple full screen background slideshow plugin.

File Style jQuery

Browsers do not let you style file inputs. File Style plugin fixes this problem. It enables you to use image as browse button. You can also style filename field as normal textfield using css.

Coda-Slider 2.0

A neat slider which can help you to better organize your menu.

jQuery Keypad

This is an interesting keyboard made using jQuery.

jQuery Inline Form Validation

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input.

Create a Yoyo with jQuery and CSS3

This tutorial will show you how to create your own yoyo with the help of CSS3 and jQuery.

Colorful Sliders with jQuery & CSS3

In this tutorial you can learn how to use jQuery and the new transformation features brought to you by CSS3 to create a three dimensional dynamic slider effect.

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

In this tutorial you can learn how to build a cross-browser with an awesome CSS-only drop-down mega menu, using nice CSS3 features.

BounceBox Notification Plugin with jQuery & CSS3

In this tutorial you will find out how a bouncebox notification plugin can be created with jQuery & CSS3.

How To Change Default Text Selection Colour

Whilst this CSS3 declaration might not be crucial to your project or design and yes it is not supported by all browsers, but it is a fantastic effect that really takes your design one step further.

Beautiful Photo Stack Gallery with jQuery and CSS3

In this tutorial you can learn how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, the images of that album are shown as a beautiful photo stack.

Sticky Notes with CSS3

In this tutorial you can see how sticky notes with CSS3 can be created

Beautiful Background Image Navigation with jQuery

In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position.


This is a  cool  jQuery UI widget for Stack Menus.

Thumbnails Navigation Gallery with jQuery

In this tutorial you are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style.

Creating a Fancy Menu Using CSS3 and jQuery

Here you can see how a fancy menu can be created with the help of the new CSS3 features along with jQuery

Feature Table Design

This tutorial will show you how to create a neat table design for various things such as menus or price lists.

Use CSS3 to Create a Dynamic Stack of Index Cards

You will learn how to create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-facebox-shadow and border-radius (for the styling).

Dynamic PNG shadow position & opacity

This will help you create a movable object using javascript and apply a dynamic shadow to them.

Awesome Overlays with CSS3

The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us.

Sweet tabbed navigation bar using CSS3

Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

About the Author -

Bogdan is the founder of Design Superstars. He is very passionate about design and web development and he's constantly searching for the most interesting things to write about on this site.

20 Flares Facebook 3 Twitter 11 Google+ 2 StumbleUpon 1 20 Flares ×