Los patrones de ajedrez son simplemente ciertas posiciones tácticas que ocurren regularmente en los juegos. Se puede diseñar fácilmente usando el pseudoselector de CSS. Este tipo de patrón se puede utilizar para crear ilusiones confusas.
Enfoque: el enfoque consiste en utilizar la propiedad de degradado lineal repetido para crear un patrón que se repetirá hasta la altura y el ancho definidos.
Código HTML: En esta sección, diseñaremos la estructura básica del patrón de ajedrez.
HTML
<!DOCTYPE html> <html> <head> <title>Chess Pattern</title> </head> <body> <div class="geeks"></div> </body> </html>
Código CSS: Para CSS, siga los pasos que se indican a continuación.
- Paso 1: establezca la posición de div en fijo y aplique algo de alto y ancho.
- Paso 2: ahora use antes del selector y aplique la propiedad de gradiente lineal repetitivo con el color y el ángulo en blanco y negro establecidos en 45 grados.
- Paso 3: ahora use el selector posterior con las mismas propiedades que usó antes, simplemente cambie el ángulo a -45 grados.
- Paso 4: configure el modo de mezcla y mezcla en la diferencia para que pueda superponerse en el fondo.
Sugerencia: también puede usar 0 grados antes y 90 grados después para hacer cuadros de ajedrez cuadrados perfectos. La salida del mismo también se adjuntará a continuación.
CSS
<style>
.geeks {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.geeks::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg, #000 0, #000 40px,
#fff 40px, #fff 80px);
}
.geeks::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
-45deg, #000 0, #000 40px,
#fff 40px, #fff 80px);
mix-blend-mode: difference;
}
</style>
Código completo: (con ángulos de 45 grados y -45 grados): es la combinación de las dos secciones de código anteriores para diseñar un patrón de ajedrez.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chess Pattern</title>
</head>
<style>
.geeks {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.geeks::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg, #000 0, #000 40px,
#fff 40px, #fff 80px);
}
.geeks::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
-45deg, #000 0, #000 40px,
#fff 40px, #fff 80px);
mix-blend-mode: difference;
}
</style>
<body>
<div class="geeks"></div>
</body>
</html>
Producción:
Mientras usa ángulos como 45 y -45 grados:
Código completo: (con ángulos de 0 grados y 90 grados) Es la combinación de las dos secciones de código anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chess Pattern</title>
<style>
.geeks {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.geeks::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg, #000 0, #000 40px,
#fff 40px, #fff 80px);
}
.geeks::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
90deg, #000 0, #000 40px,
#fff 40px, #fff 80px);
mix-blend-mode: difference;
}
</style>
</head>
<body>
<div class="geeks"></div>
</body>
</html>
Mientras usa ángulos como 0 y 90 grados:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA