Fondos y bordes - Aprende sobre desarrollo web MDN PDF

Preview

Summary

Apuntes sacados de la pagina de Mozilla que son de los cuales se basa esta asignatura, pero en formato PDF para leer en un dispositivo sin internet...

Description

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

Fondos y bordes En este artículo, veremos algunas de las cosas creativas que puedes hacer con los fondos y los bordes de CSS. Añadir degradados, imágenes de fondo o redondear esquinas; los fondos y los bordes son la solución para una gran cantidad de cuestiones de estilo en CSS.

Prerrequisitos:

Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con el CSS).

Objetivo:

Aprender a diseñar el fondo y los bordes de las cajas.

Aplicar estilo a los fondos en CSS La propiedad background de CSS es una propiedad abreviada de una serie de propiedades de fondo que vamos a ver en este artículo. Si descubres una propiedad de fondo compleja en una hoja de estilo, puede parecer un poco difícil de entender porque pueden estarse pasando muchos valores a la vez. .box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51 url(big-star.png) center no-repeat, rebeccapurple; }

,5

Más adelante en este tutorial regresaremos a cómo funcionan las propiedades abreviadas, pero primero echemos un vistazo a las diferentes cosas que puedes hacer con los fondos en CSS, a partir de observar las propiedades de fondo individuales.

Los colores de fondo La propiedad background-color define el color de fondo de cualquier elemento en CSS. La propiedad admite cualquier válido. Un color de fondo ( background-color ) se https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

1/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

extiende por debajo del contenido y el relleno del elemento. En el ejemplo siguiente hemos utilizado varios valores de color para añadir un color de fondo a la caja, a un encabezado y a un elemento . Juega un poco con ellos; usa cualquier valor disponible.

Background Colors Try changing the background colors.

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

2/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Interactive editor .box { background-color: #567895; } h2 { background-color: black; color: white; } span { background-color: rgba(255,255,255,.5); }

Background Colors Try changing the background colors.

Res

Las imágenes de fondo La propiedad background-image permite visualizar una imagen de fondo en un elemento. En el ejemplo siguiente hay dos cajas: una tiene una imagen de fondo que es más grande que la caja misma, la otra tiene una imagen pequeña en forma de estrella. Este ejemplo demuestra dos cosas sobre las imágenes de fondo. De forma predeterminada, la imagen grande no se reduce para ajustarse a la caja, por lo que solo vemos una pequeña esquina de esta, mientras que la imagen pequeña aparece en forma de mosaico hasta llenar la caja. En este caso, la imagen es en realidad una sola estrella.

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

3/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Interactive editor .a { background-image: url(balloons.jpg); } .b { background-image: url(star.png); }



Res

Si especificas un color de fondo además de una imagen de fondo, la imagen se muestra encima del color de fondo. Añade una propiedad background-color al ejemplo anterior y obsérvalo en acción.

Controlar background-repeat La propiedad background-repeat se usa para controlar el comportamiento de tipo mosaico de las imágenes. Los valores disponibles son: no-repeat : evita que el fondo se repita. repeat-x : repite horizontalmente. repeat-y : repite verticalmente. repeat : es el valor por defecto; repite en ambas direcciones. https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

4/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Prueba estos valores en el ejemplo siguiente. Hemos establecido el valor no-repeat , así que solo verás una estrella. Prueba los diferentes valores ( repeat-x y repeat-y ) y observa cuáles son los efectos.

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

5/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Interactive editor .box { background-image: url(star.png); background-repeat: no-repeat; }

Res

Dimensionar la imagen de fondo En el ejemplo anterior hay una imagen grande que aparece recortada porque es más grande que el fondo. En este caso, podríamos usar la propiedad background-size , que puede tomar valores de longitud o porcentaje, para ajustar el tamaño de la imagen para que quepa dentro del fondo. También puedes utilizar palabras clave:

cover : el navegador agrandará la imagen lo suficientemente grande como para que esta cubra por completo el área de la caja sin que pierda su relación de aspecto. En este caso, es probable que parte de la imagen quede fuera de la caja. contain : el navegador adecuará el tamaño de la imagen para que quepa dentro de la caja. En este caso, pueden quedar huecos a ambos lados o en la parte superior e inferior de la imagen si la relación de aspecto de la imagen es diferente de la de la caja. En el ejemplo siguiente hemos usado la imagen más grande del ejemplo anterior y unidades https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

6/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

de longitud para establecer sus dimensiones dentro de la caja. Puedes ver que esto ha distorsionado la imagen. Prueba lo siguiente: Cambia las unidades de longitud que has utilizado para modificar el tamaño del fondo. Elimina las unidades de longitud y observa qué sucede cuando usas background-size: cover o background-size: contain . Si tu imagen es más pequeña que la caja, puedes cambiar el valor background-repeat para que la imagen se repita.

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

7/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Interactive editor .box { background-image: url(balloons.jpg); background-repeat: no-repeat; background-size: 100px 10em; }

Res

Posicionar la imagen de fondo La propiedad background-position te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es (0,0) , y la caja se coloca sobre los ejes horizontal ( x ) y vertical ( y ).

Nota: El valor predeterminado de background-position es (0,0) .

Los valores de background-position más comunes toman dos valores independientes: un valor horizontal seguido de un valor vertical. Puedes usar palabras clave como top y right (busca todas las demás en la página sobre la propiedad background-position ): .box { background-image: url(star.png); https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

8/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

background-repeat: no-repeat; background-position: top center; } Y también longitudes y porcentajes: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; } También puedes mezclar valores de palabras clave con longitudes o porcentajes, por ejemplo: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; } Por último, también puedes usar una sintaxis de 4 valores para indicar una distancia desde ciertos bordes del cuadro: la unidad de longitud en este caso es un desplazamiento del valor que la precede. Entonces, en el CSS siguiente, colocamos el fondo a 20 px desde la parte superior y a 10 px desde la derecha: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; } Utiliza el ejemplo siguiente para jugar con estos valores y mover la estrella por la caja.

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

