Códigos de CSS3 – Mas propiedades que quizá no conocías y que te facilitaran la vida

Publicado en 21. Ene, 2010 por Luis Lopez Garay in Estilizacion CSS

El Cascade Style Sheet ha sido siempre el lenguaje para poner estilo a la web, y desde hace tiempo se ha ido desarrollando CSS3, una nueva version que trae consigo nuevas propiedades para facilitarnos la vida, tales como bordes redondeados, usar cualquier fuente en la web sin que el lector la tenga instalada, opacidad, entre otras cosas muy buenas, si quieres aprender algunos codigos debes leer este post, y si tienes alguna contribucion que hacer, mejor.

Si son desarrolladores web o diseñadores web, se han enterado CSS (Cascade Style Sheet) ha estado evolucionando, al igual que HTML, en los recientes momentos se ha estado dando el desarrollo de HTML5 y CSS3, hace algunos años cerca del 2008 se empezó a desarrollar esta nueva versión, por lo cual muchos desarrolladores aun usan códigos de CSS2 y no se han dado cuenta de que nuevas propiedades han ido apareciendo en los últimos años y es necesario que ustedes las conozcan con fin de estilizar mejor tus sitios web u hojas de estilo para tu blog. Lo mas conocido dentro de CSS3 es la posibilidad (antes se podía, luego no se pudo, y ahora se vuelve a poder) de embeber fuentes para usarlas en la web, crear bordes redondeados, opacidad, imagen de bordes, sombras y envoltura de texto, colores RGBA entre otras funciones muy interesantes que veremos mas adelante, me atrasé un poco con esto pero ya estando en el 2010 la mayoría de ustedes ya deben de conocer algunas propiedades y las han usado.

Trabajando con bordes

Las técnicas antiguas para hacer bordes redondeados era crear un DIV con una imagen de un fondo ya hecho con bordes redondeados y poner ahí dentro el contenido, otra era usando un código Javascript, con CSS3 solo necesitamos emplear códigos de radio en las esquinas, también se ha podido usar imagenes como bordes, logrando mejores menús o cualquier otro fin, ponerle sombras también es posible.

Crear bordes con esquinas redondeadas

Para crear bordes redondeados a los DIV tenemos que usar la lógica y visualizar lo que queremos, en el ejemplo de arriba (hecho por mi ) tenemos una explicación, las esquinas de un DIV se dividen en 4.

topleft (esquina superior izquierda) / topright (esquina superior derecha) / bottomleft (esquina superior izquierda) / bottomright (esquina superior derecha).

Para poner en claro el código necesario pondré el snippet en seguida con un ejemplo en vivo de como quedaría, asegúrate de establecer el radio en pixeles o en pt (puntos), yo prefiero pixeles.

-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
border: 2px solid #000;

Para ahorrarte tiempo en caso de que quieras añadir el mismo tamaño de radio a todas las esquinas, solo escribe –moz-border-radius: 5px; –webkit-border-radius: 5px; para que te evites poner los nombres de las esquinas, aunque claro eso ya depende de ti, ahora pasemos al siguiente tratamiento de bordes.

Usar imagenes en tus bordes

Este tema es bastante difícil de explicar y a mi de comprender, es por eso que solo les dejare la referencia en ingles, busquen en google: border-image y les saldrá información sobre eso.

http://www.css3.info/preview/border-image/

Bordes de colores (degradado)

Es posible añadir múltiples colores en un borde, provocando un multicolorido resultado, o bien un borde de grosor considerable y con un efecto de degradado, quiero que mires atentamente este DIV:

border: 5px solid #000;
-moz-border-top-colors: #444e00 #73820e #809300 #c1d43e #c1ce6c;
-moz-border-bottom-colors: #444e00 #73820e #809300 #c1d43e #c1ce6c;
-moz-border-left-colors: #444e00 #73820e #809300 #c1d43e #c1ce6c;
-moz-border-right-colors: #444e00 #73820e #809300 #c1d43e #c1ce6c;

Lo que ha pasado es que he establecido un borde solido negro de 5 pixeles (grosor), pero con -moz-border-colors he puesto color a cada uno de esos 5 pixeles de borde dando un efecto de degradado, aquí esta el código, me simplifique estableciendo top, left, bottom o right para no escribirlos todos siendo que solo quería el mismo efecto en todos los lados.

Nota: Cada color que aplicas van siendo los colores correspondientes  a cada pixel del ancho del borde, por lo que tendrás que poner los mismos que en pixeles, si el border mide 5 pixeles, debes poner 5 colores, se ordenan de afuera hacia adentro.

Propiedades disponibles

-moz-border-colors (aplica a todo el borde) / -moz-border-top-colors (aplica al borde superior) / -moz-border-bottom-colors (aplica al borde inferior) / -moz-border-left-colors (aplica al borde izquierdo) / -moz-border-right-colors (aplica al borde derecho).

Trabajando con Fondos

En CSS3 se han añadido nuevas posibilidades tales como tamaño del fondo, posibilidad de tener fondos múltiples en un mismo contenedor y posicionarlos donde queramos, entre otras cosas, solo diré las primeras 2 y lo demás es cosa de que lo investigas si te es de utilidad (background origin y clip).

Establecer múltiples fondos en un DIV

Es posible colocar mas de un fondo en un objeto con tan solo usar “comas” después de cada fondo, se puede aplicar posición y repeat también, aquí no lo he podido probar por alguna extraña razón, sin embargo acá tienen un ejemplo capturado como imagen. Solo me va en Safari.

background: url(tufondo1) top left no-repeat,
url(tufondo2) top right no-repeat,
url(tufondo3) bottom left no-repeat,
url(tufondo4) bottom right no-repeat;

Fuentes y manejo de texto

Usar cualquier fuente en la web (embed a font)

Si bien esto suele hacerse en Wordpress con plugins que sustituyen el texto por imagenes de acuerdo a la fuente que deseemos, con CSS3 no es necesario hacer eso, en CSS2 se podía pero en CSS 2.1 ya no, y en CSS3 ha vuelto la posibilidad de incrustar fuentes en el texto pudiendo usar mejores fuentes que Arial, Verdana, Times New Roman, etcétera. Para esto primero conseguiremos una fuente TTF, OTF u otra, en mi caso yo he elegido Chunk Five, una fuente muy hermosa en formato TTF. Esto sirve para que el lector pueda ver el texto com la fuente que deseas sin que el tenga que tenerla instalada en su PC.

El código o sintaxis seria la siguiente, esto es el CSS:

@font-face {
	font-family: Nombredefuente;
	src: url('urldelafuente');
}

p.clasedeparrafo {
        font-family: Nombredefuente;
}

El primer bloque selecciona una fuente y le pone un nombre, en esta caso será “Nombredefuente“, después se establecen los elementos en los que quieres llamar la fuente, puedes llamarla como fuente de títulos H1, H2 o párrafos, la verdad no he logrado que funcione en mi PC con Firefox, solo Safari.

Ahora para llamarlo, en esta ocasión será un párrafo con clase:

<p class="clasedeparrafo">El Veloz murciélago te violara</p>

—————–> Continuara… ya no tengo tiempo hoy.

Entradas Relacionadas:

1. Retrospectiva – Vida y Obras de Diego Rivera

Este articulo fue escrito por Luis Lopez Garay

Soy un chico de 17 años que vive en Tijuana Mexico, estudio en la preparatoria CETis 58 y me apasiona el diseño, desde chiquito me gusta y leo muchos tutoriales. Esta web al hice para compartir mis aficiones, y porque no, pagar mi universidad con las ganancias.