CSS3 básico

En esta ocasión, vamos a hablar de css3, aunque será de una forma básica.

Todas las etiquetas que incorpora css3 se engloban dentro de las siguientes:

• 2D Transforms
• Animations
• Backgrounds
• Borders
• Fonts
• Multiple Columns
• Text Effects
• Transition

Como he dicho al principio, lo veremos de forma básica ya que hablaremos de algunas de ellas, las siguientes las dejaremos para más delante.

Border:

Consta de tres propiedades, border-radius, box-shadow y border-image. Como su nombre indica, es un efecto que afecta al borde, es decir, previamente debemos establecer con css un borde a la propiedad en cuestión (un div, un span, etc).

El más usado y conocido es border-radius y su función es la de redondear las esquinas del borde. Se establece con una medida estándar como puede ser px.

Border-shadow es para añadir sombras a la caja y border-image, para poder usar una imagen como borde, en lugar de la típica línea de la propiedad border.

Fonts:

Esta propiedad se usa o está más orientada para que todos los navegadores, especialmente Internet Explorer, puedan visualizar un tipo de letra concreta. Por ejemplo, si queremos que cualquier navegador pueda reproducir el tipo de letra Arial, debemos indicar la dirección donde se encuentra la fuente, de extensión ttf y además la misma fuente con extensión eot. Posteriormente se usa llamando a la función creada. Ejemplo:

<style>
@font-face
{
font-family: miFuente;
src: url('Arial.ttf'), url('Arial.eot'); /* IE9+ */
}

p
{
font-family:miFuente;
}
</style>

Con el ejemplo anterior, establecemos esa fuente para todos los párrafos de la página. Para conseguir la fuente eot, en Internet se pueden encontrar muchos conversores y tan sólo es necesario subir la fuente en ttf para que nos la devuelva transformada.

Multiple Columns:

Consta de tres formatos column-count, column-gap y column-rule. El más usado es el primero y sirve para dividir un texto en columnas, indicando el número de éstas que deseamos crear. Los otros, son para dar un ancho entre columnas y poco más. Un ejemplo sería el siguiente:

div
{
column-count:3;
}

El texto que contenga ese div, se dividirá en tres columnas.

Text Effects:

Se usa para dar efecto al texto, el más destacable es text-shadow, pero también existe Word-wrap. Un ejemplo del primero sería:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

De esta manera, las etiquetas h1 tendrían un efecto de sombra de un tamaño de 5 píxeles y de color rojo.

La segunda propiedad se usa para contener el texto dentro de un contenedor sin que se salga de éste. Con este ejemplo nos vale:

p

{

word-wrap:break-word;

}

Nota: estas propiedades son genéricas y todavía están en desarrollo, por lo que la mayoría de ellas no funcionan en ningún navegador, para ello hay que usar las implementadas por los navegadores:

Firefox: -moz-propiedad.

Safari y Chrome: -webkit-propiedad.

Opera: -o-propiedad.

Un ejemplo para firefox sería: -moz-border-radius:25px;

Para más información, visitar http://www.w3schools.com/