Scribd Logo
Upload

Welcome to Scribd!

  • 2 Imagenes

    Uploaded by

    MILTON MIRANDA
    15 views7 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views7 pages

    2 Imagenes

    Uploaded by

    MILTON MIRANDA

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Imgenes

    En este mdulo veremos las diferentes opciones que aparecen en CSS3 para la manipulacin de imgemes de fondo de nuestros elementos HTML. Entre ellas se destaca:

    Colocacin de mltiples imagenes de fondo Posicionamiento de la imagen de fondo Redimensionamiento de la imagen de fondo

    Tamao de imagen de fondo


    Una de las funciones mas solicitadas por los desarrolladores de sitios web, fue la de poder dimensionar la imagen de fondo de nuestros elementos. Hasta la llegada de CSS3, no era posible dicha funcionalidad, pero con la llegada de esta ultima versin, ha llegado tambin la propiedad backgroundsize que nos permite redimensionar la imagen de fondo. Esta nueva propiedad admite valores de ancho y alto tanto en pxeles como en porcentajes. Solo debemos colocar primero el ancho y luego el alto. Por ej:

    ? background-size: 500px 100px; VEAMOS UN EJEMPLO CONCRETO:

    En el siguiente ejemplo podremos como fondo de un div, una imagen de fondo que es originalmente cuadrada (224 x 224 px), y la deformaremos aplicndole un ancho de 500 px y un alto de 100px. Imagen original:

    Resultado con el redimensionado con background-size:

    Para lograr mayor compatibilidad entre navegadores, debemos utilizar los diferentes prefijos moz (Firefox), -o (Opera), -webkit (Chrome y Safari), -khtml (Konkeror) El cdigo completo del ejemplo seria:

    ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tamao de la imagen de fondo</title> <style type="text/css"> #caja { width: 500px; height:300px; background-size: 500px 100px; -moz-background-size: 500px 100px; -o-background-size: 500px 100px; -webkit-background-size: 500px 100px; -khtml-background-size: 500px 100px; background-image: url(fondo.jpg); background-repeat: no-repeat; border: 1px solid #F00; } </style> </head> <body> <div id="caja">Contenidos de Texto del DIV</div> </body> </html>

    Aqu estn los ejemplos terminados:

    Posicin de la imagen de fondo


    La propiedad de CSS 3 background-origin nos permite configurar la posicin de la imagen de fondo con respecto al borde, padding o el contenido del elemento. Al colocar una imagen de fondo en un elemento de HTML, esta se posiciona dentro del espacio de ese elemento y por defecto aparece como un mosaico, repitiendo la imagen a lo largo de todo el espacio de ese elemento. Para colocar esa imagen de fondo, el navegador utiliza un origen de coordenadas, a partir de donde colocar dicha imagen. Este origen esta ubicado en el vrtice superior izquierdo del elemento en cuestin, sin es que el elemento no tiene aplicado un padding. En CSS 3 existe el atributo background-origin con el que podemos definir el origen de coordenadas sobre el que se va a colocar la imagen de fondo. Este mismo lo podemos definir para que sea el borde del elemento, su padding o su contenido. Ejemplos de valores que puede adoptar background-origin: border-box: Esto significa que el origen de coordenadas de la imagen ser el borde del elemento. En este caso la imagen empezara donde empieza el borde del elemento, si es que tiene borde. ?
    background-origin: border-box;

    padding-box: Este es el valor utilizado por defecto en CSS 3 e igual a como se posiciona la imagen en navegadores que slo entienden CSS 2 o inferior. Cuando indicamos background-origin: padding-box; el eje de coordenadas donde se va a colocar la imagen ser el espacio destinado al elemento, incluyendo su posible padding y sin contar el posible borde. ?
    background-origin: padding-box;

    content-box: Este valor sirva para que el origen de coordenadas para la posicin de la imagen de fondo sea el lugar donde empieza el contenido del elemente, osea, sin tener en cuenta sus posibles bordes y padding.

    background-origin: content-box;

    En este ejemplo creamos 3 divs con algunos textos internos: ?


    <div id="caja1"> <h2>background-origin: border</h2> Elemento con borde y padding. <br> Propiedad <b>background-origin: border</b> </div> <div id="caja2" class="mifondo"> <h2>background-origin: padding</h2> Elemento con borde y padding. <br> Propiedad <b>background-origin: padding</b><strong>box</strong></div> <div id="caja3"> <h2>background-origin: content</h2> Elemento con borde y padding. <br> Propiedad <b>background-origin: content</b> </div>

    Y la aplicamos la propiedad background-origin con los 3 posibles valores. Ademas de eso, le aplicamos una clase que determina el borde, su color , la imagen y colo de fondo, el padding y el margin.

    ?
    <style type="text/css"> .mifondo{ border: 10px dashed #F00; padding: 10px; background-image: url(fondo.jpg); background-repeat: no-repeat; margin: 20px 0; background-color: #FC3; } #caja1{ -moz-background-origin: border; -webkit-background-origin: border; background-origin: border-box; } #caja2{ -moz-background-origin: padding; -webkit-background-origin: padding; background-origin: padding-box; } #caja3{ -moz-background-origin: content; -webkit-background-origin: content; background-origin: content-box; } </style>

    Vemos el ejemplo:

    Compatibilidad de background-origin Los navegadores que han comenzado a soportar esta propiedad, utilizan prefijos para los nombres de las mismas. En Mozilla Firefox debemos utilizar el atributo -mozbackground-origin, en navegadores basados en webkit (como Chrome o Safari) se debe utilizar el atributo -webkit-background-origin. Vale aclarar que navegadores basados en webkit y Mozilla no tienen en cuenta la terminacin -box al final de los valores de los atributos, por lo que hay que eliminarla.

    Mltiples imgenes de fondo


    La colocacin de imgenes de fondo es ya algo bastante bsico de los estilos CSS. Pero el nuevo CSS3 nos ofrece la posibilidad de colocar mltiples imgenes de fondo dentro de un elemento de nuestro documento. En CSS (normal) es decir en sus versiones 1 2.1, la colocacin de fondo se realiza por medio de la propiedad background-image: url(), la cual noe permite poner solo 1 imagen. Si en este caso quisiramos colocar varias imgenes, deberamos anidar un div dentro de otro, y colocarle una imagen de fondo distinta a cada uno para asi lograr el efecto requerido. Por ejemplo, aqu anidaremos 3 divs con 3 imgenes diferente: ?
    <div id="fondo1"> <div id="fondo2"> <div id="fondo3"> </div> </div> </div>

    Anidamos 3 capas o divs con IDs (identificadores) diferentes. Luego generamos nuestras propiedades CSS para aplicarle los distintos fondos por medio de su ID:

    <style type="text/css"> #fondo1{ background-image: url(fondo1.gif); width: 300px; } #fondo2{ background-image: url(fondo2.png); background-repeat: no-repeat;

    background-position: bottom right; } #fondo3{ background-image: url(fondo3.png); background-repeat: no-repeat; background-position: center; } </style>

    Los fondos se superpondrn unos a otros, siendo el fondo1 el que se vea ms abajo y el fondo3 el que se ver ms arriba. Ahora bien, CSS3 dispone de una caracterstica que nos permite colocar los 3 fondos directamente a un mismo elemento, en este caso, a un mismo DIV.

    Por ejemplo: ?
    <div id="fondos"> Contenido de texto nico elemento </div>

    Ahora veamos el codigo CSS 3 para este ejemplo: ?


    <style type="text/css"> #fondos{ background: url(fondo3.png) bottom right no-repeat, url(fondo2.png) center no-repeat, url(fondo1.png) center repeat; width: 300px; } </style>

    Como podemos ver, solo basta con escribir las diferentes imgenes de fondo separadas con coma y seguida de su alineacin en referencia al elemento contenedor, y su forma de repeticin. En este ejemplo tenemos un DIV con 3 fondos: fondo3.png que es una tira azul fondo2.png que es una tira verde fondo1.png que es una tira roja

    El fondo 3 (azul) lo coloca contra abajo por medio de la propiedad bottom right norepeat. El fondo 2 (verde) lo coloca centrado y no lo repite, por medio de la propiedad center no-repeat El fondo 1 (rojo) lo coloca centrado y si lo repite, por medio de la propiedad center repeat Aqu vemos el ejemplo terminado:

    COMPATIBILIDAD: No es compatible con IE7 o anteriores.

    You might also like