Fondo a cuadros usando dos líneas de código en CSS

Fondo a cuadros usando dos líneas de código en CSS — Amit Merchant — Un blog sobre PHP, JavaScript, etc.

Tengo una larga lista de blogs personales que mantengo en mi lector de RSS. Y uno de los blogs en esta lista es Digital Garden de Rach Smith.

Llevo un tiempo siguiendo su blog y me encanta como escribe. Tiene un estilo de escritura muy particular y sus artículos siempre son muy esclarecedores.

Pero una cosa que no pude superar fue su pasado como blogger. Era un sutil fondo a cuadros y siempre me pregunté si tal vez era un truco de SVG o algo así. Pero estaba equivocado.

Jardín digital de Rach Smith

Después de investigar un poco, descubrí que era solo un simple truco de CSS que usó para crear el fondo a cuadros. Y pensé que sería una buena idea compartirlo contigo también.

Así es como puedes crear un fondo de tablero de ajedrez usando solo dos líneas de código CSS.

body {
  background-image: linear-gradient(#727272 1.1px,transparent 1.1px),linear-gradient(to right,#444444 1.1px,#fffbdd 1.1px);
  background-size: 22px 22px;
}

Como puedes ver, este truco consiste en el uso de linear-gradient Y background-size propiedades. Los dos degradados lineales aquí están configurados para crear un patrón de tablero de ajedrez.

Puede jugar con los colores de los degradados para crear un patrón de cuadros de su elección.

EL background-size La propiedad se utiliza para ajustar el tamaño de un cuadrado en el patrón de tablero de ajedrez. Entonces, si desea aumentar el tamaño del cuadrado, puede aumentar el valor de la background-size propiedad.

Si quieres conocer otros artículos parecidos a Fondo a cuadros usando dos líneas de código en CSS puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas