CSS Notepad
Using css class to generate notepad skin
#notepad { color: #555; background-color: lightyellow; font-size: 14px; padding: 0 !important; font-family: courier, monospace; border: 1px solid #dedede; transform: skewx(-7deg) translatex(12px); transform-origin: bottom left; } #notepad li { list-style: none; border-bottom: 1px dotted #ccc; text-indent: 25px; height: auto; padding: 10px; text-transform: capitalize; } #notepad li:hover { background-color: #f0f0f0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; }
Html
<body> <h4>Notes</h4> <ul id="notepad"> <li>Tom</li> <li>John</li> <li>Henry</li> </ul> </body>
No comments:
Post a Comment