El fondo Hue es un concepto de una nueva metodología de diseño que se centra en una interfaz de usuario limpia y estética. Le da al sitio web un aspecto limpio y estético. Es perfecto para sitios web profesionales, como la página de inicio de algún producto o la página de inicio de alguna organización. También tiene una versión avanzada en la que el color sigue cambiando y estaremos viendo la parte avanzada solo ya que puedes hacer la básica si sabes cómo hacer el fondo avanzado.
Enfoque: el enfoque es dar un fondo degradado y hacer algunos bordes para darle un aspecto de reflejo brillante. Para conceptos avanzados, usaremos fotogramas clave para cambiar el color de fondo.
Código HTML: En esta parte, hemos creado una sección.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HUE background</title> </head> <body> <section><h1>GeeksforGeeks</h1></section> </body> </html>
Código CSS: Para CSS, siga los pasos que se indican a continuación.
- Paso 1: aplique un fondo de degradado básico usando degradado lineal
- Paso 2: ahora aplique la propiedad de animación con un identificador llamado animate
- Paso 3: ahora use fotogramas clave para rotar el tono en cualquier ángulo de su elección usando rotación de tono. Esto hará que el color cambie en cada fotograma. Hemos dividido los fotogramas en tres partes, pero puede elegir dividirlo según sus necesidades.
- Paso 4: ahora use antes del selector para crear un borde del lado izquierdo que emerge desde la parte superior.
- Paso 5: ahora use el selector posterior para crear un borde del lado derecho que emerge desde la parte superior.
Sugerencia: el paso de fotogramas clave es completamente opcional si desea un fondo básico. Los bordes que dan un efecto reflectante pueden ser de diferentes tipos. Hemos optado por utilizar los bordes que emergen de la parte superior. Puede cambiar su dirección emergente y casi todo de acuerdo con su necesidad y creatividad.
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #07f79b, #01442a);
animation: animate 20s linear infinite;
}
@keyframes animate {
0% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
100% {
filter: hue-rotate(0deg);
}
}
section::before {
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 100vh solid transparent;
border-left: 100vh solid #fff;
opacity: 0.1;
}
section::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-top: 100vh solid transparent;
border-right: 100vh solid #fff;
opacity: 0.1;
}
h1 {
position: absolute;
top: 50%;
left: 40%;
color: white;
font: 40px;
}
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>HUE background</title>
<style>
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #07f79b, #01442a);
animation: animate 20s linear infinite;
}
@keyframes animate {
0% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
100% {
filter: hue-rotate(0deg);
}
}
section::before {
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 100vh solid transparent;
border-left: 100vh solid #fff;
opacity: 0.1;
}
section::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-top: 100vh solid transparent;
border-right: 100vh solid #fff;
opacity: 0.1;
}
h1 {
position: absolute;
top: 50%;
left: 40%;
color: white;
font: 40px;
}
</style>
</head>
<body>
<section><h1>GeeksforGeeks</h1></section>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA