D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
wboykinm
Full window
Github gist
A single selection from http://a.singlediv.com/ by Lynn Fisher
Go check
this s***
out. Seriously, run don't walk.
<!DOCTYPE html> <html> <head> <style> /* GROUNDWORK */ @media (max-width: 500px) { } .entry { text-align: center; min-height: 400px; position: relative; } .entry div { position: absolute; left: 50%; top: 50%; } .entry div:before, .entry div:after { display: block; content: ''; position: absolute; } @media (max-width: 400px) { .entry div:not(.no-scale) { -webkit-transform: scale(0.8); transform: scale(0.8); } } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } @media all and (min-width: 960px) { .entry { float: left; width: 50%; } .entry.wide { width: 100%; } } /* HERE'S THE GOOD STUFF */ #cassette { background: #ccc; } #cassette div { width: 180px; height: 120px; margin-left: -90px; margin-top: -60px; border-radius: 5px; background-image: linear-gradient(to right,#444 10px,transparent 10px),linear-gradient(to left,#444 10px,transparent 10px),linear-gradient(135deg,#444 20px,transparent 20px),linear-gradient(-135deg,#444 20px,transparent 20px),linear-gradient(to bottom,transparent 35px,#B58000 35px,#B58000 43px,#593067 43px,#593067 51px,#FDF7C8 51px,#FDF7C8 59px,#A2902E 59px,#A2902E 67px,#2A1E28 67px,#2A1E28 75px,transparent 75px),linear-gradient(to bottom,transparent 10px,#f7f7f7 10px,#f7f7f7 85px,transparent 85px),linear-gradient(to top,transparent 26px,#444 26px),linear-gradient(105deg,#444 70px,#333 70px,#333 73px,transparent 73px),linear-gradient(-105deg,#444 70px,#333 70px,#333 73px,transparent 73px),linear-gradient(to top,#444 24px,#777 24px,#777 26px,#444 26px); box-shadow: -4px -4px 2px rgba(0,0,0,0.2); } #cassette div:before { width: 90px; height: 26px; margin-left: -45px; left: 50%; top: 41px; background-color: #ccc; background-image: linear-gradient(to bottom,#444 5px,transparent 5px),linear-gradient(to top,#444 5px,transparent 5px),linear-gradient(to right,#444 30px,transparent 30px),linear-gradient(to left,#444 30px,transparent 30px),radial-gradient(circle at 10px 12px,#a0522d 32px,transparent 32px); border-radius: 30px; } #cassette div:after { width: 5px; height: 5px; background: #999; border-radius: 50%; box-shadow: 165px 0 0 #999,0 104px 0 #999,165px 104px 0 #999,55px 101px 0 1px #222,68px 98px 0 1px #222,98px 98px 0 1px #222,110px 101px 0 1px #222,51px 38px 0 #444,114px 38px 0 #444,44px 46px 0 #444,58px 46px 0 #444,107px 46px 0 #444,121px 46px 0 #444,51px 53px 0 #444,114px 53px 0 #444,51px 46px 0 6px #ccc,114px 46px 0 6px #ccc; left: 5px; top: 5px; } </style> <title></title> </head> <body class="cf"> <div class="entry wide" id="cassette"> <div></div> </div> </body> </html>