Design > Collection of CSS & Javascript Animations

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. The idea is to make one set of image slices disappear while another one (the other ad)

Sidenote: Note how the background images adjust to different screen resolutions (span it onto multiple monitors for eg) and how the theme changes according to the time of day

 

Use CSS3 to Create a Dynamic Stack of Index Cards
We will 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
When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!

 

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.

 

Halftone Navigation Menu With jQuery & CSS3
Today we are making 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.

 

Going Nuts with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

 

Super Awesome Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.

 

A Colorful Clock With CSS & jQuery
Create a colorful clock with the help of CSS & jQuery


blog comments powered by Disqus
 
@fencer019

fencer019 (Claude Sammut) : @smashingmag #smflash jQuery & CSS3 was the first blow. @Jilion are working on the next with a plug-in-free video player

css3watcher (css3watcher) : RT @fencer019: @smashingmag flash is getting replaced. jQuery & CSS3 was the first blow. @Jilion are working on the next with a plug-in…

fencer019 (Claude Sammut) : Bad Bunny! Energizer USB battery charger blamed for backdoor: http://bit.ly/amNE4G

fencer019 (Claude Sammut) : Microsoft warns of malicious antivirus, 'Security Essentials 2010': http://bit.ly/9ZH5ft

fencer019 (Claude Sammut) : Hey @designinstruct I'd love to win an Apple iPad or Email credits from @CampaignMonitor http://bit.ly/diWeek