सिर्फ सीएसएस के साथ ग्रिड (ग्राफ पेपर ग्रिड की तरह) कैसे बनाएं?

सिर्फ सीएसएस के साथ ग्रिड (ग्राफ पेपर ग्रिड की तरह) कैसे बनाएं? मैं केवल सीएसएस का उपयोग कर वर्चुअल ग्रिड पेपर बनाना चाहता हूं। सहायता के लिए अग्रिम धन्यवाद। आप भी जरूरत है -सिर्फ सीएसएस के साथ ग्रिड (ग्राफ पेपर ग्रिड की तरह) कैसे बनाएं?

स्रोत

2010-08-22 Amir R.

कृपया इस संस्करण को देखने के: http://jsfiddle.net/4e5mcmk4/ यह वर्गों के लिए आकार को ठीक है। – GibboK

जब से तुम खड़े उल्लेख कागज:


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);

अंतिम पंक्ति: behavior: url(/PIE.htc); एक प्लगइन बुलाया css3pie कि यानी 6-9 मेरा मानना है के लिए समर्थन जोड़ता है। वास्तव में इस उदाहरण के लिए अपनी वेबसाइट से लिया जाता है, जहां बहुत अधिक दिलचस्प उदाहरण हैं: http://css3pie.com/demos/gradient-patterns/

स्रोत

2011-11-29 13:22:36 chacham15

आप क्या कर सकते हैं यह एक

alt text

तो सीएसएस के साथ यह टाइल

#background { 
    background: url('path/to/grid-image.png'); 
}

तो, हाँ, केवल सीएसएस नहीं की तरह एक ग्रिड छवि हड़पने है छवि, लेकिन समाधान काफी साफ होना चाहिए। कार्रवाई यहाँ में यह देखें: http://jsfiddle.net/bhVhV/

स्रोत

2010-08-22 05:06:59

स्वीकार्य विधि से अधिक - मैं अभी भी इसका उपयोग सरल के रूप में करता हूं। बस सुनिश्चित करें कि पीएनजी संकुचित हो सकता है जैसा कि हो सकता है और सब अच्छा है। उदाहरण के लिए, उपर्युक्त उत्तर एक पीएनजी फ़ाइल का उपयोग करता है जो 1 किलो है। यदि आप https://tinypng.com/ के माध्यम से फ़ाइल चलाते हैं, तो यह इसे अच्छी तरह से 109b तक घटा देता है - एक 89% बचत। – TheCarver

तकनीकी रूप से आप केवल इस सीएसएस को उपयोग कर सकते हैं: 'पृष्ठभूमि: यूआरएल ('डेटा: छवि/पीएनजी; बेस 64, [yourBase64StringHere]');' उस क्रॉस छवि की बेस 64 एन्कोडेड स्ट्रिंग के साथ '[yourBase64StringHere] 'को बदलना। – 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>

स्रोत

2014-09-07 10:44:15

हाय और एसओ में आपका स्वागत है! कृपया यह बताने के लिए कुछ पंक्तियां जोड़ने का प्रयास करें कि आपको क्यों लगता है कि आपका उत्तर मूल प्रश्न के लिए सबसे अच्छा जवाब देता है, धन्यवाद। – m4rtin

निम्नलिखित आधुनिक ब्राउज़रों पर पर्याप्त होना चाहिए ..

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

इस उत्पादन करेगा एक बिंदीदार ग्रिड ..

body { 
    background-size: 40px 40px; 
    background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); 
}

https://codepen.io/anon/pen/xdqjRZ

http://caniuse.com/#search=linear-gradient

स्रोत

2015-09-30 08:49:19 shunryu111

साफ़ और स्मार्ट, अच्छा! –

धन्यवाद! एक धराशायी/बिंदीदार ग्रिड बनाने के लिए कोई विचार? –

आसान Peasy। आसान संस्करण होना अच्छा है। – YumYumYum

सिर्फ सीएसएस के साथ ग्रिड (ग्राफ पेपर ग्रिड की तरह) कैसे बनाएं?

उत्तर

संबंधित मुद्दे