¿Cómo hacer una cuadrícula (como cuadrícula de papel cuadriculado) con solo CSS? Solo quiero hacer un papel de cuadrícula virtual con solo usar CSS. Gracias de antemano por la ayuda.¿Cómo hacer una cuadrícula (como una cuadrícula de papel cuadriculado) con solo CSS?
ya que ha mencionado Alineado:
background-color: #fff;
background-size: 100% 1.2em;
background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-webkit-linear-gradient(#eee .05em, transparent .05em);
background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-moz-linear-gradient(#eee .05em, transparent .05em);
background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-ms-linear-gradient(#eee .05em, transparent .05em);
background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-o-linear-gradient(#eee .05em, transparent .05em);
background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .05em, transparent .05em);
-pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0/100% 1.2em,
linear-gradient(#eee .05em, transparent .05em) 0 0/100% 1.2em #fff;
behavior: url(/PIE.htc);
La última línea: behavior: url(/PIE.htc); es tan llamado css3pie plugin que añade soporte para IE 6-9 creo. De hecho este ejemplo se ha tomado de su página web, donde hay un montón ejemplos más interesantes: http://css3pie.com/demos/gradient-patterns/
Lo que puede hacer es tomar una imagen de la rejilla como éste
entonces baldosas con CSS
#background {
background: url('path/to/grid-image.png');
}
Así que sí, no única CSS - también necesita la imagen, pero la solución debe ser bastante limpia. Verlo en acción aquí: Papel http://jsfiddle.net/bhVhV/
Método más que aceptable: sigo usando esto ya que es simple. Solo asegúrate de que PNG esté tan comprimido como pueda y todo esté bien. Por ejemplo, la respuesta anterior usa un archivo PNG que es 1kb. Si ejecuta el archivo a través de https://tinypng.com/, lo reduce muy bien a 109b, un 89% de ahorro. – TheCarver
Técnicamente podría hacer este CSS solamente usando: 'background: url ('data: image/png; base64, [yourBase64StringHere]');' Reemplazando '[yourBase64StringHere]' con una cadena codificada en base64 de esa imagen cruzada. – adjenks
<style>
body {
background:
linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(-90deg, #aaa 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(#aaa 1px, transparent 1px),
#f2f2f2;
background-size:
4px 4px,
4px 4px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px;
}
</style>
Hola y bienvenidos a SO! Intente agregar algunas líneas para explicar por qué cree que su respuesta responde mejor a la pregunta original, gracias. – m4rtin
la siguiente debería ser suficiente en los navegadores modernos ..
body {
background-size: 40px 40px;
background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
}
http://codepen.io/anon/pen/VvPWvv
Esto producirá una cuadrícula punteada ..
body {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}
¡Claro e inteligente, agradable! –
¡Gracias! ¿Alguna idea de hacer una cuadrícula punteada/punteada? –
Easy Peasy. Es bueno tener una versión más fácil. – YumYumYum
favor, mire esta versión: http://jsfiddle.net/4e5mcmk4/ tiene fijar el tamaño de los cuadrados. – GibboK