28 CSS/Javascript Plugins and Coding Techniques

Written by Makara on September 9, 2011 in Web 2.0, web Design - 8 Comments

If you know how to use CSS and Javascript, you can create some impressive websites. Not only that you can do some awesome stuff with them but they also ease you work. In this article you have 100 awesome CSS and Javascript plugins and coding techniques that should definitely be in you toolbox.

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-face, box-shadow and border-radius (for the styling).

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.

Using CSS Text-Shadow to Create Cool Text Effects

The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. A demo is available if you’d like to see what it looks like before you give it a try yourself.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.

How to create a kick-ass CSS3 progress bar

New features introduced in CSS3 allows developers to create stunning visual effects: this post exaplains how you can create a fancy progress bar using CSS3 and jQuery, without Flash or images.

Europe, CSS & jQuery clickable map

CSS converts a simple list of countries into the fully clickable map. Works with disabled style sheets and JavaScript, as well as on mobile devices. A simple code does not require Flash Player or other plug-ins!

A Colorful Clock With CSS & jQuery

This tutorial describes how one can create a clock using basic CSS and JavaScript.

Halftone Navigation Menu With jQuery & CSS3

You will learn to make a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Fun with CSS3 and Mootols

These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

Magic Zoom

Magic Zoom is a JavaScript zoom tool. It’s the best way to display images in incredible detail. Users do not need to click anything – they just move their mouse over the image to see every detail of your product.

jQuery Masonry

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Diagonal CSS Sprites – Aaron Barker

So you’ve got your sprite created, and it’s working great. 30+ icons in one image, and major HTTP connections saved. You have made your little corner of the interwebs a little happier and faster. Steve Souders would be proud.

Feature Table Design

“I ran into the feature table design and I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool stuff you find on the web is definitely an excise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.”

The Mac-style Skype Application Menu with CSS3 and jQuery

This tutorial re-creates the Skype application menu in the web browser. The final design mimics not the full layout — only the menu where all your friends are listed. For the nifty layout CSS3 is used and jQuery is used for the extra functionality.

3D Cube using new CSS transformations

The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.

More on 3D CSS Transforms

The author will show you what 3D CSS Transforms can do.

An Awesome CSS3 Lightbox Gallery With jQuery

In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

jQuery virtual tour

This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

BarackSlideshow

An elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.

Coda popup bubbles

The software company Panic has a beloved Mac application for developers called Coda. Coda has an incredibly elegant design, and one of the subtle JavaScript effects that have been added to it is a stylized pop-up bubble. The blog jQuery for Designers has created a script that combines jQuery with custom code to replicate the feature used on the Coda website. The effect is subtle and elegant and greatly adds to the user’s experience

Taggify

Taggify is a bit different in implementation than the other JavaScripts listed. Taggify is a hosted solution for adding pop-up widgets to photos. Instead of having to download a script and host it on your site, you can just add a tiny <include> in your tag, and you’ll have the power of Taggify installed on your site. Using Taggify is interesting; it adds notes and other useful information to photos. Think of it as a souped-up version of the note-adding feature for Flickr images. You can add any HTML to the Taggify note, creating a nice informational page to accompany any image that needs a bit more explanation.

CSS Box Shadow & Text Shadow Experiments

The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

AmberJack

AmberJack is one of the more interesting and compelling JavaScript techniques. Website tours are extremely beneficial because they can help familiarize users, showcase features and products, and many other things. Possibly the best part about AmberJack is that nothing has to be installed or learned to start creating website tours. AmberJack provides a way for website and product owners to quickly and easily create website tours with JavaScript. It’s an amazingly tiny download, at only 4 KB.

amCharts

This script is a chart generator that runs off of a combination of flash and JavaScript. You can generate virtually any type of graph or chart with the script, and can even use .csv and xml files to pull the data from. With amCharts, you can generate graphs in the form of Column & Bar, Pie & Donut, Line & Area and Scatter & Bubble.

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

Rocking and Rolling Rounded Menu with jQuery

In this tutorial you can make use of the rotating and scaling jQuery patch from Zachary Johnson to create a menu with little icons that will rotate when hovering

CSS3 :toggle-button without JavaScript

This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

WebKit Clock

This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

Related posts: