Clever Geek Handbook

CSS y múltiples fondos

La propiedad CSS backgroundes una de las propiedades más utilizadas. Pero la comunidad de desarrollo web aún no es muy consciente de las posibilidades que brindan los múltiples orígenes. Aquí, voy a hablar seriamente sobre lo que pueden hacer múltiples fondos y cómo usar los mecanismos CSS estándar al máximo.



En este artículo, hablaré sobre la propiedad en detalle background-image, daré ejemplos ilustrativos de cómo compartir múltiples imágenes de fondo de un elemento y consideraré los puntos fuertes de este enfoque. Habrá muchas ilustraciones aquí. Si no está familiarizado con la propiedad CSS , será bueno que, antes de leer el material, eche un vistazo a esta página de documentación de MDN dedicada a esta propiedad.







background



Introducción



Una propiedad CSS backgroundes una propiedad abreviada que le permite establecer las siguientes propiedades de elementos comunes:



  • clip de fondo
  • color de fondo
  • imagen de fondo
  • origen de fondo
  • posición de fondo
  • repetición de fondo
  • tamaño de fondo
  • adjunto de fondo


Aquí nos centraremos en las propiedades background-image, background-positiony background-size.



Considere el siguiente ejemplo: 



.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
}


La posición inicial de la imagen de fondo está en la esquina superior izquierda del elemento. El tamaño de la imagen es 50px * 50px. Al configurar una propiedad, backgroundes importante recordar el orden de las propiedades que definen la posición y el tamaño de la imagen de fondo.





Ruta, posición y tamaño de la imagen



En la figura anterior, los valores relacionados con la configuración de una propiedadbackground-positionvan seguidos de los valores de propiedadbackground-size. Si ponemos estos valores en un orden diferente, terminamos con CSS con estilo incorrecto. Por ejemplo, así: 



.element {
  /* :  CSS */
  background: url(cool.jpg) 50px 50px/top left no-repeat;
}


Posición de la imagen de fondo



Para establecer el área del fondo, la posición original de la imagen de fondo, use la propiedad background-origin. Me encanta la flexibilidad que ofrece la propiedad background-position. Te permite colocar el fondo de los elementos de diferentes formas:



  • Palabras clave ( top, right, bottom, left, center).
  • Valores porcentuales. Por ejemplo: 50%.
  • Valores que especifican determinadas distancias. Por ejemplo: 20px 2.5rem.
  • Valores que representan el relleno de los bordes del elemento. Por ejemplo: top 20px left 10px.




Sistema de coordenadas El origen del



sistema de coordenadas utilizado al colocar imágenes de fondo se encuentra en la esquina superior izquierda del elemento. El valor inicial de la propiedadbackground-positiones0% 0%.



Vale la pena señalar que valortop leftes lo mismo que valorleft top. El navegador es lo suficientemente inteligente como para averiguar cuánto de este valor está en el eje X y cuánto en el eje Y.





La parte superior izquierda y la parte superior izquierda son iguales. 



.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
  /*  -   ,    */
  background: url(cool.jpg) left top/50px 50px no-repeat;
}


Tamaño de la imagen de fondo



El nombre de la propiedad que define el tamaño de la imagen de fondo background-sizeindica de forma única el rol de esta propiedad. El tamaño de una imagen de fondo es su ancho y alto. Al establecer esta propiedad, tenga en cuenta que el primer valor es el ancho y el segundo es el alto.





El ancho es lo primero, luego el alto.



Si el ancho y el alto de la imagen de fondo son iguales, esto significa que no es necesario especificar dos valores parabackground-size. En tal situación, un valor es suficiente.



Aquí, por cierto, sería útil mencionar que la especificación CSS dice lo siguiente sobre esto: "Si solo se especifica un valor, entonces se asume que el segundo valor es automático". Pero este mecanismo no está implementado en los navegadores, aunque esto puede cambiar en el futuro. Agradezco a Ilya Streltsyn por llamar mi atención sobre este detalle.





Un solo valor establece tanto el ancho como el alto



Ahora que hemos cubierto los conceptos básicos del uso de una propiedadbackground, hablemos sobre cómo trabajar con múltiples fondos.



Fondo múltiple



Una propiedad backgroundpuede describir una capa de fondo, hasta ahora hemos visto estas descripciones, o varias capas, cuyas propiedades están separadas por una coma. Si varias imágenes de fondo tienen el mismo tamaño, una de ellas se superpone completamente a las demás. 



.element {
  background: url(cool.jpg) top left/50px 50px no-repeat,
    url(cool.jpg) center/50px 50px no-repeat;
}






Uso de varias imágenes de fondo



En la ilustración anterior, un elemento tiene dos capas de imágenes de fondo. Cada una de estas imágenes se coloca de manera diferente. Este es el ejemplo más simple de usar múltiples fondos. Ahora veamos un ejemplo más avanzado.



Orden de apilamiento de imágenes de fondo una encima de la otra



Cuando equipa un elemento con varias imágenes de fondo, si una de ellas ocupa todo el ancho y alto del elemento principal, el orden en el que se apilan los fondos se vuelve importante. Decidir en qué orden se apilan los fondos uno encima del otro puede ser complicado. Considere el siguiente ejemplo. 



.hero {
  min-height: 350px;
  background: url('table.jpg') center/cover no-repeat,
    url('konafa.svg') center/50px no-repeat; 
}


Aquí tenemos una imagen de tabla ( table.jpg) y una imagen de placa ( konafa.svg). ¿Cuál de estas imágenes de fondo crees que se mostrará primero? ¿Una imagen de una mesa o una imagen de un plato?





