Share
¿Qué sucede cuando su área de contenido principal necesita dos colores de fondo específicos: uno para el contenido principal y otro para la barra lateral? Si alguna vez ha intentado aplicar el fondo a cada contenedor, sin duda se habrá dado cuenta de que su diseño se fragmenta rápidamente tan pronto como, por ejemplo, la sección de contenido principal supera la altura de la barra lateral..
En general, la solución es establecer una imagen de fondo en el elemento principal y configurarla para que se repita verticalmente. Sin embargo, si somos inteligentes con los gradientes de CSS3, podemos lograr el mismo efecto con cero imágenes. ¡La ironía de esto es que estamos usando gradientes CSS3 para crear un efecto que no contiene un gradiente! Sigue leyendo para saber más..
Empecemos por construir un diseño ridículamente simple. De esa manera, podemos demostrar un problema de diseño común que todos hemos experimentado en un momento u otro.
Cree un nuevo documento HTML y agregue lo siguiente a su cuerpo etiqueta:
Mi cabecera
Contenido primario.
No olvides que puedes usar el
cuerpoElemento como envoltorio para su diseño. Simplemente establece unanchuradirectamente a lacuerpo.
Lo que tenemos aquí es bastante común. UNA encabezamiento el elemento contiene una etiqueta de encabezado; y luego tenemos un principal div, que alberga el contenido primario, así como el barra lateral.
A continuación, vamos a diseñar un poco este diseño. Como estamos usando el cuerpo elemento como nuestra envoltura, de tipo, vamos a establecer una anchura y color de fondo.
cuerpo ancho: 700px; margen: auto; fondo: # e3e3e3;
Ahora, vamos a flotar el contenido primario y el barra lateral a la izquierda y derecha, respectivamente. Además, como no estamos trabajando con ningún contenido real, estableceremos una altura para cada contenedor para presentar la ilusión de contenido. Esto en sí no será suficiente; También debemos especificar con precisión qué tan ancho debe ser cada uno. De lo contrario, ocuparán todo el espacio disponible, debido a su bloquear naturaleza.
#primary float: left; ancho: 75%; altura: 500px; fondo: rojo; aparte display: block; / * Porque es elemento HTML5 * / float: derecha; ancho: 25%; altura: 500px; fondo: verde
Por lo tanto, todo esto se ve bien, por ahora. Sin embargo, los problemas surgen tan pronto como la altura del contenido primario excede la altura de la barra lateral. Además, este será típicamente el caso en la mayoría de las situaciones.
Para simular el contenido agregado, vamos a aumentar la altura de la #primario div ser 700px.
Normalmente, la solución a estos tipos de dilemas es aplicar una imagen de fondo al padre (#principal) elemento. Esto generalmente será una pequeña porción del fondo, que luego se repetirá verticalmente.
#main … background: url (small / slice / of / background.png) repeat-y;
¡Problema resuelto! Bueno no exactamente. Es cierto que esto funciona, sin embargo, tan pronto como decide cambiar un color de fondo, se ve obligado a volver a Photoshop para crear una nueva imagen de fondo. Qué lata!
Otra solución común es usar JavaScript para detectar dinámicamente el ancho de cada contenedor y luego hacer que tengan la misma altura. Tenga en cuenta que esto requiere que su diseño dependa de la habilitación de JS.
Si queremos ser pensadores avanzados, podemos usar los gradientes de CSS3 para lograr este efecto. ¿Qué es lo que dices? "Pero Jeff, estos son colores sólidos, no gradientes!" Es cierto, pero te mostraré un pequeño truco que aprendí. Si creas dos paradas en la misma ubicación en un gradiente CSS3, terminarás con dos colores sólidos. Eso es un poco confuso; dejame demostrar.
Antes de continuar, si está trabajando, vuelva a su proyecto y elimine los colores de fondo. Ya no son necesarios. Ahora, agregaremos un gradiente de fondo al padre, #principal, contenedor en su lugar.
#main background: -moz-linear-gradient (left, red, green);
Entonces, eso es probablemente lo que estabas esperando. Pero, ¿cómo nos ayudará eso? Necesitamos una clara separación entre el contenido primario y el barra lateral.
Esta vez, vamos a especificar que tanto el rojo como el verde paradas de color Debe colocarse en el marcador del 75%.
#main fondo: -moz-lineal-gradiente (izquierda, rojo 75%, verde 75%);
¿No es eso increíble? No solo estamos usando un degradado para crear colores sólidos, irónicamente, sino que también las alturas de cada contenedor infantil son ahora idénticas.
Tenga en cuenta que esto no es del todo exacto. Tienen la ilusión de ser la misma altura. En verdad, sin embargo, solo estamos aplicando un fondo al elemento padre. los barra lateral es aún más corto; simplemente no puedes decir.
El último paso es hacer felices a los navegadores Webkit (Safari y Chrome). Desafortunadamente, no están del todo de acuerdo con Mozilla en la sintaxis correcta para crear gradientes. Su método no es tan sucinto como el de Mozilla..
#main fondo: -moz-lineal-gradiente (izquierda, rojo 75%, verde 75%); fondo: -webkit-gradiente (lineal, arriba a la izquierda, arriba a la derecha, desde (rojo), color-stop (.75, rojo), color-stop (.75, verde));
Si estás acostumbrado a la
desde()ya()funciones, tenga en cuenta que son simplemente funciones auxiliares, que se dirigen aparada de color ().
parada de color acepta dos parámetros:
Para aclarar, parada de color (.75, verde) significa, "al 75% del ancho del elemento, el color ahora debe ser verde". Así que sí, la sintaxis es diferente, pero solo toma unos segundos convertir.
¡Eso es todo al respecto! Por favor, recuerde que estas son técnicas CSS3, lo que significa que IE se queda afuera en el frío. Sin embargo, tenga en cuenta que "no todos los sitios web deben ser idénticos en todos los navegadores".
¿Qué piensas? ¿Utilizará este método, sabiendo que tendrá que proporcionar un color alternativo para IE, o recurrirá al uso de sentencias condicionales para usar una imagen alternativa??
Accentsconagua