Tape Cassette Icon - CSS Only

Developer
Size
6,789 Kb
Views
36,432

How do I make an tape cassette icon - css only?

Developed from Artua's Dribbble shot - Tape cassette icon http://dribbble.com/shots/146687-Tape-cassette-icon. What is a tape cassette icon - css only? How do you make a tape cassette icon - css only? This script and codes were developed by John Urbank on 08 July 2022, Friday.

Tape Cassette Icon - CSS Only Previews

Tape Cassette Icon - CSS Only - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tape Cassette Icon - CSS Only</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class='wrap'> <div class='cassette-back'> <span class='a'>A</span> <span class='hd90'>HD90</span> <div class='plate'> <div class='reel'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class='reel'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class='screws'> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class='holes'> <div></div> <div></div> <div></div> <div></div> </div> <div class='shadow'></div> </div> </div>
</body>
</body>
</html>

Tape Cassette Icon - CSS Only - Script Codes CSS Codes

html { height: 100%; overflow-y: hidden;
}
body { font: normal bold 13px/11px arial, helvetica, sans-serif; background: #c7cdce; background-image: -webkit-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -webkit-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%); background-image: -moz-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -moz-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%); background-image: -o-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -o-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%); background-image: -ms-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -ms-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%); background-image: radial-gradient(circle at center 30%, #ffffff 18%, #a2adaf 100%), linear-gradient(to top, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
}
.wrap { position: relative; height: 500px; width: 486px; margin: 7% auto 0;
}
.a, .hd90 { padding: 2px; position: absolute;
}
.a { background: #f0e9d6; top: 26px; left: 30px; -webkit-box-shadow: -11px 0 0 white; box-shadow: -11px 0 0 white;
}
.hd90 { top: 96px; left: 208px; color: white; letter-spacing: 1px;
}
.cassette-back { margin: 0 auto; width: 269px; height: 164px; position: relative; border-radius: 15px; z-index: 3; -webkit-box-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; box-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; border: 1px solid #c2c2c2; border-bottom-color: #3f3f3f; border-left-color: #8b8b8b; border-right-color: #8b8b8b; background-image: -webkit-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%); background-image: -moz-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%); background-image: -o-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%); background-image: -ms-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%); background-image: radial-gradient(circle farthest-corner at 0 -253px, #7c7c7c 57%, #3f3b3c 76%);
}
.cassette-back:before { display: block; content: ""; height: 100px; width: 233px; border-radius: 8px; top: 14px; left: 16px; position: relative; border: 2px solid black; -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); background: #f0e9d6; background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%); background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%); background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%); background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%); background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%);
}
.plate { width: 168px; height: 43px; border-radius: 6px; border: 1px solid #fffee7; background: #393034; position: absolute; top: 46px; left: 50px; box-shadow: inset 0 0 4px black;
}
.plate:before { display: block; content: ""; width: 69px; height: 28px; border-radius: 5px; border: 1px solid #bbbbbb; position: absolute; top: 7px; left: 49px; -webkit-box-shadow: inset 0 0 3px black, 0 0 3px black; box-shadow: inset 0 0 3px black, 0 0 3px black; background: #f7f4f2; background-image: -webkit-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%), -webkit-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%); background-image: -moz-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%), -moz-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%); background-image: -ms-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%), -ms-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%); background-image: -o-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%), -o-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%); background-image: radial-gradient(circle farthest-side at -9px 14px, #73615c 0%, #73615c 39%, rgba(0, 0, 0, 0) 41%), radial-gradient(circle farthest-side at 96px 14px, #73615c 0%, #73615c 39%, rgba(0, 0, 0, 0) 41%);
}
.plate:after { display: block; content: ""; width: 214px; height: 46px; position: absolute; top: 72px; left: -25px; background-image: -webkit-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -webkit-linear-gradient(10deg, transparent 93%, black 93%, #3F3B3C 94%), -webkit-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -webkit-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%);
}
.reel { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; -webkit-box-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black; box-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black; top: 5px; left: 10px; background-image: -webkit-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%); background-image: -moz-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%); background-image: -o-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%); background-image: -ms-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%); background-image: radial-gradient(circle farthest-corner at center center, #ffffff 0%, #ffffff 59%, #000000 74%);
}
.reel:last-child { left: 126px;
}
.reel div { position: absolute; width: 4px; height: 4px; background: #000;
}
.reel div:nth-child(1) { transform: rotate(193deg); top: 1px; left: 16px;
}
.reel div:nth-child(2) { transform: rotate(257deg); top: 10px; left: 25px;
}
.reel div:nth-child(3) { transform: rotate(128deg); top: 22px; left: 22px;
}
.reel div:nth-child(4) { transform: rotate(156deg); top: 19px; left: 2px;
}
.reel div:nth-child(5) { transform: rotate(189deg); top: 26px; left: 11px;
}
.reel div:nth-child(6) { transform: rotate(220deg); top: 6px; left: 3px;
}
.screws div { width: 8px; height: 8px; border-radius: 50%; background: black; position: absolute; top: 3px; left: 6px; -webkit-box-shadow: 0 1px 1px #0a0a0a, 0 2px 0px #7e7e7e; box-shadow: 0 1px 1px #0a0a0a, 0 2px 0px #7e7e7e; border: 1px solid #2e2e2e; background-image: -webkit-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%); background-image: -moz-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%); background-image: -ms-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%); background-image: -o-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%); background-image: radial-gradient(circle farthest-side at 5px 2px, #636363 0%, #3f3f3f 70%);
}
.screws div:nth-child(1) { top: 3px; left: 6px;
}
.screws div:nth-child(2) { top: 3px; left: 255px;
}
.screws div:nth-child(3) { top: 147px; left: 6px;
}
.screws div:nth-child(4) { top: 147px; left: 255px;
}
.screws div:nth-child(5) { top: 130px; left: 132px;
}
.screws div:nth-child(1):before, .screws div:nth-child(2):before, .screws div:nth-child(3):before, .screws div:nth-child(4):before, .screws div:nth-child(5):before { display: block; content: "x"; font-size: 7px; line-height: 6px; text-shadow: -1px -1px 1px gray; position: absolute; left: 2px; color: #222; top: 1px;
}
.holes div { display: block; content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; z-index: 100; -webkit-box-shadow: 71px 44px white, 71px 43px black, 71px 45px black, 70px 44px black, 72px 44px black, 71px 46px rgba(255, 255, 255, 0.19); box-shadow: 71px 44px white, 71px 43px black, 71px 45px black, 70px 44px black, 72px 44px black, 71px 46px rgba(255, 255, 255, 0.19);
}
.holes div:nth-child(2) { bottom: 57px; left: 25px;
}
.holes div:nth-child(3) { bottom: 57px; left: 96px;
}
.holes div:nth-child(4) { left: 122px;
}
html { height: 100%; overflow-y: hidden;
}
body { font: normal bold 13px/11px arial, helvetica, sans-serif; background: #c7cdce; background-image: -webkit-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -webkit-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%); background-image: -moz-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -moz-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%); background-image: -o-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -o-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%); background-image: -ms-radial-gradient(center 30%, circle, #fff 18%, #a2adaf 100%), -ms-linear-gradient(bottom, #c7cdce 40%, #fefefe 60%, #c7cdce 100%); background-image: radial-gradient(circle at center 30%, #ffffff 18%, #a2adaf 100%), linear-gradient(to top, #c7cdce 40%, #fefefe 60%, #c7cdce 100%);
}
.wrap { position: relative; height: 500px; width: 486px; margin: 7% auto 0;
}
.a, .hd90 { padding: 2px; position: absolute;
}
.a { background: #f0e9d6; top: 26px; left: 30px; -webkit-box-shadow: -11px 0 0 white; box-shadow: -11px 0 0 white;
}
.hd90 { top: 96px; left: 208px; color: white; letter-spacing: 1px;
}
.cassette-back { margin: 0 auto; width: 269px; height: 164px; position: relative; border-radius: 15px; z-index: 3; -webkit-box-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; box-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; border: 1px solid #c2c2c2; border-bottom-color: #3f3f3f; border-left-color: #8b8b8b; border-right-color: #8b8b8b; background-image: -webkit-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%); background-image: -moz-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%); background-image: -o-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%); background-image: -ms-radial-gradient(0 -253px, circle farthest-corner, #7c7c7c 57%, #3f3b3c 76%); background-image: radial-gradient(circle farthest-corner at 0 -253px, #7c7c7c 57%, #3f3b3c 76%);
}
.cassette-back:before { display: block; content: ""; height: 100px; width: 233px; border-radius: 8px; top: 14px; left: 16px; position: relative; border: 2px solid black; -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); background: #f0e9d6; background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%); background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%); background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%); background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%); background-image: -webkit-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -webkit-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -moz-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -moz-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -o-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -o-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: -ms-radial-gradient(center center, circle contain, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), -ms-linear-gradient(bottom, transparent 4%, #4f7fb4 5%, #4f7fb4 20%, transparent 21%, transparent 72%, white 72%, white 81%, transparent 81%, transparent 83%, white 83%, white 93%, transparent 86%); background-image: radial-gradient(circle contain at center center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 221%), linear-gradient(to top, rgba(0, 0, 0, 0) 4%, #4f7fb4 5%, #4f7fb4 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 72%, #ffffff 72%, #ffffff 81%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 83%, #ffffff 83%, #ffffff 93%, rgba(0, 0, 0, 0) 86%);
}
.plate { width: 168px; height: 43px; border-radius: 6px; border: 1px solid #fffee7; background: #393034; position: absolute; top: 46px; left: 50px; box-shadow: inset 0 0 4px black;
}
.plate:before { display: block; content: ""; width: 69px; height: 28px; border-radius: 5px; border: 1px solid #bbbbbb; position: absolute; top: 7px; left: 49px; -webkit-box-shadow: inset 0 0 3px black, 0 0 3px black; box-shadow: inset 0 0 3px black, 0 0 3px black; background: #f7f4f2; background-image: -webkit-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%), -webkit-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%); background-image: -moz-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%), -moz-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%); background-image: -ms-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%), -ms-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%); background-image: -o-radial-gradient(-9px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%), -o-radial-gradient(96px 14px, circle farthest-side, #73615c 0%, #73615c 39%, transparent 41%); background-image: radial-gradient(circle farthest-side at -9px 14px, #73615c 0%, #73615c 39%, rgba(0, 0, 0, 0) 41%), radial-gradient(circle farthest-side at 96px 14px, #73615c 0%, #73615c 39%, rgba(0, 0, 0, 0) 41%);
}
.plate:after { display: block; content: ""; width: 214px; height: 46px; position: absolute; top: 72px; left: -25px; background-image: -webkit-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -webkit-linear-gradient(10deg, transparent 93%, black 93%, #3F3B3C 94%), -webkit-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -webkit-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%); background-image: -moz-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -moz-linear-gradient(10deg, transparent 93%, black 93%, #3F3B3C 94%), -moz-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -moz-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%); background-image: -o-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -o-linear-gradient(10deg, transparent 93%, black 93%, #3F3B3C 94%), -o-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -o-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%); background-image: -ms-linear-gradient(-10deg, #3F3B3C 8%, black 9%, transparent 9%, transparent 100%), -ms-linear-gradient(10deg, transparent 93%, black 93%, #3F3B3C 94%), -ms-radial-gradient(center -47px, circle farthest-corner, rgba(255, 255, 255, 0.7) 0%, transparent 100%), -ms-linear-gradient(bottom, #222 2%, transparent 7%, #342F32 11%, transparent 12%, transparent 14%, #342F32 15%, #342F32 16%, transparent 18%, transparent 20%, #342F32 21%, #342F32 23%, transparent 24%, transparent 26%, #342F32 27%, #342F32 29%, transparent 30%, transparent 33%, #342F32 34%, #342F32 36%, transparent 37%, transparent 39%, #342F32 40%, #342F32 42%, transparent 43%, transparent 45%, #342F32 47%, #342F32 49%, transparent 51%, transparent 53%, #342F32 54%, #342F32 56%, transparent 58%, transparent 60%, #342F32 62%, #342F32 64%, transparent 65%, transparent 67%, #342F32 68%, #342F32 72%, transparent 73%, transparent 76%, #342F32 78%, #342F32 80%, transparent 82%, transparent 83%, #342F32 85%, #342F32 87%, transparent 88%, transparent 90%, #342F32 91%, black 100%); background-image: linear-gradient(-10deg, #3f3b3c 8%, #000000 9%, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0) 100%), linear-gradient(10deg, rgba(0, 0, 0, 0) 93%, #000000 93%, #3f3b3c 94%), radial-gradient(circle farthest-corner at center -47px, rgba(255, 255, 255, 0.7) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to top, #222222 2%, rgba(0, 0, 0, 0) 7%, #342f32 11%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 14%, #342f32 15%, #342f32 16%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 20%, #342f32 21%, #342f32 23%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 26%, #342f32 27%, #342f32 29%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 33%, #342f32 34%, #342f32 36%, rgba(0, 0, 0, 0) 37%, rgba(0, 0, 0, 0) 39%, #342f32 40%, #342f32 42%, rgba(0, 0, 0, 0) 43%, rgba(0, 0, 0, 0) 45%, #342f32 47%, #342f32 49%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 53%, #342f32 54%, #342f32 56%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 60%, #342f32 62%, #342f32 64%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0) 67%, #342f32 68%, #342f32 72%, rgba(0, 0, 0, 0) 73%, rgba(0, 0, 0, 0) 76%, #342f32 78%, #342f32 80%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0) 83%, #342f32 85%, #342f32 87%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 90%, #342f32 91%, #000000 100%);
}
.reel { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; -webkit-box-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black; box-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black; top: 5px; left: 10px; background-image: -webkit-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%); background-image: -moz-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%); background-image: -o-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%); background-image: -ms-radial-gradient(center center, circle farthest-corner, white 0%, white 59%, black 74%); background-image: radial-gradient(circle farthest-corner at center center, #ffffff 0%, #ffffff 59%, #000000 74%);
}
.reel:last-child { left: 126px;
}
.reel div { position: absolute; width: 4px; height: 4px; background: #000;
}
.reel div:nth-child(1) { -webkit-transform: rotate(193deg); -moz-transform: rotate(193deg); -o-transform: rotate(193deg); -ms-transform: rotate(193deg); transform: rotate(193deg); top: 1px; left: 16px;
}
.reel div:nth-child(2) { -webkit-transform: rotate(257deg); -moz-transform: rotate(257deg); -o-transform: rotate(257deg); -ms-transform: rotate(257deg); transform: rotate(257deg); top: 10px; left: 25px;
}
.reel div:nth-child(3) { -webkit-transform: rotate(128deg); -moz-transform: rotate(128deg); -o-transform: rotate(128deg); -ms-transform: rotate(128deg); transform: rotate(128deg); top: 22px; left: 22px;
}
.reel div:nth-child(4) { -webkit-transform: rotate(156deg); -moz-transform: rotate(156deg); -o-transform: rotate(156deg); -ms-transform: rotate(156deg); transform: rotate(156deg); top: 19px; left: 2px;
}
.reel div:nth-child(5) { -webkit-transform: rotate(189deg); -moz-transform: rotate(189deg); -o-transform: rotate(189deg); -ms-transform: rotate(189deg); transform: rotate(189deg); top: 26px; left: 11px;
}
.reel div:nth-child(6) { -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); -o-transform: rotate(220deg); -ms-transform: rotate(220deg); transform: rotate(220deg); top: 6px; left: 3px;
}
.screws div { width: 8px; height: 8px; border-radius: 50%; background: black; position: absolute; top: 3px; left: 6px; -webkit-box-shadow: 0 1px 1px #0a0a0a, 0 2px 0px #7e7e7e; box-shadow: 0 1px 1px #0a0a0a, 0 2px 0px #7e7e7e; border: 1px solid #2e2e2e; background-image: -webkit-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%); background-image: -moz-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%); background-image: -ms-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%); background-image: -o-radial-gradient(5px 2px, circle farthest-side, #636363 0%, #3f3f3f 70%); background-image: radial-gradient(circle farthest-side at 5px 2px, #636363 0%, #3f3f3f 70%);
}
.screws div:nth-child(1) { top: 3px; left: 6px;
}
.screws div:nth-child(2) { top: 3px; left: 255px;
}
.screws div:nth-child(3) { top: 147px; left: 6px;
}
.screws div:nth-child(4) { top: 147px; left: 255px;
}
.screws div:nth-child(5) { top: 130px; left: 132px;
}
.screws div:nth-child(1):before, .screws div:nth-child(2):before, .screws div:nth-child(3):before, .screws div:nth-child(4):before, .screws div:nth-child(5):before { display: block; content: "x"; font-size: 7px; line-height: 6px; text-shadow: -1px -1px 1px gray; position: absolute; left: 2px; color: #222; top: 1px;
}
.holes div { display: block; content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; z-index: 100; -webkit-box-shadow: 71px 44px white, 71px 43px black, 71px 45px black, 70px 44px black, 72px 44px black, 71px 46px rgba(255, 255, 255, 0.19); box-shadow: 71px 44px white, 71px 43px black, 71px 45px black, 70px 44px black, 72px 44px black, 71px 46px rgba(255, 255, 255, 0.19);
}
.holes div:nth-child(2) { bottom: 57px; left: 25px;
}
.holes div:nth-child(3) { bottom: 57px; left: 96px;
}
.holes div:nth-child(4) { left: 122px;
}
.shadow { height: 8px; width: 270px; -webkit-box-shadow: 0 18px 7px #111; box-shadow: 0 18px 7px #111; border-radius: 58%; position: absolute; bottom: 179px; z-index: 1; top: 143px;
}
.shadow { height: 8px; width: 270px; -webkit-box-shadow: 0 18px 7px #111; box-shadow: 0 18px 7px #111; border-radius: 58%; position: absolute; bottom: 179px; z-index: 1; top: 143px;
}
Tape Cassette Icon - CSS Only - Script Codes
Tape Cassette Icon - CSS Only - Script Codes
Home Page Home
Developer John Urbank
Username jurbank
Uploaded July 08, 2022
Rating 4.5
Size 6,789 Kb
Views 36,432
Do you need developer help for Tape Cassette Icon - CSS Only?

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!

John Urbank (jurbank) Script Codes
Create amazing captions with AI!

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!