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.

Enjoy! Good luck.

 

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).

Dynamic PNG shadow position & opacity

You will learn how to create a movable object using javascript.

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, the author thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

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.

How To Create Depth And Nice 3D Ribbons Only Using CSS3

We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

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. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. And, of course, it uses CSS3 to style everything.

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.

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.

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.

Building Coverflow With CSS Transforms

You will learn how to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

Going Nuts with CSS Transitions

You will learn how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

Sliding Vinyl with CSS3

We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.

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.

Fun with 3D CSS and video

Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.

CSS Animations

No matter how fast internet tubes or servers are, we’ll always need spinners to indicate something’s happening behind the scenes.

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.

How To Create a Pure CSS Polaroid Photo Gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

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.

Editable CSS3 Image Gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

Rounded corner HTML elements using CSS3 in all browsers

This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css.

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.

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.

Sliding Tabs

This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution.

JavaScript Image Loader

If you’re looking for a more intuitive way for users to upload and preview images on your website, the JavaScript Image Loader (demo) might fit the bill. The JavaScript Image Loader is a great way to show your users an image before it has uploaded, and it can also provide other information about the image if desired.

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.

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.

SimpleModal

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

JavaScript Tooltips

This tutorial describes how to create a nice, lightweight JavaScript tooltip. By Michael Leigeber.

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.

A Colorful Clock With CSS & jQuery

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

Sticky SideNav Layout with CSS

Learn how to create a fixed sidenav layout for your blog or website. Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.

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.

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.

CSS3 Depth of Field

Sawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don’t forget to press ‘n’ to toggle animation.

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.

Spin those Icons with CSS3

Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

Angled Content Mask with CSS

This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Pure CSS Folded-Corner Effect

Learn how to create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds; supported by Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Fade Image Into Another

Learn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity.

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.

Correcting Orphans with Overflow

The overflow property in CSS can be used in various ways and comes in handy when correcting bugs. Below are some tutorials that demonstrate how to clear up some common issues using the overflow property.

CSS Sprites without Using Background Images

” The first approach in my mind was to do the typical CSS Sprites but this requires CSS work which my client did not know much of. I wanted to give him the access to update his affiliate banners using WordPress, and the simplest thing was to let him just upload his own images and put the URL in a custom field. No CSS tweaks involved, just what he needed.”

Make All Links Feel Subtly More Button-Like

On this current design of CSS-Tricks, you may have noticed how all links bump themselves down one pixel as you click them. This tutorial displays how to implement this technique.

CSS 100% Height

A common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, and this tutorial shows one of them.

CSS3 Drop-Down Menu

A clean, simple a nice navigation menu, designed by Nick La.

Vertical Centering With CSS

There are a few different ways to vertically center objects using CSS, but choosing the right one can be difficult. Here is a list of the best ways and an explanation of how to create a nice centered website.

Create YouTube-like adaptable view using CSS and jQuery

Other than the “Turn off the lights” feature, YouTube has great stuff, such as the “change view” feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.

Purely CSS – Faking Minimum Margins

min-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.

Perfect Full Page Background Image

This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.

Apple-like Retina Effect With jQuery

his tutorial explain how you can recreate the effect displayed on the image below, using jQuery and CSS.

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!

Super Cool CSS Flip Effect with Webkit Animation

Webkit support some fancy transform and animation effects that can really spice up the web experiences for users with Safari or Chrome browsers. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a Transformers themed top trumps design.

Footnotes With CSS

In their simplest implementation — using sup tags and linking within the page — footnotes aren’t very user-friendly. They interrupt the experience, requiring the user to click the link, read the information and then return to the page with the browser’s “Back” button.” Lukas Mathis has come up with an elegant solution to improve this user experience: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it — i.e. when they move the cursor over the footnote symbol.

How to create Microsoft Office Minibar with jQuery and CSS3

Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

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.

Scrollable Thumbs Menu with jQuery

In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical stack of thumbs appear when hovering over a menu item. The thumbs are scrollable by moving the mouse up and down which makes a really nice effect. We will add some CSS3 properties for spicing up the looks

Sweet Menu

Sweet Menu takes an ordinary list of links and makes it a sweet looking menu. It does this by utilizing jQuery and it’s plugin system

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

Slick Drop-Down Menu with Easing Effect Using jQuery & CSS

Drop-down menus are an excellent feature because they help clean up a busy layout. When structured correctly, drop-down menus can be a great navigation tool.

Thumbnails Navigation Gallery with jQuery

Here is a great tutorial on how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation.

Collapsing Site Navigation with jQuery

A collapsing menu that contains vertical navigation bars and a slide out content area can be created like this.

jStackmenu

Here is a jQuery UI widget for Stack Menus.

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. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

Awesome Cufonized Fly-out Menu with jQuery and CSS3

In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, reaching towards the current menu item.

CSS3 Background-Clip: Text

To carry out the DIN typeface, a transparent PNG with letters was used to achieve that subtle yellow to blue fade animation:

Sticky Notes with CSS3

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

3D Animation Using Pure CSS3

The perspective property is what we need to create the 3D effect. Using transform and transition, we can create 3D animations using pure CSS3.

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.

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.

Making Better Select Elements with jQuery and CSS3

Here you can find out how to build a script, one which is going to take an ordinary ‘select’ element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.

BounceBox Notification Plugin with jQuery & CSS3

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

Contextual Slideout Tips with jQuery & CSS3

Knowing the importance of HTML standards, here is a set of contextual slideout tips with jQuery & CSS3 which are ideal for product pages and online tours.

Carbon Fiber Signup Form with PHP, jQuery and CSS3

In this tutorial you can see how you can make a carbon fiber signup form using PHP, jQuery and CSS3.

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.

CSS3 Slideup Boxes

Follow along and see how we can use a few very simple CSS3 transitions to create a “slideup” box effect.

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.

Create a Yoyo with jQuery and CSS3

Here you can learn how to create your own yoyo with the help of CSS3 and jQuery.

A 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. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers.

jQuery Keypad

An interesting keyboard made using jQuery.

How to Enhance Forms Using jQuery UI

jQuery makes creating UI so much easier without compromising speed and quality. In this tutorial we are going to enhance form using jQuery UI, so let’s get started.

jQuery Plugin – Feature List

This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.

Coda-Slider 2.0

An interesting read. Also notice that the slider slides automatically, but will stop when the users clicks on any nav button.

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. It is written using JavaScript and jQuery.

Smooth Div Scroll

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps.

Supersized jQuery Plugin

This is a simple full screen background slideshow plugin.

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.

Slide Thumbs

In this tutorial it’s explained how to turn old boring image viewer into a nice-looking one with jQuery.

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

There is no need for a database nor a PHP back-end for this gallery. This means that it is really easy to incorporate into an existing site – you just have to change a few lines of html code.

jquery.timepickr.js

This is my humble attempt to enhance web time picking.

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 a Content Rich Tooltip with JSON and jQuery

Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.

Creating a Rotating Billboard System with jQuery and CSS

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