CSS – Fondo de puntos pixelados CSS3

Este artículo ha sido evaluado por nuestros expertos así aseguramos la exactitud de nuestra esta noticia.

Solución:

Del comentario de Thirtydot en la primera publicación. Debería haberlo publicado como respuesta: brillante. Casi me lo pierdo. Califique su comentario 🙂 Solo estoy publicando esto como una respuesta para que pueda ayudar a otros como me ayudó a mí.

Usando un mensaje codificado en base64:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);

http://jsfiddle.net/thirtydot/v7T98/3/

Aquí está lo mejor que pude encontrar para que coincida con su imagen. Está adaptado del ejemplo aquí por Lea Verou. ¿Cuál será su alternativa para los navegadores que no sean css3?

body 
    background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(45deg, transparent 75%, #666 75%), 
        -moz-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
    background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(45deg, transparent 75%, #666 75%), 
        -webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(45deg, transparent 75%, #666 75%), 
        -o-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: linear-gradient(45deg, #666 25%, transparent 25%), 
        linear-gradient(-45deg, #666 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #666 75%), 
        linear-gradient(-45deg, transparent 75%, #666 75%);
    -moz-background-size: 2px 2px;
    background-size: 2px 2px;
    -webkit-background-size: 2px 2.1px; /* override value for webkit */
    background-position: 0 0, 1px 0, 1px -1px, 0px 1px;

ejemplo de jsfiddle

El “parpadeo” que observa no es un problema de software, sino de hardware. Básicamente, se debe al hecho de que los píxeles de la pantalla no pueden cambiar de color al instante. Dado que su fondo punteado consta de filas alternas de píxeles, cada vez que se desplaza hacia abajo un número impar de píxeles, habrá un breve momento en el que la pantalla cambie entre dos copias desplazadas del patrón, y esto aparecerá como parpadeo.

Este hilo en Graphic Design Stack Exchange presenta un ejemplo aún más dramático del mismo efecto y también explica por qué ocurre con más detalle. Solo para una demostración rápida, permítame tomar prestada una de las imágenes de la respuesta de Volker Siegel:

Observe cómo, en la mayoría de las pantallas, esta imagen mostrará un efecto de “pulsación” notable cuando se desplaza. (También puede parecer que parpadea un poco incluso con solo mirarlo, simplemente porque los fotorreceptores en sus ojos también tienen algunos efectos de retardo de respuesta y adaptación).

De todos modos, la única forma de evitar que el fondo punteado parpadee mientras se desplaza es haz que no se desplace. Afortunadamente, hay una propiedad CSS solo para eso:

background-attachment: fixed;

Aparte de eso, no hay mucho más que eso. Es casi seguro que la mejor manera de renderizar el fondo sea con una imagen PNG simple de dos colores. Incluso puede hacer que la imagen sea semitransparente, de modo que pueda colocarla encima de fondos de diferentes colores. Consulte el fragmento a continuación para ver una demostración:

body 
  background-color: white;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8lyQAAAABJRU5ErkJggg==);
  background-attachment: fixed;

blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah
blah

Observe cómo el patrón no parpadea cuando lo desplaza con la barra de desplazamiento interior. (Eso lo hace parpadean cuando se desplaza por toda la página SO, porque el patrón se adjunta a la