Formulario HTML decorado con CSS3

Siguiendo con un post similar a 3 Tablas HTML decoradas con CSS3 ahora vamos a mostrar algo similar pero con un formulario.
La idea es dejar algunas hojas de estilos que ustedes pueden utilizar en sus proyectos y asi ahorrar algo de tiempo en su desarrollo, obviamente ustedes pueden mejorarlas aun mas pero los puede servir de orientación y guía.

Bueno empecemos la idea es tener un formulario asi:

Primero vamos a hacer el HTML

    
     

      

      Nombre[?]Digita tu nombre

       
      
      

      Email[?]Digita tu email
       
      
      

      Region[?]Especifica donde vives

      
       America
       Asia
       Europa
       Oceania
      
      

      

      Sexo
      Masculino
      Femenino      
      
      

      Foto

      
      
      

      Describete
            
      
      
      
            
     
    
   

Como veran el html es sencillo y puro, en este caso mientras no le apliquemos nuestros estilos tendremos esto en nuestro navegador

Nombre[?]Digita tu nombre
Email[?]Digita tu email
Region[?]Especifica donde vives America Asia Europa Oceania
Sexo Masculino Femenino
Foto
Describete

Ahora como habran visto en el codigo hemos especificado una clase denominada ui1, la cual nos marca la pauta para definir nuestros estilos.
Nuestra hoja de estilos es asi

.ui1 form { 
 font:normal 10pt "Helvetica", "arial", "sans-serif";
 margin:0.5em; padding:1em; 
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 100%); 
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
  
 border: solid 0.5em #000000;
 color: #fff;
 
 -moz-box-shadow:0px 0px .5em #353535;
    -webkit-box-shadow:0px 0px .5em #353535;
    box-shadow:0px 0px .5em #353535;
 
 -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
 border-radius: 5px;
 }

.ui1 form *{
 margin:0.3em auto; 
}

.ui1 label { 
 display:block; 
 width:30%; 
 float:left; 
 text-shadow:1px 1px 1px #000;
 font-weight:bold;
}

.ui1 label a{
 text-decoration:none;
 color:#fff;
 margin-left:0.3em;
}

.ui1 label a span{

 position:absolute;
 width: 150px;
 height:auto;
 top: auto;
 left: auto;
 padding:0.2em;
 margin:-2em auto auto 5%;
 
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 100%); 
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
  
 border: solid 0.2em #fff;
 color: #fff;
 
 -moz-box-shadow:0px 0px .5em #353535;
    -webkit-box-shadow:0px 0px .5em #353535;
    box-shadow:0px 0px .5em #353535;
 
 -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
 border-radius: 5px;
 
 opacity: .75;
    -moz-opacity: .75;
    filter:alpha(opacity=75);
 
 display: none;
}

.ui1 label a:hover span{
 display:block;
}

.ui1 input, .ui1 textarea, select{
 
 padding:0.2em;
 
 border: solid 1px #ffffff;
 
 -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
 border-radius: 6px;
 
 background-color: #fff;
}

.ui1 input:hover, .ui1 input:focus,.ui1 textarea:hover,.ui1 textarea:focus, .ui1 select:hover, .ui1 select:focus
{
 -moz-box-shadow:0px 0px .5em #339aff;
    -webkit-box-shadow:0px 0px .5em #339aff;
    box-shadow:0px 0px .5em #339aff;
 
 border:solid 1px #339aff;
 color:#339aff;
}

.ui1 input[type='submit'], .ui1 input[type='reset']{
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 100%); 
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
 color:#fff;
 -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
 border-radius: 3px;
}

.ui1 input[type='submit']:hover, .ui1 input[type='reset']:hover{
 text-shadow:0px 0px 5px #339aff;
}

.ui1 input[type='reset']{
 float:right;
}

Y listo nuestro formulario final se ve ahora asi:

Nombre[?]Digita tu nombre

Email[?]Digita tu email

Region[?]Especifica donde vives America Asia Europa Oceania

Sexo Masculino Femenino

Foto

Describete