miércoles, 13 de abril de 2011

css3.me: Una ayuda para generar estilos - Vagabundia


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.





















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog