10 Awesome CSS/JS Plugins and Coding Techniques

#singlestylepost img {
width: 580px;
height: 150px;
}
#singlestylepost h2 {
margin: 0;
padding: 0;
}

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!

1. Use CSS3 to Create a Dynamic Stack of Index Cards

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

2. Dynamic PNG shadow position & opacity

Learn how to create a movable object using JavaScript.

Source

3. Awesome Overlays with CSS3

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

4. How to Create Depth and Nice 3D Ribbons Only Using CSS3

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.

5. Halftone Navigation Menu With jQuery & CSS3

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

6. Building Coverflow with CSS Transforms

Learn how to create a coverflow effect that actually flows and animates in real-time, without using canvas or pre rendered graphics.

Source

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

Source

8. Sliding Vinyl with CSS3

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

Source

9. Fun with CSS3 and Mootools

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.

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

Source