Skip to content

Instantly share code, notes, and snippets.

@ImBobby

ImBobby/gist:5996847

Last active December 25, 2018 18:54
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ImBobby/5996847 to your computer and use it in GitHub Desktop.
Save ImBobby/5996847 to your computer and use it in GitHub Desktop.
Download ZIP
Paper style browser notepad
Raw
gistfile1.html
data:text/html, <html spellcheck="false" contenteditable> <style> html,body{min-height: 100%} body {min-height: 100%; background-color: transparent; background-image: -webkit-linear-gradient(top, #ddd 2%, transparent 2%); background-image: -moz-linear-gradient(top, #ddd 2%, transparent 2%); background-image: -o-linear-gradient(top, #ddd 2%, transparent 2%); background-image: linear-gradient(to bottom, #ddd 2%, transparent 2%); background-size: 100% 1.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #333; display: block; font: normal 1.5em 'Cambria', georgia, serif; height: 100%; line-height: 1.5em; margin: 0 auto; padding: .2em .5em; position: relative; vertical-align: bottom; width: 80%; } body:before, body:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; min-height: 100%; background: transparent; z-index: -1; } body:before{ background-image: -webkit-linear-gradient(left, #ccc 5px, transparent 5px, transparent 100%); background-image: -moz-linear-gradient(left, #ccc 5px, transparent 5px); background-image: -o-linear-gradient(left, #ccc 5px, transparent 5px); background-image: linear-gradient(to right, #ccc 5px, transparent 5px); background-size: 100% 100%; } </style> </html>
@khurshid-alam
Copy link

Wow!

@brandonkboswell
Copy link

Very, very cool.

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