10 Awesome CSS/JS Plugins and Coding Techniques

Share this article

#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).
Use-CSS3-to-Create-a-Dynamic-Stack-of-Index-Cards.jpg

2. Dynamic PNG shadow position & opacity


Learn how to create a movable object using JavaScript.
Dynamic-PNG-shadow-position-opacity.jpg
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.
Awesome-Overlays-with-CSS3.jpg
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.
How-to-Create-Depth-and-Nice-3D-Ribbons-Only-Using-CSS3.jpg

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.
Halftone-Navigation-Menu-With-jQuery-CSS3.jpg
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.
Building-Coverflow-with-CSS-Transforms.jpg
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.
Going-Nuts-with-CSS-Transitions.jpg
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.
Sliding-Vinyl-with-CSS3.jpg
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.
Fun-with-CSS3-and-Mootols.jpg

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.
Fun-with-3D-CSS-and-video.jpg
Source

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week