10 Awesome CSS/JS Plugins and Coding Techniques

You can create some impressive websites with very little CSS and JavaScript. In this post, we’ve collected 10 among hundreds (more to come on the next post) of awesome CSS and JavaScript plugins and coding techniques that should definitely be in your toolbox. Enjoy!

In this tutorial, 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).Source

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

To create a drop-shadow with RGBa (a color model that allows an optimized contrast with any kind of background), we will use box-shadow. 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.Source

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

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

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