Menu
How to make a grid (like graph paper grid) with just CSS? I just want to make a virtual grid paper only using CSS.
496
HTML-CSS : Exercise-28 with Solution Use background-color to set a black background. Use background-image with two radial-gradient() values to create two dots. Use background-size to specify the pattern's size. Use background-position to appropriately place the two gradients.
Set a fallback color, So if your background image is not accessible/url is wrong then the call back color will automatically display as the background. this is also good if browser doesn't support the background-image or url it will automatically assign the fallback color as background-color.
To do so go to the Style tab and scroll to the bottom of the survey preview to access the link to the HTML/CSS Editor. CSS code should be placed on the Custom CSS tab. Then, simply replace the #CCCCCC portion of the code with the hex code for the color you wish to use.
To make grids you can use CSS gradients, which work on all modern browsers (see Caniuse).
Use linear gradients to draw a lined grid:
body { background-size: 40px 40px; background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px); }Use a radial gradient to draw a grid with dotted corners:
body { background-size: 40px 40px; background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); }
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; }If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
