Skip to content

Instantly share code, notes, and snippets.

@khurshid-alam

khurshid-alam/browser-notepad

Forked from ImBobby/gist:5996847
Last active December 19, 2015 19:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save khurshid-alam/6009761 to your computer and use it in GitHub Desktop.
Save khurshid-alam/6009761 to your computer and use it in GitHub Desktop.
Download ZIP
Browser-Notepad
Raw
browser-notepad
# paste this in url
# https://coderwall.com/p/lhsrcq
# Plain-paper style
data:text/html, <html contenteditable>
# Ruled Paper Style
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment