Baseline Grid + CSS Background
How do I make an baseline grid + css background?
Aligning a CSS background grid with the page's typographic grid.Based on http://codepen.io/jasonadelia/details/DnrAe . What is a baseline grid + css background? How do you make a baseline grid + css background? This script and codes were developed by Anand Thakker on 21 December 2022, Wednesday.
Baseline Grid + CSS Background - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Baseline Grid + CSS Background</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 0; padding: 0; background-color: #434343; line-height: 1.5;
}
#content { color: gray; background-color: black; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 49%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 51%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0)), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 51%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0)); background-position: .5em .5em; background-size: 1.5em 1.5em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="content"> Hello<br/> there.<br/> Notice that the background grid is aligned with the baseline of the text.<br/> (Of course, it's easy in this demo--the hard part is systematically styling the type in a site so that it maintains baseline.) Try this out: <a href="http://www.gridlover.net/" title="Gridlover">Gridlover</a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Baseline Grid + CSS Background - Script Codes CSS Codes
body { margin: 0; padding: 0; background-color: #434343; line-height: 1.5;
}
#content { color: gray; background-color: black; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 49%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 51%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0)), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 51%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0)); background-position: .5em .5em; background-size: 1.5em 1.5em;
}
Developer | Anand Thakker |
Username | anandthakker |
Uploaded | December 21, 2022 |
Rating | 3 |
Size | 2,507 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Experimenting with SVG Patterns | 1,783 Kb |
Simple canvas drawing -- simplified lines | 3,127 Kb |
A Pen by Anand Thakker | 1,734 Kb |
AngularJS responsive multi-range slider | 4,946 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Speech bubbles | Something | 1,547 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!