Elemento con dos imágenes de fondo La



respuesta correcta a esta pregunta es tener primero la imagen de la mesa. En CSS, el fondo descrito primero se superpone al segundo fondo, el segundo fondo se superpone al tercero y así sucesivamente. Cambiar el orden de descripción de los fondos afecta su visualización en el elemento. 



.hero {
  background: url('konafa.svg') center/50px no-repeat,
  url('table.jpg') center/cover no-repeat;
}






El primer fondo se superpone al segundo.



Como puede ver, el fondo especificado por el primero está por encima del fondo especificado por el segundo.



Colores sólidos



Supongamos que queremos crear un fondo sólido utilizando las herramientas de fondo CSS para un elemento. ¿Cómo hacerlo? Esto es, gracias a CSS Gradients, una tarea fácil. El punto es que si usa una función linear-gradientcon los mismos colores de parada, resultará en un color sólido. 



.hero {
  background: linear-gradient(#3c88Ec, #3c88Ec)
}




Fondo creado con



degradado lineal y los mismos colores de parada Aquí hay un ejemplo simple de cómo usar un degradado para configurar un fondo, pero los degradados se pueden usar para crear efectos muy interesantes y útiles.



Casos de uso y ejemplos prácticos



▍Imagen de fondo oscuro



A menudo, para que el texto de la sección superior de una página sea más fácil de leer, la imagen de fondo de esa sección debe oscurecerse. Es fácil hacer esto con dos imágenes de fondo. 



.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    url("landscape.jpg") center/cover;
}




Imagen de fondo oscurecida



Más interesante aún, se puede utilizar el mismo método para teñir la imagen de fondo de los elementos. 



.hero {
  background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
    url("landscape.jpg") center/cover;
}




Fondo tintado



▍Dibujar con CSS



Las posibilidades de usar gradientes CSS para pintar son realmente infinitas. En particular, estamos hablando de los gradientes descritos usando funciones linear-gradient, radial-gradienty otros. En este ejemplo simple, descubriremos cómo dibujar una computadora portátil usando gradientes.





Imagen de la computadora portátil



Desarmemos esta imagen y pensemos en los gradientes que necesitamos.





Marco de pantalla de plástico, pantalla LCD, reflejo, bordes redondeados de la carcasa, carcasa



Tenga en cuenta que cuando se "desmonta" la computadora portátil, es mucho más fácil averiguar qué degradados se necesitan para dibujar utilizando la técnica de aplicar fondos múltiples. Es posible que haya notado que utilicé un par de círculos para actuar como las esquinas redondeadas de la carcasa del portátil. El caso es que no existe una forma estándar de crear degradados con esquinas redondeadas.



Ahora comencemos a dibujar. Primero, definamos cada uno de los degradados como una variable CSS y dimensionemos los elementos correspondientes. Me gusta usar variables CSS porque puede reducir la complejidad del código, hacer que el código sea más limpio y más fácil de leer. Una vez descritos los degradados, puede continuar colocándolos. 



:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
}


Entonces, hemos descrito los gradientes y establecido sus tamaños. Ahora pensemos en su posicionamiento. La solución a este problema se verá facilitada por el diagrama esquemático de la computadora portátil a continuación.





Ilustración esquemática de una computadora portátil



Implementación del reflejo de la luz desde el marco de la pantalla del portátil.



Como ya se mencionó, la capa de fondo, que debe colocarse sobre todas las demás capas, debe definirse primero. En nuestro caso, el primer degradado será el que simule el reflejo de la luz del marco de la pantalla del portátil.





Reflexión de la luz del marco de la pantalla del portátil



pantalla LCD



La pantalla del portátil está alineada con el centro del eje X y el eje Y está desplazado en 6píxeles desde el origen.





Pantalla de portátil



Marco de pantalla



El marco está debajo de la pantalla, está centrado en el eje X y en el eje Y está desplazado 0pxdel origen.





Marco de pantalla



Maleta para computador portátil



Y este es el elemento más interesante. Para empezar, debe tener en cuenta que el elemento que representa la carcasa del portátil es un rectángulo y el hecho de que la carcasa tiene bordes redondeados. Esto se logra usando un par de círculos.





Maleta para computador portátil



Dibujo terminado



:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;
  --case-pos: center 0;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;
  --display-pos: center 6px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;
  --reflection-pos: top right;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;
  --body-pos: center bottom;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
  --circle-left-pos: left bottom;
  --circle-right-pos: right bottom;
}

.cool {
  width: 190px;
  height: 112px;

  background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body);

  background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);

  background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos);

  background-repeat: no-repeat;

  /*outline: solid 1px;*/
}


Aquí hay un proyecto de CodePen con el que puede experimentar.



▍ Mezcla de múltiples fondos



La capacidad de utilizar diferentes modos de mezclar fondos, superpuestos entre sí, abre un amplio margen para lograr varios efectos. La forma más sencilla de utilizar esta técnica es desaturar imágenes. Imagine que tiene una imagen de fondo en color en CSS que desea desaturar, en blanco y negro.





Imagen en color y capa auxiliar negra



Observe que el siguiente fragmento de CSS usa la propiedadbackground-blend-mode: color. Es esto lo que le permite lograr el efecto deseado. 



.hero {
  background: linear-gradient(#000, #000),
  url("landscape.jpg") center/cover;
  background-blend-mode: color;
}




Imagen desaturada



¿Utiliza varios fondos en CSS?





More articles:


All Articles