CSS Vinyl Record

Developer
Jack Rugile
Size
3,972 Kb
Views
8,096
  1. CSS Vinyl Record Previews
  2. CSS Vinyl Record HTML Codes
  3. CSS Vinyl Record CSS Codes
  4. CSS Vinyl Record JS Codes

How do I make an css vinyl record?

An attempt to achieve this Dribbble shot by Daniel Waldron with HTML and CSS: http://dribbble.com/shots/94101-Vinyl-Record. What is a css vinyl record? How do you make a css vinyl record? This script and codes were developed by Jack Rugile on 17 January 2023, Tuesday.

CSS Vinyl Record Previews
IQ Test

CSS Vinyl Record - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Vinyl Record</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #ede6d9;
}
img { border-radius: 10px; display: block; left: 0; opacity: 0; position: absolute; top: 0; z-index: 2;
}
.record-container:hover img { opacity: 1;
}
.record-container { background: #b5ac9a; border-radius: 10px; box-shadow: 0 6px 0 #99907e; height: 300px; left: 50%; margin: -153px 0 0 -200px; position: absolute; top: 50%; width: 400px;
}
.r { box-sizing: border-box; border-radius: 100%; left: 50%; position: absolute; top: 50%;
}
.record-outer { background: #2a2928; height: 262px; width: 262px; margin-top: -131px; margin-left: -131px;
}
.record-inner { background: #da5b33; height: 76px; width: 76px; margin-top: -38px; margin-left: -38px;
}
.record-hole { background: #b5ac9a; height: 16px; width: 16px; margin-top: -8px; margin-left: -8px;
}
.ring { border: 1px solid #403f3e; border-left-color: #ada9a0; border-right-color: #ada9a0; transform: rotate(45deg);
}
.ring-inner { border: 1px solid #d9a388; height: 68px; width: 68px; margin-top: -34px; margin-left: -34px;
}
.ring.r1 { height: 250px; width: 250px; margin-top: -125px; margin-left: -125px;
}
.ring.r2 { height: 240px; width: 240px; margin-top: -120px; margin-left: -120px;
}
.ring.r3 { height: 230px; width: 230px; margin-top: -115px; margin-left: -115px;
}
.ring.r4 { height: 220px; width: 220px; margin-top: -110px; margin-left: -110px;
}
.ring.r5 { height: 210px; width: 210px; margin-top: -105px; margin-left: -105px;
}
.ring.r6 { height: 200px; width: 200px; margin-top: -100px; margin-left: -100px;
}
.ring.r7 { height: 190px; width: 190px; margin-top: -95px; margin-left: -95px;
}
.ring.r8 { height: 180px; width: 180px; margin-top: -90px; margin-left: -90px;
}
.ring.r9 { height: 170px; width: 170px; margin-top: -85px; margin-left: -85px;
}
.ring.r10 { height: 160px; width: 160px; margin-top: -80px; margin-left: -80px;
}
.ring.r11 { height: 150px; width: 150px; margin-top: -75px; margin-left: -75px;
}
.ring.r12 { height: 140px; width: 140px; margin-top: -70px; margin-left: -70px;
}
.ring.r13 { height: 130px; width: 130px; margin-top: -65px; margin-left: -65px;
}
.ring.r14 { height: 120px; width: 120px; margin-top: -60px; margin-left: -60px;
}
.ring.r15 { height: 110px; width: 110px; margin-top: -55px; margin-left: -55px;
}
.ring.r16 { height: 100px; width: 100px; margin-top: -50px; margin-left: -50px;
}
.ring.r17 { height: 90px; width: 90px; margin-top: -45px; margin-left: -45px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="record-container"> <img src="https://dribbble.s3.amazonaws.com/users/2009/screenshots/94101/shot_1293655299.png" /> <div class="r record-outer"></div> <div class="r record-inner"></div> <div class="r record-hole"></div> <div class="r ring-inner"></div> <div class="r ring r1"></div> <div class="r ring r2"></div> <div class="r ring r3"></div> <div class="r ring r4"></div> <div class="r ring r5"></div> <div class="r ring r6"></div> <div class="r ring r7"></div> <div class="r ring r8"></div> <div class="r ring r9"></div> <div class="r ring r10"></div> <div class="r ring r11"></div> <div class="r ring r12"></div> <div class="r ring r13"></div> <div class="r ring r14"></div> <div class="r ring r15"></div> <div class="r ring r16"></div> <div class="r ring r17"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Vinyl Record - Script Codes CSS Codes

body { background: #ede6d9;
}
img { border-radius: 10px; display: block; left: 0; opacity: 0; position: absolute; top: 0; z-index: 2;
}
.record-container:hover img { opacity: 1;
}
.record-container { background: #b5ac9a; border-radius: 10px; box-shadow: 0 6px 0 #99907e; height: 300px; left: 50%; margin: -153px 0 0 -200px; position: absolute; top: 50%; width: 400px;
}
.r { box-sizing: border-box; border-radius: 100%; left: 50%; position: absolute; top: 50%;
}
.record-outer { background: #2a2928; height: 262px; width: 262px; margin-top: -131px; margin-left: -131px;
}
.record-inner { background: #da5b33; height: 76px; width: 76px; margin-top: -38px; margin-left: -38px;
}
.record-hole { background: #b5ac9a; height: 16px; width: 16px; margin-top: -8px; margin-left: -8px;
}
.ring { border: 1px solid #403f3e; border-left-color: #ada9a0; border-right-color: #ada9a0; transform: rotate(45deg);
}
.ring-inner { border: 1px solid #d9a388; height: 68px; width: 68px; margin-top: -34px; margin-left: -34px;
}
.ring.r1 { height: 250px; width: 250px; margin-top: -125px; margin-left: -125px;
}
.ring.r2 { height: 240px; width: 240px; margin-top: -120px; margin-left: -120px;
}
.ring.r3 { height: 230px; width: 230px; margin-top: -115px; margin-left: -115px;
}
.ring.r4 { height: 220px; width: 220px; margin-top: -110px; margin-left: -110px;
}
.ring.r5 { height: 210px; width: 210px; margin-top: -105px; margin-left: -105px;
}
.ring.r6 { height: 200px; width: 200px; margin-top: -100px; margin-left: -100px;
}
.ring.r7 { height: 190px; width: 190px; margin-top: -95px; margin-left: -95px;
}
.ring.r8 { height: 180px; width: 180px; margin-top: -90px; margin-left: -90px;
}
.ring.r9 { height: 170px; width: 170px; margin-top: -85px; margin-left: -85px;
}
.ring.r10 { height: 160px; width: 160px; margin-top: -80px; margin-left: -80px;
}
.ring.r11 { height: 150px; width: 150px; margin-top: -75px; margin-left: -75px;
}
.ring.r12 { height: 140px; width: 140px; margin-top: -70px; margin-left: -70px;
}
.ring.r13 { height: 130px; width: 130px; margin-top: -65px; margin-left: -65px;
}
.ring.r14 { height: 120px; width: 120px; margin-top: -60px; margin-left: -60px;
}
.ring.r15 { height: 110px; width: 110px; margin-top: -55px; margin-left: -55px;
}
.ring.r16 { height: 100px; width: 100px; margin-top: -50px; margin-left: -50px;
}
.ring.r17 { height: 90px; width: 90px; margin-top: -45px; margin-left: -45px;
}

CSS Vinyl Record - Script Codes JS Codes

// Hover over the record to see the original Dribbble shot
CSS Vinyl Record - Script Codes
CSS Vinyl Record - Script Codes
Home Page Home
Developer Jack Rugile
Username jackrugile
Uploaded January 17, 2023
Rating 3.5
Size 3,972 Kb
Views 8,096
Do you need developer help for CSS Vinyl Record?

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!

Jack Rugile (jackrugile) Script Codes
Name
Canvas Sparkle Light Trail
Glitchy Loading Indicator
Canvas Simple Circle Loader
CSS3 Pseudo Sound Bars
Canvas Bokeh Generation
Rainbow Grid
Canvas Wave
Bouncing Ball Animation
Canvas Radar
Light Loader
Create amazing blog posts 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!