CSS3 y nuestros diseños

Ya falta cada vez menos para que podamos contar con la nueva especificación CSS3 la cual hara mas emocionantes nuestros diseños y aunque todos sabemos que todavía falta tiempo para implementarlo en nuestro clientes, podemos darle rienda suelta al diseño de nuestros blogs. Alguna de estas técnicas que podemos mencionar son:

 

1. Border Radius

 

Esta es una caracteristica interesante ya que permite a un bloque html tener bordes redondeados:

 

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

 

2. Border Image

 

Permite agregar una imágen en un borde del objeto.

 

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat; 

 

3. Box Shadow y Text Shadow

 

Sombras, tan fácil de agregar pueden hacer o deshacer un diseño. Ahora, con CSS3, ni siquiera necesitamos Photoshop!

 

Cajas:

 

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc; 

 

Texto:

 

text-shadow: 2px 2px 5px #ccc;

 

4. Transparencias con RGBA y Opacity

 

En estos días se esta usando cada vez mas las transparencias utilizando archivos PNG, lo bueno es que esto se va a simplicar con la inserción de código como el sig:

 

rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

 

5. Fuentes customizadas con @Font-Face

 

Arial, Verdana, Georgia son un ejemplo de las fuentes que siempre utilizamos en los diseños porque vienen de por si con el navegador, pero ahora con @font-face podremos llamar a fuentes que esten online para asi poner las fuente que querramos, aunque estas no seran muchas ya que como sabran los autores de las fuentes ejerceran presión sobre los derechos de copyright que poseen..  esta es una aplicación de esta nueva especificación:

 

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

 

via: Smashing Magazine