Instantly share code, notes, and snippets.

@leshido leshido/baseline.css
Created Feb 22, 2017

Embed
What would you like to do?
A quick baseline grid overlay using css+svg. Inspired by [Basehold.it](https://basehold.it/).
/**
* A quick baseline grid overlay using css+svg.
* Inspired by [Basehold.it](https://basehold.it/).
* @author leshido
*/
body {
position: relative;
}
body::after {
/* Change the `height` parameter here to match your base line-height. */
background: url('data:image/svg+xml;utf8,<svg height="27" width="1" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="0.5" style="fill:rgba(0, 255, 255, 0.3)" /></svg>') repeat top left;
content: "";
display: block;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
position: absolute;
}
body:active::after {
display: none;
}
@SarikaWirtz

This comment has been minimized.

Copy link

SarikaWirtz commented Oct 10, 2018

its amazing ..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment