Estilos CSS para el Diseño Web 3. CSS en imágenesaramirez/docencia/verano/2010/pdf/Tema_30.pdf ·...

Curso de Verano 2010 Estilos CSS para el Diseño Web

Universitat Pompeu Fabra Prof. Alejandro Ramírez 1

3. CSS en imágenes

3.1 Bordes El uso de imágenes con CSS permite no sólo reforzar el modelo de caja inherente a los estilos, sino reforzar la estética de lo que podría, en principio, parecer hasta limitante1

Borde de la caja

. Mientras que, por un lado, CSS permite diseños limpios que no requieren excesos de imágenes, los estilos se enriquecen del potencial que ofrece el uso adecuado de las imágenes junto al CSS. Poco a poco, los diseñadores que han aprendido el potencial (y limitantes) de lo que se puede lograr estéticamente con CSS han proporcionado un mundo rico basado en principios simples.

Veamos algunos de estos principios, comenzando por el borde de las imágenes. Como las imágenes siempre son rectangulares, ya tienen en sí mismas el modelo de caja de forma inherente: un rectángulo con bordes. El siguiente código2

nos permite confirmar la afirmación: una imagen con un enlace simple.

<body> <a href="http://www.cinenganos.com"><img src="imagenes/imagen01.jpg" width="250" height="354" /></a> </body> Al tener un enlace, algunos navegadores3

cargarán por defecto el borde para indicar la presencia del link. Con ello, lo que obtendremos es algo parecido a lo que sigue, con un color azul (que es el color por defecto de los enlaces, pues este HTML no tiene ningún CSS que cambie los valores por omisión)

Si nos interesara quitar ese borde, tenemos que recurrir al modelo de caja y al uso de CSS4

1 En el sentido de que una ‘caja’, de entrada, no parece lo más creativo o lo más variado del mundo. Conozco a más de un diseñador gráfico pre-web que asocia el diseño web al diseño de un “ingeniero” (entendiendo que todo son cuadrados y rectángulos) ;-)

. El siguiente código CSS nos permite definir el modelo de caja que se aplicará a las imágenes:

2 Ver el fichero 101.html de los recursos del curso (en el Tema 3) 3 Depende del browser y de la versión del HTML o XHTML que se use en la definición del documento. 4 En HTML antiguo había un atributo border en las imágenes, pero se trata de un elemento obsoleto (deprecated) en las versiones actuales de HTML y XHTML.



/* CSS Document */ img{ border-style: none; } De modo que, al aplicarlo al HTML5

, estamos indicando que el estilo del borde, border-style, será none, ninguno, y aún con el enlace, la imagen aparecerá sin el borde:

Hay más de un lado en una caja Podemos aprovechar para hablar de las notaciones completas y las notaciones de cada lado del modelo de caja. El código anterior obvia que estamos aplicando el estilo nulo a todos los lados de la caja, pero CSS nos da un control absoluto de cada uno, con lo que podríamos usar una notación detallada e indicar explícitamente cada lado. El código sería como el que sigue6

:

/* CSS Document */ img{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }

Que nos permite experimentar7

, por ejemplo, quitando sólo dos bordes en vez de los cuatro, por dar un ejemplo:

/* CSS Document */ img{ border-bottom-style: none; border-left-style: none; }

5 Ver 102.html e imagenes01.css en el Tema 3. 6 El CSS incluye un comentario, que puede incluirse con esa notación (/* */ ), y que nos permite poner notas, organizar un CSS complejo, etc. 7 ¡Vamos, vamos, ya pueden aplicarlo y jugar con las opciones! ;-)



Aquí, es importante destacar que CSS actúa con criterios simples: si uno explicita un lado pero no los demás, se entiende que sólo ajustamos un lado. Los demás, actuarán por omisión al no tener un estilo propio. Este comportamiento es general en el modelo de caja, como veremos con otras opciones más adelante.

