CSS3 dry-erase clipboard
How do I make an css3 dry-erase clipboard?
Just playing around with gradients and box shadows.. What is a css3 dry-erase clipboard? How do you make a css3 dry-erase clipboard? This script and codes were developed by John Stammerman on 23 July 2022, Saturday.
CSS3 dry-erase clipboard - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 dry-erase clipboard</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> Team Goals: <ol> <li> win the game </li> <li> score more points </li> <li> go to Disney World </li> </ol>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
CSS3 dry-erase clipboard - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);
body { background: #333 url(/images/classy_fabric.png);
}
div { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); background: -moz-linear-gradient(#ffffff, #dddddd); background: -webkit-linear-gradient(#ffffff, #dddddd); background: linear-gradient(#ffffff, #dddddd); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: inset 0 0 0 4px #ddd, inset 0 0 0 8px #eee, 0 10px 20px #000; -webkit-box-shadow: inset 0 0 0 4px #ddd, inset 0 0 0 8px #eee, 0 10px 20px #000; box-shadow: inset 0 0 0 4px #ddd, inset 0 0 0 8px #eee, 0 10px 20px #000; font-family: 'Permanent Marker', cursive, sans-serif; font-size: 130%; color: #33c; height: 300px; margin: 50px auto; padding: 40px 20px 10px 20px; position: relative; -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); width: 200px;
}
div:before { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa)); background: -moz-linear-gradient(#cccccc, #aaaaaa); background: -webkit-linear-gradient(#cccccc, #aaaaaa); background: linear-gradient(#cccccc, #aaaaaa); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: inset 0 0 0 1px #aaa, inset 0 0 0 3px #ccc, 6px 2px 8px -6px #555, -6px 2px 8px -6px #555; -webkit-box-shadow: inset 0 0 0 1px #aaa, inset 0 0 0 3px #ccc, 6px 2px 8px -6px #555, -6px 2px 8px -6px #555; box-shadow: inset 0 0 0 1px #aaa, inset 0 0 0 3px #ccc, 6px 2px 8px -6px #555, -6px 2px 8px -6px #555; content: ''; height: 40px; left: 50%; margin-left: -60px; position: absolute; top: -10px; width: 120px;
}
div:after { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIyOS4yMzk3NyUiIHN0b3AtY29sb3I9IiMzMzMzY2MiLz48c3RvcCBvZmZzZXQ9IjI5LjgyNDU2JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iOTkuNDE1MiUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMzMzY2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 0% 50%, 171 50%, color-stop(29.23977%, #3333cc), color-stop(29.82456%, #ffffff), color-stop(99.4152%, #ffffff), color-stop(100%, #3333cc)); background: -moz-linear-gradient(left, #3333cc 50px, #ffffff 51px, #ffffff 170px, #3333cc 171px); background: -webkit-linear-gradient(left, #3333cc 50px, #ffffff 51px, #ffffff 170px, #3333cc 171px); background: linear-gradient(to right, #3333cc 50px, #ffffff 51px, #ffffff 170px, #3333cc 171px); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: inset 0 -3px 12px #555, 0 4px 6px -3px #333; -webkit-box-shadow: inset 0 -3px 12px #555, 0 4px 6px -3px #333; box-shadow: inset 0 -3px 12px #555, 0 4px 6px -3px #333; bottom: 12px; content: ''; height: 20px; position: absolute; right: 8px; -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -webkit-transform: rotate(-6deg); transform: rotate(-6deg); width: 180px;
}
Developer | John Stammerman |
Username | jstam |
Uploaded | July 23, 2022 |
Rating | 3 |
Size | 3,623 Kb |
Views | 48,576 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Jstam.com Home Page | 10,558 Kb |
Hidden Menu Animation | 9,403 Kb |
Foundation 6 example marku | 5,625 Kb |
Pictos font library from CodePen | 3,790 Kb |
A Pen by John Stammerman | 2,438 Kb |
Burpee Equivalent Calculator | 7,286 Kb |
Select field variations across browsers | 2,388 Kb |
LESS CSS multiple background gradient mixin | 4,967 Kb |
Fun with SVG Text Fills | 2,805 Kb |
CodePen Profile Customization | 2,467 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS3 iPad | Vikvarg | 1,766 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
Table border-collapse property | Maxds | 1,672 Kb |
Getting Started | Viblast | 1,500 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!