Como hacer fondos “elásticos” para títulos y menús
(2 votos, promedio: 2,50 de 5)
Cargando...Como hacer para que un fondo de imágenes se adapte a la longitud del texto, siguiendo dos métodos diferentes. Ejemplo en títulos y en menús.
Las capacidades de CSS son enormes, lo que permiten que, con un poco de imaginación, se puedan realizar efectos muy atractivos. En el presente artículo, mostraremos dos formas de hacer que el fondo se adapte a la extensión del texto, algo que como verán a continuación, parte de conceptos básicos muy simples.
Algunos de los conceptos elementales que emplearemos en adelante, pueden verse en los siguientes artículos:
Utilización de la repetición y posición de fondos en la maquetación de páginas web
Diseño de menus y submenus con CSS
Títulos con fondo “elástico”
En primer lugar, veremos cómo hacer que el fondo de un título o subtítulo tome el tamaño necesario para cubrir la extensión del texto asignado. Pero además, veremos que se trata de un primer método, ya que en el ejemplo siguiente, utilizaremos otra forma de hacerlo. Estos dos métodos, pueden utilizarse en cualquier tipo de texto que sea necesario que cuente con un fondo.
Para seguir ambos ejemplos, crearemos una sola página web en HTML o XHTML, y crearemos un archivo CSS que colocaremos en una carpeta que denominaremos “archivos”. Para albergar las imágenes, crearemos un fichero que llamaremos “imágenes”. Ambas carpetas estarán en la raíz del sitio, es decir, en la misma carpeta en la que se encontrará el archivo HTML. En caso de que deseemos modificar esta estructura, deberemos realizar los cambios correspondientes en los enlaces de los códigos que presentaremos como ejemplo.
Para realizar el ejemplo, deberán además, descargar las siguientes imágenes, simplemente copiándolas desde esta página
En primer lugar, daremos los códigos de ejemplo, para que puedan ver como se han dispuesto los diferentes elementos, para luego ir detallando la forma en que funciona. En primer lugar, el código HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
<head>
<title>Títulos líquidos</title>
<link rel="stylesheet" type="text/css" href="archivos/estilos.css" />
</head>
<body>
<div id="pagina">
<div id="titulo">
<h2>Subtítulo de la página</h2>
</div>
<div id="titulo">
<h2>Entrar</h2>
</div>
<div id="titulo">
<h2>Título más largo que los anteriores, para ver como se comporta.</h2>
</div>
</div>
</body>
</html>
A continuación, el código CSS:
html {
margin: 0;
padding: 0;
}
#pagina {
width: 900px;
margin: 0 auto;
}
#titulo {
height: 63px;
background: url(../imagenes/der.jpg) no-repeat right;
padding: 0;
display: table;
}
#titulo h2 {
height: 45px;
padding: 18px 50px 0px 50px;
background: url(../imagenes/izq.jpg) no-repeat left;
font: bold 20px arial, helvetica, sans-serif;
color: white;
}
En el archivo HTML podemos ver que en primer lugar encontramos una capa marcada con el identificador “pagina”, que sirve simplemente para acotar el espacio a 900 pixeles y centrar todo el trabajo. En el archivo CSS, además, hemos eliminado el margin y padding que los navegadores muestran por defecto para la etiqueta <html>.
Entrando en el ejemplo, vemos que cada título está compuesto por una capa y un título <h2> dentro de la misma. La capa título tiene una altura de 63 pixeles, que se corresponde con la altura de la imagen que utilizaremos como fondo. La imagen que se coloca como fondo de esta capa, es lo suficientemente ancha como para que, en caso de que el título se extienda por todo el ancho de la página, este espacio quede cubierto.
Para que el borde redondeado de la imagen seleccionada aparezca a la derecha, se debe posicionar la imagen de fondo hacia la derecha, colocando el valor “right” en la propiedad “background-position” o utilizando el método abreviado, como está en el ejemplo, colocando el valor al final del enlace a la imagen. Con esto, la imagen comenzará a visualizarse desde la derecha, por lo que lo que “sobre”, quedará cortado por la izquierda.
Pero ahora nos encontramos con el inconveniente de que la capa tratará de ocupar todo el ancho disponible. Para que esto no suceda y se limite a cubrir el espacio ocupado por el texto, agregamos el valor “table” a la propiedad “display”. Esto quiere decir que esta capa se comportará como una tabla, las que en caso de no estar determinadas sus dimensiones, solo ocupan el espacio determinado por el contenido.
El borde izquierdo y el contenido está determinado por la etiqueta “<h2>”. Además de disponer la forma en que se visualizará el texto (fuente, color, etc.), se le agrega como fondo la imagen que da el borde izquierdo. Al contrario de la imagen de fondo de la capa, esta imagen debe posicionarse a la izquierda y sin márgenes. Al estar superpuesta a la imagen de fondo de la capa, da el efecto de que se trata del principio de una misma imagen. La parte que ofrece mayores dificultades, es combinar la altura con el relleno superior (padding-top). Se debe tener en cuenta que el tamaño final de un objeto es la suma de las dimensiones otorgadas al mismo más el relleno y los bordes.
Por ello, para que el texto se vea en la mitad del fondo, se adoptó un relleno superior de 18 pixeles, lo que fue necesario descontar de la altura (45px + 18px = 63px). Para que el texto no comience encima del doblez que muestra la imagen, fue necesario establecer un relleno a la izquierda de 50 pixeles, que para que el texto se muestre centrado, fue necesario compensar con un relleno igual a la derecha.
Menú con ítems de fondo “elástico”
El ejemplo anterior, puede trasladarse a cualquier elemento, incluyendo los ítems de menú. Pero para desarrollar el ejemplo que seguiremos ahora, hemos optado por hacerlo de otra forma, que también puede aplicarse al ejemplo anterior sin mayores dificultades, y que consiste en realizarlo al revés. Si se sigue el ejemplo anterior, es necesario agregar el siguiente código al archivo HTML:
<div id="menu">
<ul>
<li><a href="#">Ítem 1</a></li>
<li><a href="#">Otro ítem más</a></li>
<li><a href="#">Ítem de menú</a></li>
<li><a href="#">Corto</a></li>
<li><a href="#">Ítem más largo aún</a></li>
</ul>
</div>
Y las siguientes líneas en el archivo CSS:
#menu ul {
list-style: none;
}
#menu ul li {
float: left;
background: url(../imagenes/izq-menu.jpg) no-repeat left;
margin-left: 10px;
}
#menu ul li a {
text-decoration: none;
color: white;
font: bold 12px arial, helvetica, sans-serif;
background: url(../imagenes/der-menu.jpg) no-repeat right;
margin-left: 20px;
padding: 0 30px 0 10px;
line-height: 32px;
display: block;
}
#menu ul li a:hover {
color: black;
text-decoration: underline;
}
Como puede verse, se trata simplemente de una lista, a la cual se le han quitado los marcadores de los ítems (list-style: none), aunque esto no es imprescindible y solo se trata de algo estético. Luego se hace que los ítems de menú sean flotantes y se le asigna un fondo, el que se trata de una imagen larga que se posiciona a la izquierda, de forma que el borde redondeado izquierdo es proporcionado por la misma.
Luego se hace que el ítem que contiene un enlace (#menu ul li a) también presente una imagen de fondo, la que en este caso se muestra a la derecha y solo contiene el borde derecho de la imagen final. A diferencia del ejemplo anterior, es necesario otorgar un margen izquierdo igual al ancho de la imagen de fondo del lado izquierdo, para que la imagen más larga no se monte encima de la corta. Para determinar la altura del ítem, se emplea la propiedad line-height en lugar de dar un valor de la altura.
Conclusión
Para conseguir algunos efectos, es posible emplear varios métodos diferentes, todos válidos y que dan el mismo resultado. En CSS no existen límites para el desarrollo, por lo que el único límite con que se cuenta, es el de la propia imaginación.
- Responsable: Verónica Milán Gómez
- Finalidad: gestionar los comentarios que realizas en esta web.
- Legitimación: Consentimiento del interesado.
- Destinatarios: Hosting: Cyberneticos Hosting, S.L. Con domicilio en UE. Mi hosting es 100% español y 100% seguro
- Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en admin@lawebera.es así como el derecho a presentar una reclamación ante una autoridad de control.
- Información adicional: En la política de privacidad de LaWebera.es encontrarás información adicional sobre la recopilación y el uso de su información personal por parte de Verónica Milán Gómez, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.
- Los comentarios de esta web no tienen caracter legal ni oficial. Hacemos lo mejor por el usuario y por dar información fidedigna, pero no somos infalibles. Si decides seguir los consejos vertidos en esta web, es bajo tu única responsabilidad.