silverlight ? No .., JavaScript ? No..Me done it in CSS

Image gallery found to be bit interesting, Especially which is on MSN Extra , But the thing is it needs functions using Silverlight. It requires Orcus, which reduced my interest a lot in Silvelight development.
I always keep a thaught in my mind, that the same can be accomplished using CSS, One fine day, i have choosen to implement it, wowy ! it worked out.check out the below module i have implemented.
This module is been fully implemented using CSS and XHTML (No scripts!)

• 
  
  


• 
  
  


• 
  
  


• 
  
  


• 
  
  


• 
  
  

CSS 3.0 - Beginning of New Era

CSS 3.0 - A magical Word
While the the W3C seem to be taking forever to implement new web standards and seem happy sitting on their butts forever without moving forward. Here are a bunch of CSS 3.0 proposals that Web Designers would go nuts over if ever they are implemented. It seems that we have to wait till 2999 to implement them, at the rate things are going in the W3C.
The Happy news is we can implement CSS 3.0 in opera 9.5 !!!!
Here is some of the Features if this CSS 3.0

Multi Columns
Currently when you create a multi columned layout i.e 2 column or 3 column layout you need to specify individual and separate DIV HTML elements to achieve the desired effect. But in CSS 3.0 you can achieve this with a single CSS declaration like this

DIV {width: 400px;column-count: 4;column-width: 100px;column-gap: 10px;column-rule: none;}

Multi-Background
I recently faced a issue in my current project that i cant keep mutilple background image for an element, this issue is been fixed in CSS 3.0 and its declatration is

background: url(/images/body-top.gif')top left no-repeat,url('/images/banner_fresco.jpg')top 11px no-repeat,url('/images/body-bottom.gif')bottom left no-repeat,url('/images/body-middle.gif')left repeat-y;

Zebra Tables
We can easily create Zebra tables without using any javascript

tr:nth-child(2n+1) /* represents every odd row of a HTML table */;
tr:nth-child(odd) /* same */tr:nth-child(2n) /* represents every even row of a HTML table */
tr:nth-child(even) /* same *//* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }p:nth-child(4n+4) { color: purple; }

Rounded Corners
we can easily put rounded corner for any HTML Box Element , declarations given below

background-color: #ccc;border-radius: 5px;border: 1px solid #000;padding: 10px

Opacity
Currently almost all browsers support their own version and syntax for opacity. Here is the CSS 3.0 Standard code for opacity

background: rgb(255, 0, 0) ;opacity: 0.2

Resize
Ability to resize a HTML Element automatically

div.resize {width: 100px;
height: 100px;
border: 1px solid;
resize: both;
overflow: auto;
}

Text Effects
Text effects like drop shadow and Text Overflow.

color: #fff;background-color: #fff;
text-shadow: 2px 2px 2px #000;
text-overflow: ellipsis-word

In the near future, CSS is may not just meant for UI Presentation , but a powerful front-end Designing programming language !!!

Minimum width for IE6 browser

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a

under the tag, as we can't assign a minimum width to the browser
Next we create our CSS commands, so as to create a minimum width of 600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth <> 1200? "1200px" : "auto");
}