Retomando la idea de quitar los cuatro bordes, el mismo CSS puede escribirse en una notación corta8

, incluyendo solamente la propiedad border, que incluye en si misma al border-style visto antes. El código sería el siguiente, y el resultado el ya conocido.

img{ border: none; }

Agregar bordes Lo que hemos hecho hasta ahora es quitar el borde por defecto que sale en los enlaces, pero podemos explotar el potencial de CSS para aplicar el borde y controlar su apariencia, independientemente de que la imagen lo tenga o no (por ejemplo, si la imagen no tiene enlace9

).

El CSS que permite agregar un borde a las imágenes es el siguiente10

:

img{ border-width: 1px; border-style: solid; border-color: #000000; } Donde podemos ver nuevas propiedades: border-width (que se encarga del ancho del borde), border-style (ya la conocíamos, pero esta vez asignamos el valor de un borde sólido con solid) y border-color (controlando, obviamente, el color del borde). El ejemplo aplica un CSS a los cuadro lados del modelo de caja11

, y el resultado en el navegador es el siguiente, con un borde negro, sólido, de grosor equivalente a 1 pixel:

8 Más adelante veremos más sobre esta notación. 9 Lo que es una pena, pues el sitio de cine al que se enlaza mola :-) – Cita al pie no patrocinada ;-) 10 Ver 103.html del tema 3, y su hoja de estilos, imagenes02.css. 11 A estas alturas no debería sorprender que es posible usar todo el detalle que se desee, con atributos completos como border-top-width, border-right-width, border-bottom-style etc.



Para experimentar por cuenta propia, y seguir aprendiendo variantes, pueden jugar con otros valores de grosor, color, y usar distintas variantes de estilo de borde disponibles, además de solid. Por ejemplo, dotted, dashed, double o groove. Las referencias de CSS12

son siempre una gran ayuda para tener a mano todas las opciones disponibles y su significado.

Notación compacta Aprovecharemos este tema para ver un poco de las notaciones abreviadas de ciertas propiedades. El siguiente código13

nos muestra la notación abreviada en la propiedad border:

/* CSS Document */ img{ border: 1px solid #000000; } Como podemos ver, se trata de una única propiedad, en donde se definen -en orden- los parámetros de las opciones border-width, border-style y border-color. Esta notación compacta en ciertas propiedades (en inglés, shorthand) se aplica a los cuatro bordes, lo que permite simplificar la escritura en una sola línea.

¿Sólo a algunas imágenes? Si ponemos atención al código, estamos aplicando el CSS a la etiqueta <img> del HTML. Esto implicaría que todas las imágenes de la página tendrían un ajuste de borde como los que hemos visto, ya que todas usan esa etiqueta de HTML. Para ciertas imágenes eso no sería lo deseado, de modo que cabe recordar que siempre podemos definir clases concretas para nuestros fines, como con el código que sigue14

:

.imgborder{ border: 1px solid #000000; } Que podría aplicarse a un HTML como el que sigue: <img src="imagenes/imagen01.jpg" width="250" height="354" class="imgborder" /> Recuerden que podemos definir tantas clases como deseemos, con lo que podríamos tener una clase para imágenes de galería, otras para imágenes de navegación, etc.

3.2 Fondos Las imágenes de fondo se usaron desde los inicios del HTML15

12 Como ejemplo, la propiedad del estilo del borde, border-style:

. Los estilos CSS no sólo permiten aplicar una imagen como fondo sino controlar totalmente dicha imagen y su comportamiento respecto del bloque al que se aplica.

http://reference.sitepoint.com/css/border-style en la referencia de Sitepoint. 13 Ver 104.html en el tema 3, y su CSS asociado. 14 Ver 105.html y su estilo asociado, en este tema. 15 Antiguamente, como un atributo (background) de la etiqueta <body>.

http://reference.sitepoint.com/css/border-style�



Imagen de fondo El siguiente código16 es una muestra de CSS para aplicar una imagen de fondo17

(y aprovecharemos el ejemplo para aplicar también un color de fondo):

body { background-image: url(imagenes/imagen01.jpg); background-repeat: no-repeat; background-color: #999966; } Como podemos ver, el cuerpo del HTML está enteramente vacío: <body> </body> En el CSS, podemos ver que estamos aplicando, a todo el cuerpo del documento (<body>), una imagen de fondo con la propiedad background-image que carga una imagen del URL deseado. De igual modo, se asigna un patrón de repetición para dicha imagen de fondo (con la propiedad background-repeat, que en este caso no tiene repetición, ya que se usa el valor no-repeat). Además, se ha asignado un color de fondo con la propiedad background-color. En el navegador, el resultado es como el que sigue:

Y podemos ver que la imagen aparece (comenzando por la esquina superior izquierda), sin repetirse (debido al valor asignado), y se muestra sobre el color de fondo elegido. Notación compacta La imagen de fondo puede asignarse a través de la notación compacta de la propiedad general background, como en el siguiente código18

.

body { background: #999966 url(imagenes/imagen01.jpg) no-repeat; }

Donde podemos ver que el primer valor es el color (background-color), el segundo la imagen (background-image) y el tercero la repetición (background-repeat).

16 Ver 201.html en el tema 3, y su estilo asociado, fondos01.css. 17 Sí, los rumores son ciertos ;-), la foto es de una rueda de prensa a la que asistí. 18 Ver 202.html en este tema, y su estilo asociado.



Repetición de patrones Para entender el uso de imágenes de fondo, vale la pena ver la repetición de patrones. Como puede intuirse, background-repeat tiene más de una opción. Repetición horizontal, vertical y mosaico Si deseamos aplicar una repetición horizontal (es decir, sobre el eje x), necesitamos que el valor de repetición sea repeat-x, como en el siguiente ejemplo19

:

body { background: #999966 url(imagenes/imagen01.jpg) repeat-x; }

Esta repetición, en los navegadores, se verá como sigue (repitiéndose toda la anchura de la ventana del navegador):

Como podemos imaginar, también hay un valor repeat-y, que repite verticalmente (ahora sobre el eje y), para un resultado como sigue: body { background: #999966 url(imagenes/imagen01.jpg) repeat-y; }

La repetición de mosaico se logra con el valor repeat (sin ejes, repetición general). body { background: #999966 url(imagenes/imagen01.jpg) repeat; }

19 Ver 203.html y su correspondiente hoja de estilos, en este tema.



Que en el navegador aparecerá así:

Imágenes especialmente diseñadas para repeticiones Aprovechando el comportamiento de las repeticiones, es usual utilizar imágenes especialmente diseñadas para las repeticiones. Por ejemplo, podemos usar una imagen suficientemente ancha pero poco alta, como la que sigue:

La imagen resulta ideal para repetirse verticalmente (eje y) y, en este caso, aprovechar que el color de la imagen se ha elegido para coincidir con el color de fondo. Por ejemplo, este código20

busca un efecto compartido del color de fondo, y la imagen diseñada para ese fin.

body { background: #999966 url(imagenes/fondo01.jpg) repeat-y; }

En el navegador, se muestra como sigue, mostrando la repetición del patrón, y logrando que el fondo.

20 Ver en este tema el 204.html, su css (fondos04.css) y la imagen fondo01.jpg.



El mismo principio podría usarse en otro eje, si pensamos en usar una imagen muy alta pero poco ancha, como esta:

Que podría usar un CSS como el de este código21

:

body { background: #999966 url(imagenes/fondo02.jpg) repeat-x; } De modo que en el navegador resulte algo como lo que sigue:

Tener en cuenta que las posibilidades son muchas y que hay más cosas que los degradados o gradientes.

21 Ver 205.html, su CSS y su imagen de fondo.



Piensen, por ejemplo, en patrones repetidos verticalmente con imágenes como estas dos que siguen, ajustando o no el color de fondo con los tonos finales, etc.

3.3 Posicionamiento y cajas Terminaremos el tema de CSS en imágenes relacionando su uso con el modelo de caja, lo que permitirá ver más opciones de imagen, y reforzar el uso de este modelo, la base del posicionamiento y diseño avanzado con CSS. Ya vimos algo del modelo de caja con el texto, al poner las sangrías, pero es momento de ampliar las bases.

Más del modelo de caja El modelo de caja y los bordes en las imágenes son un buen punto para entender el modelo de caja aplicado, algo que después puede extenderse fácilmente al resto de etiquetas en las que se explote dicho modelo. Reset de la caja principal Comencemos por definir la caja principal: toda la página HTML, y ajustemos para que no tenga ningún margen o relleno22

.

body { margin: 0px; padding: 0px; }

Esto permitirá que los contenidos del cuerpo (<body>) comiencen a mostrarse justo en el “origen” (esquina superior izquierda, nuestro “origen de coordenadas”) y que no existan márgenes ni relleno. Se usa esto ya que cada navegador tiene ciertos valores de relleno y/o margen por defecto para las etiquetas, que no coinciden, y con un margen y relleno nulos nos aseguramos de que tenemos el control total de nuestra página en términos visuales. Modelo de caja con la imagen En el HTML, tenemos una imagen con la clase boximage a utilizar. <body> <img src="imagenes/imagen01.jpg" width="250" height="354" class="boximage" /> </body>

22 Ver 301.html ( y cajas01.css) en este tema 3.



Para ver la caja y entender los parámetros, podemos hacer uso de un CSS como el que sigue, para la clase de la imagen utilizada. .boximage { margin: 25px; padding: 10px; border: 2px solid #990000; }

Podemos ver que estamos usando propiedades compactas de margen y relleno23

, con margin y padding, además del ya conocido border. Estas dos propiedades en notación shorthand, compacta, permiten asignar un margen y un relleno. En este ejemplo, un margen de 25 píxeles y un relleno de 10. El borde tiene un color rojo, de 2 píxeles de grosor, sólido.

En el navegador, se mostrará como sigue (se incluye la esquina superior izquierda de la ventana, como referencia)

En el tema 1 se incluyó la imagen general del modelo de caja, y aquí podemos ver cómo actúa esta caja realmente en cuanto al relleno y su margen. La propiedad margin es el margen del elemento al que se aplica. Podemos ver que se trata de lo que rodea a nuestro elemento. La propiedad de padding es el relleno de nuestra caja, teniendo en cuenta que la caja tiene un contenido con un ancho dado (en este caso, el de la imagen) y un relleno que la separa de su borde. En este sentido, el padding se puede interpretar como un “margen interior” entre el contenido del la caja y su borde. Como podemos ver, la caja con la imagen se muestra con un margen de 25px que la separa de los bordes de la ventana, y entre su contenido (la imagen) y su propio borde, hay un relleno de 10px. Como nota importante, al usar esa notación concreta, todos los valores actúan en los 4 lados de la caja. Es decir, el relleno es de 10px hacia arriba, abajo, iquierda y derecha. Lo mismo pasa con los 25px de margen asignados.

23 A diferencia de las propiedades vistas en el tema anterior, cuando usamos las propiedades de cada lado: margin-top, margin-bottom, etc.



Cajas flotantes Veamos qué pasa si integramos un poco de texto. Comencemos por añadir texto a nuestro código24

.

<body> <img src="imagenes/imagen01.jpg" width="250" height="354" class="boximage" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at sapien nisl. Aenean venenatis dignissim tortor, malesuada ...</p> En el navegador, se mostrará como sigue:

Con la imagen al inicio, y encima del texto. Si nuestra intención es hacer que la imagen flote, necesitamos hacer uso de una propiedad específica para ello: float. .boximage { margin: 25px; padding: 10px; border: 2px solid #990000; float: left; } La propiedad float permite que el elemento al que se está aplicando “flote” respecto de lo que le rodea, es decir, aparezca con libertad respecto al flujo que seguiría normalmente de no haberse aplicado la flotación. Con el valor del ejemplo, left, la imagen flotará hacia la izquierda. Si usáramos el valor de right, sería en el lado derecho. En el navegador, el contenido se mostrará ahora como en la siguiente imagen:

24 Ver 302.html y su CSS asociado, en este tema.



Donde podemos ver que ahora el texto “rodea” a la imagen, que aparece flotando hacia la izquierda, provocando que el contenido inmediatamente a continuación (el texto) se posicione y se ajuste de acuerdo con esa flotación. Con lo aprendido en los temas que llevamos, debería ser muy simple ajustar las propiedades del texto, para que aparezca alineado, justificado, etc. Les toca experimentar, y aplicarlo para las actividades del curso.

Imagen de fondo a cajas pequeñas Como cierre, veamos el uso del bloque <div>, un contenedor25

dentro del código HTML.

Veamos el código que sigue26

:

<body> <p>Lorem ipsum dolor sit amet, … blandit.</p> <div class="boxedtext">Lorem ipsum. Lorem ipsum. Lorem ipsum.</div> <p>Lorem ipsum dolor sit met, …landit.</p> Podemos ver que tenemos una “caja”, el contenedor, entre dos párrafos de texto. El CSS de ejemplo es el que sigue: .boxedtext { margin: 10px; padding: 10px; border: 5px solid #339933; float: left; background: url(imagenes/fondo01.jpg); color: #FFFFFF; width: 200px; }

25 Pensar que este contenedor <div> puede tener cualquier HTML, no sólo texto. Imágenes, texto, enlaces, etc. 26 Ver 303.html y su CSS asociado, en este tema.



Donde tenemos márgenes, relleno, borde, flotación, y añadimos un color de texto, una imagen de fondo, y un ancho determinado para la caja: 200px, con la propiedad width. Esto, en el browser, aparecerá así:

Donde podemos ver que, al igual que la imagen, la caja tiene la flotación, bordes, texto con color controlado, etc. Como podemos ver, la imagen de fondo no es exclusiva del cuerpo del HTML, sino que puede aplicarse a cualquier elemento contenedor donde tenga sentido tener una imagen de fondo aplicada Ancho real: ancho, relleno y margen Como cierre, es muy importante tener en cuenta el modelo caja y el significado del ancho (y, en su caso, del alto) de la caja, ya que el width que hemos visto no es el width del bloque como tal, sino sólo el de su contenido interior. En el ejemplo, se asignó un CSS como este (detalle): .boxedtext { margin: 10px; padding: 10px; border: 5px solid #339933; width: 200px; }

Donde podemos ver que el contenido de la caja tendrá un ancho de 200 píxeles. Estos, se suman a 10 píxeles de cada lado de relleno, y 5 píxeles de cada lado en el borde. Es decir, La caja mide, realmente, 200+10+5+10+5 = 230px. El espacio que ocupa es aún mayor, ya que tiene 10px de margen a cada lado, de modo que realmente utiliza 250px de la pantalla. Si tenemos en cuenta que, además, hay un margen definido, podemos ver que las dimensiones comienzan a ser relevantes. Al diseñar una página con CSS, es importante tener presente que los bloques, como este de 200px de ancho, no implican el ancho real de la caja, pues hay que sumar el borde, el relleno y, en su caso, el margen que puede o no tener. La maquetación real de una página implica contar píxeles, y ajustar los CSS de acuerdo con las necesidades concretas de cada bloque, columna, o similar.

Estilos CSS para el Diseño Web 3. CSS en imágenesaramirez/docencia/verano/2010/pdf/Tema_30.pdf ·...

Documents

Transcript of Estilos CSS para el Diseño Web 3. CSS en imágenesaramirez/docencia/verano/2010/pdf/Tema_30.pdf ·...