CSS and JavaScript are two indispensable elements for any Web site, also for any web designers and web developers. Sometimes, they come up with some problems, or a few technical problems.

But the good news you need to know that the stronger growth of the Internet, web designers and web developers, every day, always find the solutions and tips for these problems, and share them together. This JavaScript article give you 45 tips and tricks to solve CSS, JavaScript problems quickly. If you know more, you can share it at here.

• Demo
• Enlarge
• Reload
• New window

CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it's difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers.

In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. We cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons. The focus of this post lies on CSS; please notice that some of the techniques use JavaScript or PHP for enhanced functionality.

Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Other techniques (CSS tables, CSS layouts, CSS for Mobile and CSS forms) will be featured in an upcoming article. So don't forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!

We are aware that many readers are tired of "lists" floating around in the Web, but we are confident that the vast majority of our visitors will benefit from this post format and will find at least some of the techniques featured in this post useful.

Interesting CSS Techniques

Building the New Visual Annotations
These note overlays are composed of two main elements, an overlay with the shine and a border with the transparency. A very interesting, yet simple technique by the ZURB Design Agency, designers who have written a series of articles on Smashing Magazine as well.

Sexy Music Album Overlays
This aticle shows how to style your music streams and provides you some graphics to do so.

A Colorful Clock With CSS & jQuery
This tutorial describes how one can create a clock using basic CSS and JavaScript.

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.

Advanced Event Timeline With PHP, CSS & jQuery
This Advanced Event Timeline is used with the help of PHP, MySQL, CSS and jQuery. The result: a nice time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New