Crear degradado de imagen de fondo con CSS
- Crear degradado de imagen de fondo con CSS
- Keynotes para hacer legible la imagen de fondo
- Conclusión
Un degradado de imagen de fondo es una transición gradual de un color a otro. Los degradados de la imagen de fondo se pueden crear usando una variedad de colores, pero normalmente son más efectivos cuando usan una paleta de colores limitada.
Este artículo nos enseñará cómo crear un degradado de imagen de fondo con CSS.
Crear degradado de imagen de fondo con CSS
Los degradados de imagen de fondo se pueden crear utilizando una variedad de tipos de paletas de colores, incluidos colores monocromáticos, complementarios y análogos. También puede crear un degradado utilizando los dos colores que elija.
En el siguiente ejemplo, tenemos un degradado de claro a oscuro que comienza en la parte superior de la página. Esto crea una forma sutil y efectiva de agregar algo de interés visual a su sitio.
Código:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
Keynotes para hacer legible la imagen de fondo
Puede hacer algunas cosas para crear una imagen de fondo más legible.
- Usa un color de fondo claro o neutro. Esto hará que el texto de la imagen sea más visible.
- Utilice un color de texto oscuro sobre un fondo claro o un color de texto claro sobre un fondo oscuro. Esto hará que el texto sea más fácil de leer.
- Aumente el contraste entre el texto y el fondo. Esto hace que el texto se destaque mejor y sea más fácil de leer.
Conclusión
Hay algunas formas diferentes de usar los degradados de la imagen de fondo. Una forma es agregar una superposición de degradado a su imagen de fondo.
Otra forma de usar degradados de imagen de fondo es crear una máscara de degradado. Este método más avanzado puede ser muy efectivo si se hace correctamente.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn