Come creare una griglia (come la griglia della carta millimetrata) con solo css? Voglio solo creare una griglia virtuale con solo CSS. Grazie in anticipo per l'aiuto.Come creare una griglia (come la griglia della carta millimetrata) con solo css?
Dal momento che lei ha citato in fila:
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);
L'ultima riga: behavior: url(/PIE.htc); è una chiamata css3pie plugin che aggiunge il supporto per IE 6-9 credo. In realtà questo esempio è tratto dal loro sito web dove ci sono molti esempi più interessanti: http://css3pie.com/demos/gradient-patterns/
Che cosa si può fare è prendere una griglia immagine come questo
poi piastrelle con i CSS
#background {
background: url('path/to/grid-image.png');
}
Quindi sì, non solo CSS - è inoltre necessario il immagine, ma la soluzione dovrebbe essere abbastanza pulita. Guardalo in azione qui: carta http://jsfiddle.net/bhVhV/
Metodo più che accettabile - lo uso ancora perché è semplice. Assicurati che il PNG sia il più compresso possibile e che tutto sia buono. Ad esempio, la risposta sopra utilizza un file PNG che è 1kb. Se si esegue il file attraverso https://tinypng.com/, si riduce facilmente a 109b - un risparmio dell'89%. – TheCarver
Tecnicamente si potrebbe fare questo css utilizzando solo: 'background: url ('dati: image/png; Base64, [yourBase64StringHere]');' Sostituzione '[yourBase64StringHere]' con una stringa codificata base64 di quell'immagine croce. – 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>
Ciao e benvenuto in SO! Prova ad aggiungere alcune righe per spiegare perché pensi che la tua risposta risponda meglio alla domanda originale, grazie. – m4rtin
il seguente dovrebbe essere abbastanza sul browser moderni ..
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
questo produrrà una griglia tratteggiata ..
body {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}
Chiaro e intelligente, bello! –
Grazie! Qualche idea per creare una griglia tratteggiata/punteggiata? –
Easy Peasy. Buono per avere una versione più semplice. – YumYumYum
Si prega di guardare questa versione: http://jsfiddle.net/4e5mcmk4/ ha fissare dimensioni per piazze. – GibboK