PDF de programación - CSS3, el nuevo estándar de las hojas de estilo

CSS3, el nuevo estándar

de las hojas de estilo



ÍNDICE

HOJAS DE ESTILO CSS3 ______________________________________________ 3

INTRODUCCION .................................................................................................................. 3

FONDOS .................................................................................................................................. 4
MÚLTIPLES FONDOS ...................................................................................................................... 4
FIJAR LA POSICIÓN DEL FONDO ................................................................................................. 4

BORDES .................................................................................................................................. 6
BORDES REDONDEADOS .............................................................................................................. 6
BORDES CON IMÁGENES .............................................................................................................. 7

SOMBRAS ............................................................................................................................... 9

TRANSPARENCIAS ............................................................................................................ 10

TEXTO EN COLUMNAS .................................................................................................... 11

EFECTOS DE TEXTO ........................................................................................................ 12
EFECTO CORTORNO .................................................................................................................... 12
EFECTO SOMBRA ......................................................................................................................... 13
EFECTO OVERFLOW .................................................................................................................... 13

CANAL ALPHA ................................................................................................................... 14

DEGRADADOS .................................................................................................................... 15
FONDOS .......................................................................................................................................... 15
BORDES ........................................................................................................................................... 18

FUENTES .............................................................................................................................. 19
EJEMPLO ......................................................................................................................................... 20
Resultado .......................................................................................................................................... 21

SELECTORES ...................................................................................................................... 21

REFERENCIA CSS3 ............................................................................................................ 24

COMPATIBILIDAD DE CSS 3 CON LOS NAVEGADORES ........................................ 25

FUENTES __________________________________________________________ 26



Indice

HOJAS DE ESTILO CSS3

INTRODUCCION

El último estándar de hojas de estilo en cascada confeccionado por el W3C (World Wide
Web Consortium) es el denominado CSS3. Esta nueva versión de las hojas de estilo
tiene importantes novedades:

 Nuevas propiedades orientadas respecto a los aspectos gráficos

o bordes redondeados
textos con sombras
o
o posibilidad de asignar múltiples fondos
o nuevas posibilidades en el formato de las tablas
o posibilidad de agregar pies de página, cabeceras y referencias cruzadas

 Nuevas estructuras de organización.

o

texto en columnas

 Capacidades visuales avanzadas que tienen como objetivo el facilitar el

posicionamiento de los controles dentro de la página, para ello mejora:

la interfaz gráfica

o
o el posicionamiento de los objetos
o el tamaño de los objetos
o

la posibilidad de estructurar el texto en columnas

 Hojas de Estilo Aural: nuevas propiedades orientadas a los objetos audio

como son:

o sonidos de fondo
o
o posición del sonido en reproducción

transiciones de sonido

 Nuevas funciones relacionadas con las fuentes

o mejora en el soporte para múltiples lenguajes
o posibilidad de utilizar fuentes externas

En muchos casos, al utilizar las nuevas propiedades gráficas se puede liberar al
navegador de operaciones que hasta ahora eran su exclusiva responsabilidad, mejorando
así su rendimiento y la velocidad con que carga las páginas.



http://www.css3.info/preview/ CSS3 Previews - CSS3 . Info

http://www.w3.org/TR/css3-roadmap/ Introduction to CSS3

CSS3



3

FONDOS

MÚLTIPLES FONDOS

CSS3 permite añadir varios fondos. La técnica para realizar esta operación consiste en
utilizar la propiedad background y fijar los atributos de cada una de las imágenes
separadas por un espacio en blanco; los grupos de atributos de cada imagen se seperarán
con una coma.

Se debe tener en cuenta que la imagen puesta en primer lugar es la que estará en primer
plano en el caso de que se sobrepongan sobre alguna otra imagen.

Ejemplo

Código CSS

.fondos {
background: url(simbolo2.gif) center no-repeat,
url(simbolo3.gif) center repeat;
width: 300px;
}

Código HTML

<div class="fondos">
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
<p>contenido del elemento que va a tener 2 fondos </p>
</div>

FIJAR LA POSICIÓN DEL FONDO



Para indicar la posición de la imagen de fondo dentro de un elemento se utiliza la
propiedad background-origin, con este atributo se puede indicar tres posiciones
relativas distintas para el extremo superior izquierdo de la imagen

 border-box: la imagen comenzará a colocarse donde en el borde.

 content-box: la imagen comenzará a colocarse en función del padding

establecido para el elemento.

 padding-box: la imagen comenzará a colocarse en función del margen

establecido para el elemento

CSS3



4

Ejemplo

Código CSS

.fondo{
border: 12px double #00F;
padding: 10px;
background-image: url(mariposa.gif);
background-repeat: no-repeat;
margin: 20px 0;
background-color:#CF9;}
#pruebasfondo1{
background-origin: border-box;}
#pruebasfondo2{
background-origin: padding-box;}
#pruebasfondo3{
background-origin: content-box;}

Código HTML

<h1>Probando background-origin</h1>
<div id="pruebasfondo1" class="fondo">
<h2>background-origin: border</h2>
Este elemento tiene borde y padding.
<br>
</div>
<div id="pruebasfondo2" class="fondo">
<h2>background-origin: padding</h2>
Este elemento tiene borde y padding
<br>
</div>
<div id="pruebasfondo3" class="fondo">
<h2>background-origin: content</h2>
Este elemento tiene borde y padding
<br>
</div>



CSS3



5

BORDES

CSS3 aporta nuevos atributos para realizar bordes redondeados o/y con imágenes,
combras, etc.

Para desarrollar las propiedades que permiten múltiples propiedades podemos utilizar la
herramienta on-line que se encuentra en http://css3generator.com/.

BORDES REDONDEADOS

La propiedad border-radius que permite definir el radio de las curvas de las esquinas.

Si se asigna un valor (en pixeles) a la propiedad, entonces el radio aplicado es el mismo
para todas las esquinas, pero se le pueden asingar hasta 4 valores, uno para cada esquina
(orden: sup-izquierda, sup-derecha, inf-izquierda, inf-derecha).

Para que los bordes se redondeen la propiedad border debe tener el atributo solid.

Ejemplo

Código CSS

div {
border: 1px solid #000000;
border-radius: 7px;
padding: 10px;}

Código HTML

<div class="fondos">
<p>contenido del elemento que va a tener bordes redondeados</p>
<p>contenido del elemento que va a tener bordes redondeados</p>
<p>contenido del elemento que va a tener bordes redondeados</p>
<p>contenido del elemento que va a tener bordes redondeados</p>
</div>



CSS3



6

Si cambio el código CSS para que tenga bordes distintos:

div {
border: 1px solid #000000;
border-radius: 7px 27px 100px 0px
padding: 10px;
}

BORDES CON IMÁGENES



El atributo que permite introducir imágenes en los bordes es border-image. Este atributo
permitirá asignar una o varias imágenes a los bordes.

Este atributo aún está ausente en muchos navegadores y por ahora sólo podemos contar
con Firefox (prefijo –moz-) y Safari-Chrome (prefijo –webkit-) para ver este efecto.

Otros atributos para hacer borde con imágenes, teniendo presente que no se ve en todos
los navegadores, son:

 border-image-source: URL de la imagen que queremos de borde
 borde-image-slice: Sirve para dar el espacio de la imagen que será visible como

borde; top, right, bottom y left.

 border-image-width: Ancho del borde con imagen.
 border-imagen-outset: Indicaremos el espacio más allá del borde que ocupará

nuestra imagen, tambien en top, right, bottom y left.

 border-repeat: pues el repeat que todos conocemos del elemento background.

Ejemplo

Código HTML

<div class="borde">
<p>prueba de borde</p>
<p>prueba de borde</p>