CSS 3 - Shadows

The CSS3 backgrounds and borders module has a nice new feature called box-shadow, which is implemented in Safari 3+ and Firefox 3.1 (Alpha).
The property takes 3 lengths and a color as it’s attributes, the lengths are:
the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

Temporally the current support for both WebKit and Mozilla is with the following attributes:
Webkit: -webkit-box-shadow
Mozilla: -moz-box-shadow

Here there is an example:

Lorem ipsum dolor sit amet, class in eu est maecenas. Neque elit arcu nulla. Fames libero ut ultricies sed praesent orci. Condimentum turpis vestibulum risus massa, egestas phasellus ut, fermentum quis mauris nulla in quisque.

Another JQuery example: Drag and Drop and Shake Animation

In this example you can appreciate a simple Drag and Drop created with JQuery. When you drop the silver rectangle on the yellow one you can see the Shake effect.

Drop here

Drag me

JQuery Animation Example

This is what wikipedia says:
jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 27% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. The following is an example using slide animation:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

for further information visit JQuery Home Page

Animation example with YUI (Yahoo User Interface) Library

YUI 3 is Yahoo!'s next-generation JavaScript and CSS library, it was launched on September 2009. This example was done using the Animation Utility. This Utility provides an API for creating advanced transitions between property values.

Open Image
Close Image

If you want to learn more about this Utility you can visit: YUI 3: Animation