Skip to main content

Posts

Showing posts from November, 2011

CSS3 My Favorite Tricks

CSS3 is cool. It's animation and 3D stuff are amazing. But things like rounded corner and gradients are the most useful. I am listing down few tricks that I use often for my own quick reference. Gradient No more slicing.. and repeating images to make shaded backgrounds. background-image: -webkit-gradient(linear, left top, left bottom, from(#6f6f6f), to(#000000)); /* mozilla - FF3.6+ */ background-image: -moz-linear-gradient(top, #6f6f6f 0%, #000000 100%); /* IE 5.5 - 7 */ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#6f6f6f',EndColorStr='#000000'); /* IE8 */ -ms-filter: progid: DXImageTransform . Microsoft . gradient(gradientType = 0, startColor = '#CCCCCC', endColoStr = '#000000'); /*Transparent back */ Shadows. Rounded Corner, and Transparent Layers. I like to give a div a transparent background and put some kind of a background image under it. Drop the shadow from that box make it look much nice..