Skip to content

Instantly share code, notes, and snippets.

@simshaun
Created July 18, 2019 18:50
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simshaun/b93ddef48a9c5ab1b697c0ef6051eb3b to your computer and use it in GitHub Desktop.
Save simshaun/b93ddef48a9c5ab1b697c0ef6051eb3b to your computer and use it in GitHub Desktop.
Stylus browser extension stylesheet — "Checkerboard" when viewing PNGs
/*
* Stylus "Applies to" rule:
* URLs matching the regexp .*\.png
*
* Tested in Firefox and Edge Dev (Chromium)
*/
body {
background:
linear-gradient(45deg, #eee 25%, transparent 25%),
linear-gradient(-45deg, #eee 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #eee 75%),
linear-gradient(-45deg, transparent 75%, #eee 75%) !important;
background-size: 20px 20px !important;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px !important;
}
/* Firefox adds a background to the img itself: */
img.transparent {
background: transparent !important;
}
@simshaun
Copy link
Author

Note: In Edge Dev (Chromium), you may have to open Edge's Extensions page and "Allow access to file URLs" for the Stylus extension to work when viewing local PNGs.

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