Last Updated: February 25, 2016

Bookmark Original Browser Notepad

I got really inspired by Jose's post. Thanks.
I have customised them so that it looks readable and enjoyable.

This is a simple browser notepad.

Type below texts in your browser's url then add it to bookmarks.
Now you can enjoy your browser notepad. I've customised below codes
so that it is more readable than original one.

data:text/html, <html contenteditable><style>body{border:1px dashed #fff;background-color:rgba(51, 63, 77, 1);color:#fff;font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;margin:50px 100px;padding:2%;}</style>

===

I have set background image.

data:text/html, <html contenteditable><style>body{border-radius:8px;background-size:cover;background-image:url("http://www.blueskyexhibits.com/website/wp-content/uploads/sky-home.jpg");border:3px dashed #fff;background-color:rgba(51, 63, 77, 1);color:#fff;font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;margin:50px 100px;padding:2%;}</style>

Screen Shot 2014-07-08 at 8.11.03 AM.png

===

You can add slideshows with animation property.

data:text/html, <html contenteditable>
<style>body{background-size:cover;border-radius:8px;border:3px dashed #fff;background-color:rgba(51, 63, 77, 1);color:#fff;font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;margin:50px 100px;padding:2%;-webkit-animation: changeBackground 15s ease-in-out 0 infinite alternate;-moz-animation: changeBackground 15s ease-in-out 0 infinite alternate;-o-animation: changeBackground 24s ease-in-out 0 infinite alternate;animation: changeBackground 15s ease-in-out 0 infinite alternate;}@-webkit-keyframes changeBackground {
  from { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32294.jpg');}
  20% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M31819.jpg');}
  50% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32847.jpg');}
  70% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M33038.jpg');}
  to { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32337.jpg')}
}
@-moz-keyframes changeBackground {
  from { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32294.jpg');}
  20% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M31819.jpg');}
  50% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32847.jpg');}
  70% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M33038.jpg');}
  to { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32337.jpg')}
}
@-o-keyframes changeBackground {
  from { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32294.jpg');}
  20% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M31819.jpg');}
  50% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32847.jpg');}
  70% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M33038.jpg');}
  to { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32337.jpg')}
}
@keyframes changeBackground {
  from { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32294.jpg');}
  20% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M31819.jpg');}
  50% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32847.jpg');}
  70% { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M33038.jpg');}
  to { background-image:url('http://www.beiz.jp/web/photos_M/sea-ocean/sea-ocean_beiz.jp_M32337.jpg')}
}
</style>

Screen Shot 2014-07-08 at 8.32.10 AM.png