Cerrar

Enviar mensaje

twitter FaceBook You Tube Git Hub Docs.com Enviar email

Manual de HTML5 y CSS3

[10]
Formato de caja y lista

Publicidad

[10.1] propiedades CSS para listas

[10.1.1]list-style-type

La propiedad list-style-type permite especificar el tipo de elemento de numeración de la lista. Normalmente los navegadores muestran un círculo relleno en las listas no numeradas (las que se realizan mediante la etiqueta ul) y números arábigos en las listas numeradas (etiqueta ol).

Esta propiedad permite cambiar esos símbolos para elegir el que deseemos. La cuestión es que (aunque se podría) no es recomendable hacer que la etiqueta ol muestre símbolos no numéricos y tampoco que la etiqueta ul muestre símbolos numéricos, para mantener la coherencia semántica en el lenguaje HTML.

En todo caso los posibles valores de esta propiedad son:

En lugar de utilizar uno de los símbolos anteriores, se puede indicar una imagen con la que se rellenará la lista. La imagen puede tener cualquiera de los formatos habituales en las páginas web (gif, jpg, png). Lógicamente el tamaño debe de ser apropiado; si es muy grande la lista quedará totalmente descuadrada.

Ejemplo de uso:

list-style-image:url(‘cuadrado.gif’);

[10.1.3]list-style-position

Solo tiene dos posibles valores referidos a la posición del texto respecto de la imagen.

La propiedad list-style permite en un solo golpe configurar las propiedades anteriores. Su sintaxis es:

list-style:	list-Style-Type, list-style-position, 
				list-style-image;

Ejemplo:

list–style:square url(“cuadrado.gif”);

[10.2] formato de fondo

Se denomina fondo al espacio que queda “por debajo” del texto e imágenes de un elemento. Normalmente el fondo es transparente, pero podemos colorearlo o usar imágenes como fondo.

[10.2.1]color de fondo

La propiedad background-color permite establecer un color de fondo al elemento al que se aplique la propiedad. Si se aplica al elemento body, toda la página tendrá ese color de fondo; aplicado a otro elemento (como div o p por ejemplo), dicho elemento tendrá como fondo el color aplicado.

[10.2.2]imagen de fondo

38background-image

La propiedad background-image permite establecer una imagen de fondo. Esta imagen se superpone al color de fondo (si lo hay, de modo que si la imagen no se puede cargar (porque la ruta a ella no se ha indicado), entonces aparece el color de fondo.

Por defecto, la imagen de fondo se repite las veces necesarias (creando un mosaico), tanto en horizontal como en vertical, hasta que se rellena el elemento. Ejemplo de código completo:

<!doctype html>
<html lang=”es”>
<head>
        <meta charset=”UTF-8”>
        <title>Document</title>
        <style>
	.fondo{
                     background-color: maroon;
         background-image: url(granito.png);
                     color:white;
                }
        </style>
</head>
<body>
        <p class=”fondo”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quo nam dignissimos eum ex perferendis dolorem dolor fuga quasi. Praesentium provident necessitatibus beatae id tempora ab eligendi omnis quitium natus temporibus repellendus deleniti repellat </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum excepturi ut quaerat magnam error percumque reprehenderit necessitatibus perferendis minus laudantium neque molestias quo.</p>
</body>
</html>

Resultado:

39repetición del fondo. background-repeat

En principio, el fondo se repite en todas las direcciones hasta rellenar el elemento al que se aplica la imagen de fondo. Pero podemos hacer que la imagen se repita en una sola dirección (horizontal o vertical), e incluso hacer que no se repita.

Posibles valores de la propiedad:

Por defecto la imagen se coloca desde la esquina superior izquierda de la página (posición 0,0) y desde ahí se repite (si se ha indicado repetición de la imagen con la propiedad anterior) o no.

La posición desde la que la imagen se coloca inicialmente se puede modificar. La forma de hacerlo es así:

background-position: posicionHorizontal posicionVertical

Podemos indicar ambos valores de esta forma:

Así por ejemplo el código:

background-position: right bottom;

La imagen de fondo (si no hay repetición de la misma) se mostrará en la esquina inferior derecha del elemento en el que se ponga.

40desplazamiento del fondo. background-attachment

Cuando se desplaza el contenido de una página web, el fondo se mueve con el resto de la página. Mediante esta propiedad podremos hacer que el fondo quede fijo mientras que solo el resto de elementos se mueven. Los posibles valores para la propiedad son:

41tamaño del fondo. background-size

Permite indicar el tamaño de la imagen de fondo indicando su tamaño en horizontal y en vertical. Es una propiedad de CSS3 que solo funciona en los navegadores más modernos.

Ejemplo (Hace que la imagen de fondo mida 320px por 240px):

background-size: 320px 240px;

Otra posibilidad es:

background-size: 50% auto;

La palabra auto hace que la dimensión en la que aparece esa palabra (en el ejemplo se refiere a la altura) se calcule automáticamente.

Más recientemente (y por lo tanto no reconocido por navegadores que no sean bastante modernos) a esta propiedad le podemos dar los valores:

42área de dibujo del fondo. background-clip

Es una propiedad de CSS3 que define desde qué zona se dibuja el fondo. Sus posibilidades son:

43origen del fondo. background-origin

Es una propiedad CSS3 que todavía no es muy compatible con los navegadores. Tiene las mismas posibilidades que la anterior; pero, en este caso, se refiere a desde tomamos el origen de coordenadas que nos servirá como referencia para posicionar las imágenes de fondo.

44propiedad background

Fija en una sola propiedad todas las propiedades de fondo. Sintaxis:

background: background-color background-image 
				background-repeat background-attachment 
				background-position

Ejemplo:

background: maroon url(‘fondo1.gif’) no-repeat fixed left bottom;

Coloca color marrón de fondo, la imagen fondo1.gif, que solo aparece una vez, en la parte inferior izquierda y que se queda fijo en el fondo cuando el usuario se desplaza por la pantalla.

45poner varias imágenes de fondo

CSS3 incorporó una importante mejora a las imágenes de fondo y es el hecho de poder colocar varias imágenes de fondo en un elemento. Para ello basta poner comas en las imágenes en sí. Ejemplo:

<style>
	body{
		background-image:url(luna.png),
					url(saturno.png),url(lactea.jpg);
		background-position: left top, right top, 0 0;
		background-repeat: no-repeat,no-repeat,repeat;
	}
</style>

El resultado es:

Como se ha visto, aplicar varias imágenes de fondo se hace simplemente separando cada imagen por comas en cada propiedad.

Podemos usar directamente la propiedad background para producir el mismo resultado:

body{
	background: 
		url(luna.png) no-repeat left top,
		url(saturno.png) no-repeat right top,
		black url(lactea.jpg) repeat;
}

Una vez más, lo malo es que no todos los navegadores son capaces de aplicar esta posibilidad, por lo que muchos diseñadores optan por construir capas y en cada de una ellas manejar el fondo, para hacer este tipo de efectos.

[10.3] elementos del formato de caja

Se suele denominar formato de caja (o formato de cuadro) a la parte de CSS encargada del formato referente al rectángulo imaginario que envuelve a un elemento de una página HTML. Este rectángulo imaginario contiene completamente al elemento, así como al borde (si lo hay) y al espacio que se deja fuera del margen (margin) y el espacio que se deja por dentro del borde (padding).

En la Ilustración 14 se describen los elementos del formato de cuadro en CSS. La configuración del fondo de un elemento (que realmente también es parte del formato de caja), se explicó en el apartado “[11.3] imagen de fondo” en la página 190.

El espacio que va desde el contenido del elemento (en la ilustración sería el texto de color negro) hasta el borde es lo que se denomina espacio de relleno o padding. Ese espacio queda coloreado o rellenado con el fondo que se haya configurado.

El margen es un espacio exterior al borde. En dicho espacio no se ve el borde, es un espacio transparente veremos en él, el fondo configurado en el contenedor del elemento. Es decir si el elemento es una etiqueta p que cuelga directamente de body, en el espacio de margen veremos el fondo del elemento body.

[10.4] configuración del borde

[10.4.1]propiedades para el borde

El borde posee tres propiedades fundamentales: color, estilo y grosor. Además podremos configurar independientemente cada borde (izquierdo, derecho, superior e inferior). Por lo que disponemos de todas posibilidades:

En CSS3 ha aparecido la posibilidad de crear bordes redondeados así las esquinas de los bordes pueden formar un radio de un círculo cuyo tamaño podremos especificar. Es posible incluso indicar diferentes redondeados para las distintas esquinas.

La pega es que es un formato CSS3 por lo que algunos navegadores no lo reconocen. Propiedades relacionadas:

El borde redondeado queda muy extraño ya que se ha puesto un radio muy grande en horizontal y otro mucho más pequeño para la vertical.

[10.4.3]bordes usando imágenes (CSS3)

También en CSS3 ha aparecido la posibilidad de indicar una imagen para que cubra el borde. La idea es crear una imagen (el formato idóneo es PNG) en la que se pinten los bordes. Se estirará la imagen en la zona que no son las esquinas (el tamaño de las esquinas se puede indicar) para cubrir todo el tamaño del elemento que se está bordeando con la imagen.

Normalmente la imagen tiene solamente coloreado los bordes y el resto de la imagen son píxeles que se considerarán transparentes (por eso el formato más habitual para utilizar con este tipo de imagen es el PNG.

Un ejemplo de imagen preparada para pintarse como borde es esta:

borde2

Todo lo que aparece de blanco en la imagen, en realidad tiene color transparente y así a través de ellos se observará el fondo.

La idea es indicar la parte de la imagen dedicada a las esquinas usando su tamaño (en la imagen cada cuadrado de las esquinas mide 18 píxeles). De esa forma la imagen quedará troceada en nueve partes (las cuatro esquinas y la parte superior, inferior, izquierda, derecha y central de la imagen).

Para la zona que no es la esquina, indicaremos como haremos para rellenar completamente el elemento. Es decir, en la imagen anterior, los círculos azules no valen para rellenar el elemento completo al que estemos dando borde con la imagen. Por ello indicaremos al navegador que repita cada círculo (round), o bien que le estire (stretch).

Sintaxis de la propiedad border-image:

border-image: origenDeLaImagen tamañoEsquinas modoEstirar;

origenDeLaImagen. Es la ruta a la imagen

Ejemplos (suponiendo que la imagen anterior es borde2.png y que los cuadraditos de la imagen miden 18 píxeles x 19 píxeles):

p{
   background-color: lightgray;
   border:15px solid transparent;
   -webkit-border-image: url(borde2.png) 18 19 round; 	
   /*para Safari*/
   -o-border-image: url(borde2.png) 18 19 round; 
   /* para Opera*/
   border-image: url(borde2.png) 18 19 round;
}

La propiedad border debe indicar como tipo de borde el valor transparent. con el fin de usar imágenes Resultado:

Otro:

p{
   background-color:lightgray;
   border-width:15px;
   -webkit-border-image: url(borde2.png) 18 19 stretch; 
   /*para Safari*/
   -o-border-image: url(borde2.png) 18 19 stretch; 
   /* para Opera*/
   border-image: url(borde2.png)  18 19 stretch;
}

Resultado:

Y otro:

p{
   background-color: lightgray;
   border-width:15px;
  /*para Safari*/
   -webkit-border-image: url(borde2.png) 18 19 
								stretch round; 	
  /* para Opera*/
   -o-border-image: url(borde2.png) 18 19 
								stretch round;   border-image: url(borde2.png) 18 19 stretch round;
}

Resultado:

[10.5] sombreado de la caja.
box-shadow

Se puede aplicar una sombra a un elemento mediante la propiedad box-shadow. La sintaxis es:

box-shadow:distanciaH distanciaV desenfocado propagación color inset;

Donde:

Ejemplo:

p{
		background-color:yellow;
		box-shadow: 20px 20px 15px black;
		-webkit-box-shadow:20px 20px 15px black; 
		/* para Chrome anterior a la versión 10 */
		-moz-box-shadow:20px 20px 15px black;
		/* Para mozilla anterior a la versión 15*/
}

Resultado:

Esta propiedad ha sido recogida desde hace poco tiempo en todos los navegadores, Internet Explorer a partir de la versión 9 y Chrome y Firefox desde las versiones 10 y 15 (antes permitían su uso mediante prefijo -webkit- y -moz- respectivamente)

[10.6] relleno con gradientes

[10.6.1]gradientes lineales

Un gradiente es un degradado que permite colorear en lugar de con un color único, con una variación que va de un color a otro. CSS3 permite el uso de una función llamada linear-gradient que permite usarse por ejemplo en la propiedad background para establecer un gradiente.

Sintaxis de la función (estándar):

linear-gradient( direccion,primerColor posicion1,segundoColor posicion2,…)

El significado de los parámetros es el siguiente:

Ejemplo:

<!doctype html>
<html lang=”es”>
<head>
	<meta charset=”UTF-8”>
	<title>Document</title>
	<style>
		div{
			width:100px;
			height:100px;
			float:left;
			margin:5px;
		}
#d1{
   background: linear-gradient(to top,red,blue);
}
#d2{
    background: 
	linear-gradient(to right top,red,blue,yellow);
}
#d3{
   background: 
	linear-gradient(45deg,red,blue,yellow);  
}
#d4{
   background: 
	linear-gradient(to top,red,blue 80%);
}
#d5{
   background: 
	linear-gradient(to top,red,blue 20%, yellow 80%)	
}
</style>
</head>
<body>
	<div id=”d1”></div>
	<div id=”d2”></div>
	<div id=”d3”></div>
	<div id=”d4”></div>
	<div id=”d5”></div>
</body>
</html>

Resultado:

Desgraciadamente el estándar no es utilizado nada más que por los últimos navegadores, por lo que para versiones antiguas hay que usar la versión que, para sí mismos, construye cada navegador.

Por ejemplo para Firefox (aunque ya funciona la estándar en las últimas versiones), tenemos esta sintaxis:

-moz-linear-gradient(angulo o dirección, color1, color2)

Que es muy similar (pero no usa la palabra to para las direcciones del degradado).

Por su parte los navegadores webkit (como Chrome y Safari) usaban esta otra fórmula en sus versiones antiguas:

-webkit-gradient(linear, puntoInicial, 
	puntoFinal, from(color), 
	color-stop(porcentaje1,color1), ), 	
	color-stop(porcentaje2,color1),..,to(color))

[10.6.2]gradientes radiales

La sintaxis estándar de la función que permite dibujar gradientes radiales (degradados en forma circular) es:

radial-gradient(forma at posicion, color1 posicion1, 
		color2 posicion2,…)

El primer parámetro (forma at posición), es opcional. La forma puede ser circle (circular), ellipse (elíptica) o un porcentaje de anchura por altura (por ejemplo 30% 50%) que indica el tamaño del radio horizontal y el vertical de la elipse. Es opcional indicar la posición mediante la palabra at, si lo hacemos indicaremos la posición exacta del radio.

El resto de parámetros (los colores) se manejan como en el caso del gradiente lineal.

Ejemplo:

<!doctype html>
<html lang=”es”>
<head>
	<meta charset=”UTF-8”>
	<title>Document</title>
	<style>
		div{
			width:100px;
			height:100px;
			float:left;
			margin:5px;
		}
#d1{
	background: radial-gradient(red,blue);
}
#d2{
	background: radial-gradient(red,blue,green);
}
#d3{
  background: 
	radial-gradient(30% 50%,red,blue,green);
}
#d4{
   background: 
    radial-gradient(30% 50% at 10% 50%,red,blue,green);
}
#d5{
   background: 
	radial-gradient(at 10% 50%,red,blue,green);
}		
#d6{
   background: 
	radial-gradient(100% 100% at 10% 50%,
						red,blue 20%,green 50%);
}
</style>
</head>
<body>
	<div id=”d1”></div>
	<div id=”d2”></div>
	<div id=”d3”></div>
	<div id=”d4”></div>
	<div id=”d5”></div>
</body>
</html>

Resultado:

Nuevamente la compatibilidad con esta función es reciente y muchos navegadores incorporaban su versión de esta función e incluso simplemente no manejaban este tipo de resultado.

[10.7] perfiles

Los perfiles son bordes que se ponen en el exterior de los elementos de tipo caja.

A diferencia de los bordes, propiamente dichos, explicados en los apartados anteriores, los perfiles son líneas que no comen espacio ni al relleno ni al margen. Los perfiles son bordes que se colocan en la posición en la que normalmente ocupa un borde pero no ocupan un espacio extra, como si la línea que dibujan estuviera por debajo del texto. Las propiedades de los perfiles son:

El estándar CSS añadió estas propiedades no para sustituir a los bordes, sino para ser aplicados a elementos de formulario con el fin de que quedará marcado el elemento que actualmente posee el foco; es decir, aquel elemento que recibe los datos procedentes del dispositivo de entrada del usuario, normalmente el teclado. Se usan también para depuración y para dar formato CSS a eventos de tipo hover , ya que el borde se añade sin que se muevan los elementos a su alrededor, lo que provoca un efecto más elegante.