Reglas imprescindibles CSS de gran utilidad

Todos los que tenemos tiempo en esto recordaremos los tiempos de agregar sombras o bordes redondeados usando imágenes o trucos, la evolución que ha tenido CSS ha girado en torno a muchas de estas opciones entre otras, aquí publicaré algunas mejoras que pueden ser de mucha utilidad.

Muchas de estas reglas requieren actualmente de agregar diferenciadores para los distintos navegadores, algunas no son soportadas por todos pero en lo general se irán implementando para su completo soporte, una buena referencia la encontrarás al final de cada regla con información de soportes y más opciones de implementación y configuración de cada una.


Bordes Redondeados

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */


Actualmente esta característica esta soportada por todos los navegadores aunque es aconsejable usar las diferenciaciones listadas.

Esto generará un borde a los 4 ángulos por igual, también puedes especificar un diferente redondeo para los diferentes ángulos así:

border-radius: 10px 20px 30px 0;

Se aplican en orden arriba-izquierda y girando en el orden de las manecillas del reloj.

Más opciones:
http://www.w3schools.com/cssref/css3_pr_border-radius.asp


Sombras
Otra excelente opción es la de poder aplicar sombras usando esta nueva característica del CSS3, este efecto puede ser usado de manera externa o interna (o ambas) generando interesantes efectos.

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

El primer valor es el desplazamiento horizontal de la sombra, el segundo es el desplazamiento vertical, el tercero es la cantidad de suavizado, el cuarto el color, en este punto se puede usar el método clásico hexadecimal o bien usando la opción de llamado usando los valores RGB e incluso usando transparencia usando la opción alpha quedando algo así para por ejemplo, poner el color negro:

Hexadecimal: 

box-shadow: 20px 10px 7px #000;


RGB:

box-shadow: 20px 10px 7px rgb(0,0,0);


RGBA:

box-shadow: 20px 10px 7px rgba(0,0,0,.5);


En este ejemplo puse un .5 aplicando un 50% de transparencia a la sombra, este valor debe ser 0 (completamente transparente) a 1 (sin transparencia)

Más opciones:
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp


Propiedad @media
Esta regla es usada para darle diferentes estilos en base a las resoluciones de visualización en la que se mostrará la pagina, debido a lo poderoso de esta regla te recomiendo ampliamente busques todas las opciones con las que cuenta, un simple ejemplo podría ser así:

@media screen and (max-width: 480px) {

}

Donde dentro de las {} de esta @media irán especificadas los diferentes estilos aplicables a resoluciones menores a 480px, se pueden tantas @media para las diferentes resoluciones como te sea necesario, pudiendo especificar maximos y minimos en los valores.

Mas opciones:
http://www.w3schools.com/css/css_mediatypes.asp


Relleno con colores Gradientes
Este es una muy interesante regla, por el momento no esta soportada por todos los navegadores pero aun así la pongo:

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));


Más opciones:
http://www.w3schools.com/css/css3_gradients.asp


Tamaño de fondos
Interesante opción para especificar el tamaño que queremos de una imagen de fondo

div
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}


Más opciones:
http://www.w3schools.com/cssref/css3_pr_background-size.asp



@font-face
Regla que permite agregar o utilizar más fuentes en una página web, sin ella estas limitado a las fuentes que el visitante tenga instaladas, con esta ahora puedes agregar una fuente y para lo cual hay muchas interesantes opciones para explotarla como Google Fonts o Font Squirrel entre otras.

@font-face
{
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */

}


Y el estilo lo aplicas así: 

div
{
font-family:mySmashingFont;
}

Más opciones:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp


Por el momento comparto estas reglas, ire agregando nuevas, o si tienes alguna que crees que deba ir aquí compártela para agregarla próximamente, como siempre espero que este articulo te sea de utilidad, lo compartas y me hagas llegar tus comentarios.


Fuentes:
http://smashinghub.com/9-amazing-css-rules-that-save-designers-and-developers.htm
http://www.w3schools.com/