css3.me: Una ayuda para generar estilos

css3.me es otro de esos sitios que nos ayudan a crear reglas de estilo, fundamentalmente, aquellas que suelen ser complejas de entender tales como sombras o gradientes.

Lo interesante de este es que incluye las necesarias para que funcione en versiones de Internet Explorer anteriores a la 9 siempre y cuando puedan ser "traducidas" a filtros.

Podemos jugar un rato e ir previsualizando los resultados hasta que nos decidamos por alguno y luego, basta hacer click en Get the code para que podamos copiarlo. Ver/Ocultar [+]

background-color:#ffffff;
border-width:2px;
border-color:transparent;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
/*IE DOES NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:inset 0px 0px 20px #000000;
-webkit-box-shadow:inset 0px 0px 20px #000000;
box-shadow:inset 0px 0px 20px #000000;
/*Inner elements should not cover inner shadows*/
/*Chrome renders inset shadows incorrectly with border-radius*/
/*IE DOES NOT SUPPORT INSET SHADOWS*/
background: -moz-linear-gradient(left, #000000, #85a1ff);
background: -webkit-gradient(linear, left top, right top, from(#000000), to(#85a1ff));
background: -o-linear-gradient(left, #000000, #85a1ff);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background: linear-gradient(left, #000000, #85a1ff);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
/*All filters must be placed together*/

Luego, podemos usarlo en cualquier tipo de regla, por ejemplo, en una clase:

.miejemplo {
....... y aquí pegamos el código .......
}

Obviamente, podemos editarlo u optimizarlo; por ejemplo, en este caso podríamos eliminar el borde, eliminar los prefijos de algunas propiedades que ya son innecesarios tales como -moz-border-radius, -webkit-border-radius, -moz-box-shadow o -webkit-box-shadow ya que los neuvos navegadoree aceptan las propiedades border-radius y box-shadow; etc.

Faltaría recordar que para que ciertas propiedades tengan efecto, las etiquetas donde son agregadas deben ser dimensionadas mediante width y height.