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>
@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;
}
{
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;
}
{
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/