jQuery 1.4 Animation Techniques - Index of

[ 111 ]
Chapter 5
The previous screenshot shows the widget in its un-skinned state, with only the CSS required
for it to function included.
Skinning the widget
'There's more than one way to skin a cat' was once proclaimed, and this applies to widgets as
well as cats. Lastly, let's add some custom styling to the widget to see how easy it is to make
the widget attractive as well as functional.
Time for action – adding a new skin
At the bottom of the animate-position.css file, add the following code:
a { outline:0 none; }
#slider {
border:1px solid #999; -moz-border-radius:8px;
-webkit-border-radius:8px; border-radius:8px;
background-color:#ededed; -moz-box-shadow:0px 2px 7px #aaa;
-webkit-box-shadow:0px 2px 7px #aaa; box-shadow:0px 2px 7px #aaa;
}
#title, #slider ul { margin-top:10px; margin-bottom:12px; }
#title {
font:normal 22px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", Sans-serif;