9/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Interactive editor .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 120px 1em; }

Reset

Nota: background-position es una propiedad abreviada de background-position-x (en-US) y background-position-y (en-US), que te permiten configurar los diferentes valores de posición del eje por separado.

Degradados de fondo Un degradado, cuando se usa para un fondo, actúa como una imagen y también se establece usando la propiedad background-image . Puedes leer más sobre los diferentes tipos de degradados y sobre qué puedes hacer con ellos en la página sobre el tipo de datos de MDN. Una forma divertida de jugar con degradados es usar uno de los muchos generadores de degradados CSS que hay disponibles en la web, como este . Puedes crear un degradado y luego copiar y pegar el código fuente que lo genera. Prueba algunos degradados diferentes en el ejemplo siguiente. En las dos cajas hay, respectivamente, un degradado lineal que se extiende por toda la caja, y un degradado radial https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

10/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

con un tamaño establecido, que por lo tanto se repite.

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

11/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Interactive editor .a { background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); } .b { background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); background-size: 100px 50px; }



Reset

Múltiples imágenes de fondo También es posible poner múltiples imágenes de fondo: puedes especificar múltiples valores background-image para un solo atributo, separados cada uno por una coma. Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los fondos se superponen con la última imagen de fondo que hay en la parte inferior de la lista, y cada imagen anterior se apila encima de la que sigue en el código.

Nota: Los degradados se pueden mezclar con imágenes de fondo normales.

Las otras propiedades background-* también pueden tener valores múltiples separados por comas, de la misma manera que background-image : background-image: url(image1.png), url(image2.png), url(image3.png), url(ima background-repeat: no-repeat, repeat-x, repeat; https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

12/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

background-position: 10px 20px,

top right;

Cada valor de las diversas propiedades coincide con los valores que están en la misma posición en las otras propiedades. Arriba, por ejemplo, el valor para la propiedad background-repeat de image1 será no-repeat . Sin embargo, ¿qué sucede cuando diferentes propiedades tienen una cantidad diferente de valores? La respuesta es que los valores que ocupan las posiciones más pequeñas se alternan cíclicamente: en el ejemplo anterior hay cuatro imágenes de fondo pero solo dos valores background-position . Los primeros dos valores de posición se aplicarán a las dos primeras imágenes, luego los valores volverán a asignarse cíclicamente: a image3 se le dará el primer valor de posición, y a image4 se le dará el segundo valor de posición. Vamos a jugar. En el ejemplo siguiente hemos incluido dos imágenes. Para demostrar el orden de superposición, cambia la imagen de fondo que aparece primero en la lista. O juega con las otras propiedades para cambiar la posición, el tamaño o repite los valores.

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

13/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Interactive editor .box { background-image: url(star.png), url(big-star.png); }



Res

Anclaje del fondo Otra opción que hay disponible para fondos es especificar cómo se desplazan cuando se desplaza el contenido. Esto se controla con la propiedad background-attachment , que puede tomar los valores siguientes: scroll : Hace que el fondo del elemento se desplace cuando te desplazas por el contenido de la página. Si te desplazas por el contenido del elemento, el fondo no se mueve. El efecto resultante es que el fondo está anclado a la página en una posición fija, por lo que se desplaza a medida que la página se desplaza. fixed : Hace que el fondo de un elemento quede fijo con respecto a la ventana gráfica, de modo que no se desplace cuando te desplazas por la página o el contenido del elemento. Siempre permanece en la misma posición de la pantalla. local : Este valor se añadió posteriormente (solo es compatible con Internet Explorer 9+, mientras que los otros son compatibles con IE4+) porque el valor scroll es https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

14/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

bastante confuso y en muchos casos no hace lo que deseas. El valor local ancla el fondo al elemento en el que está configurado, de modo que cuando te desplazas por el contenido del elemento, el fondo se desplaza con este. La propiedad background-attachment solo tiene efecto cuando hay contenido por el que puedas desplazarte, por lo que hemos preparado un ejemplo para demostrar las diferencias entre los tres valores: echa un vistazo a background-attachment.html (También puedes consultar el código fuente aquí).

Usar la propiedad abreviada para el fondo Como mencionamos al comienzo de este artículo, a menudo verás fondos que están especificados usando la propiedad background . Esta forma abreviada te permite configurar todas las diferentes propiedades a la vez. Si utilizas varios fondos, debes especificar todas las propiedades para el primer fondo y luego añadir el fondo siguiente separado por una coma. En el ejemplo siguiente hay un degradado con un tamaño y una posición, luego un fondo de imagen con no-repeat y una posición y, por último, un color. Al escribir los valores abreviados de las imágenes de fondo es necesario seguir algunas reglas, por ejemplo: Solo es posible especificar un color de fondo ( background-color ) después de la coma final. El valor para background-size solo puede incluirse inmediatamente después de background-position , separado con el carácter '/', así: center/80% . Consulta la página para el atributo background de MDN para ver todas las posibilidades.

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

15/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Interactive editor .box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; }

Reset

Consideraciones de accesibilidad con los fondos Al colocar texto sobre una imagen o un color de fondo, debes asegurarte de que tiene suficiente contraste para que tus visitantes puedan leer el texto. Si estableces una imagen de fondo y el texto se coloca encima de la imagen, también debes especificar un color de fondo ( background-color ) que permita leer el texto si la imagen no se carga. Los lectores de pantalla no pueden analizar las imágenes de fondo, por lo tanto, deben ser puramente decorativas; cualquier contenido importante debe ser parte de la página HTML y no debe estar contenido en un fondo.

Bordes Al aprender sobre el modelo de cajas descubrimos cómo los bordes afectan al tamaño de nuestra caja. En este artículo veremos cómo usar los bordes de una manera creativa. Por lo general, cuando a un elemento le añadimos bordes con CSS, usamos una propiedad abreviada que establece el color, el ancho y el estilo del borde en una línea de CSS. https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

16/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Podemos establecer un borde para los cuatro lados de una caja con border : .box { border: 1px solid black; } O podemos establecer solo un borde de la caja, por ejemplo: .box { border-top: 1px solid black; } Cada una de las propiedades de estas propiedades abreviadas sería: .box { border-width: 1px; border-style: solid; border-color: black; } Y las no abreviadas: .box { border-top-width: 1px; border-top-style: solid; border-top-color: black; }

Nota: Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades lógicas asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el uso de diferentes direcciones de texto.

Hay una variedad de estilos que puedes usar para los bordes. En el ejemplo siguiente, hemos utilizado un estilo de borde diferente para los cuatro lados de la caja. Juega con el estilo, el ancho y el color del borde para ver cómo funcionan los bordes.

Borders https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

17/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

Try changing the borders.

Interactive editor .box { background-color: #567895; border: 5px solid #0b385f; border-bottom-style: dashed; color: #fff; } h2 { border-top: 2px dotted rebeccapurple; border-bottom: 1em double rgb(24, 163, 78); }

Borders Try changing the borders.

Reset

Esquinas redondeadas El redondeo de esquinas en una caja se logra mediante el uso de la propiedad border-radius (en-US) y otras propiedades asociadas que se relacionan con cada esquina de la caja. Como valor pueden usarse dos longitudes o porcentajes: el primer valor define el radio horizontal y el segundo el radio vertical. En muchos casos, solo se pondrá un valor, que se utilizará para ambos. Por ejemplo, para hacer que las cuatro esquinas de una caja tengan un radio de 10 píxeles: .box { border-radius: 10px; } https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

18/21

17/2/22, 22:01

Fondos y bordes - Aprende sobre desarrollo web | MDN

O para hacer que la esquina superior derecha tenga un radio horizontal de 1 em y un radio vertical del 10%: .box { border-top-right-radius: 1em 10%; } En el ejemplo siguiente hemos establecido las cuatro esquinas, y luego cambiamos los valores de la esquina superior derecha para que sea diferente. Juega con los valo...