One element Vinyl
How do I make an one element vinyl?
Made with radial-gradient. What is a one element vinyl? How do you make a one element vinyl? This script and codes were developed by Marius Balaj on 07 July 2022, Thursday.
One element Vinyl Previews
One element Vinyl - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One element Vinyl</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='vinyl'></div>
</body>
</html>
One element Vinyl - Script Codes CSS Codes
body { background:#ccb07a url('http://i.imgur.com/uNVzcoX.png') repeat;
}
.vinyl { position:relative; margin:200px auto; display:block; width:275px; height:275px; border-radius:50%; background: #2f2f2e; border:1px solid #595959;
}
.vinyl:before { position:absolute; display:block; content:""; width:100%; height:100%; border-radius:100%; background: -webkit-radial-gradient(center, ellipse cover, #2f2f2e 0%, #404340 1%, #2f2f2e 2%, #404340 3%, #2f2f2e 4%, #404340 5%, #2f2f2e 6%, #404340 7%, #2f2f2e 8%, #404340 9%, #2f2f2e 10%, #404340 11%, #2f2f2e 12%, #404340 13%, #2f2f2e 14%, #404340 15%, #2f2f2e 16%, #404340 17%, #2f2f2e 18%, #404340 19%, #2f2f2e 20%, #404340 21%, #2f2f2e 22%, #404340 23%, #2f2f2e 24%, #404340 25%, #2f2f2e 26%, #404340 27%, #2f2f2e 28%, #404340 29%, #2f2f2e 30%, #404340 31%, #2f2f2e 32%, #404340 33%, #2f2f2e 34%, #404340 35%, #2f2f2e 36%, #404340 37%, #2f2f2e 38%, #404340 39%, #2f2f2e 40%, #404340 41%, #2f2f2e 42%, #404340 43%, #2f2f2e 44%, #404340 45%, #2f2f2e 46%, #404340 47%, #2f2f2e 48%, #404340 49%, #2f2f2e 50%, #404340 51%, #2f2f2e 52%, #404340 53%, #2f2f2e 54%, #404340 55%, #2f2f2e 56%, #404340 57%, #2f2f2e 58%, #404340 59%, #2f2f2e 60%, #404340 61%, #2f2f2e 62%, #404340 63%, #2f2f2e 64%, #404340 65%, #2f2f2e 66%, #404340 67%, #2f2f2e 68%, #404340 69%, #2f2f2e 70%, #404340 71%, #2f2f2e 72%, #404340 73%, #2f2f2e 74%, #404340 75%, #2f2f2e 76%, #404340 77%, #2f2f2e 78%, #404340 79%, #2f2f2e 80%, #404340 81%, #2f2f2e 82%, #404340 83%, #2f2f2e 84%, #404340 85%, #2f2f2e 86%, #404340 87%, #2f2f2e 88%, #404340 89%, #2f2f2e 90%, #404340 91%, #2f2f2e 92%, #404340 93%, #2f2f2e 94%, #404340 95%, #2f2f2e 96%, #404340 97%, #404340 97%, #2f2f2e 98%); background: -moz-radial-gradient(center, ellipse cover, #2f2f2e 0%, #404340 1%, #2f2f2e 2%, #404340 3%, #2f2f2e 4%, #404340 5%, #2f2f2e 6%, #404340 7%, #2f2f2e 8%, #404340 9%, #2f2f2e 10%, #404340 11%, #2f2f2e 12%, #404340 13%, #2f2f2e 14%, #404340 15%, #2f2f2e 16%, #404340 17%, #2f2f2e 18%, #404340 19%, #2f2f2e 20%, #404340 21%, #2f2f2e 22%, #404340 23%, #2f2f2e 24%, #404340 25%, #2f2f2e 26%, #404340 27%, #2f2f2e 28%, #404340 29%, #2f2f2e 30%, #404340 31%, #2f2f2e 32%, #404340 33%, #2f2f2e 34%, #404340 35%, #2f2f2e 36%, #404340 37%, #2f2f2e 38%, #404340 39%, #2f2f2e 40%, #404340 41%, #2f2f2e 42%, #404340 43%, #2f2f2e 44%, #404340 45%, #2f2f2e 46%, #404340 47%, #2f2f2e 48%, #404340 49%, #2f2f2e 50%, #404340 51%, #2f2f2e 52%, #404340 53%, #2f2f2e 54%, #404340 55%, #2f2f2e 56%, #404340 57%, #2f2f2e 58%, #404340 59%, #2f2f2e 60%, #404340 61%, #2f2f2e 62%, #404340 63%, #2f2f2e 64%, #404340 65%, #2f2f2e 66%, #404340 67%, #2f2f2e 68%, #404340 69%, #2f2f2e 70%, #404340 71%, #2f2f2e 72%, #404340 73%, #2f2f2e 74%, #404340 75%, #2f2f2e 76%, #404340 77%, #2f2f2e 78%, #404340 79%, #2f2f2e 80%, #404340 81%, #2f2f2e 82%, #404340 83%, #2f2f2e 84%, #404340 85%, #2f2f2e 86%, #404340 87%, #2f2f2e 88%, #404340 89%, #2f2f2e 90%, #404340 91%, #2f2f2e 92%, #404340 93%, #2f2f2e 94%, #404340 95%, #2f2f2e 96%, #404340 97%, #404340 97%, #2f2f2e 98%); background: radial-gradient(center, ellipse cover, #2f2f2e 0%, #404340 1%, #2f2f2e 2%, #404340 3%, #2f2f2e 4%, #404340 5%, #2f2f2e 6%, #404340 7%, #2f2f2e 8%, #404340 9%, #2f2f2e 10%, #404340 11%, #2f2f2e 12%, #404340 13%, #2f2f2e 14%, #404340 15%, #2f2f2e 16%, #404340 17%, #2f2f2e 18%, #404340 19%, #2f2f2e 20%, #404340 21%, #2f2f2e 22%, #404340 23%, #2f2f2e 24%, #404340 25%, #2f2f2e 26%, #404340 27%, #2f2f2e 28%, #404340 29%, #2f2f2e 30%, #404340 31%, #2f2f2e 32%, #404340 33%, #2f2f2e 34%, #404340 35%, #2f2f2e 36%, #404340 37%, #2f2f2e 38%, #404340 39%, #2f2f2e 40%, #404340 41%, #2f2f2e 42%, #404340 43%, #2f2f2e 44%, #404340 45%, #2f2f2e 46%, #404340 47%, #2f2f2e 48%, #404340 49%, #2f2f2e 50%, #404340 51%, #2f2f2e 52%, #404340 53%, #2f2f2e 54%, #404340 55%, #2f2f2e 56%, #404340 57%, #2f2f2e 58%, #404340 59%, #2f2f2e 60%, #404340 61%, #2f2f2e 62%, #404340 63%, #2f2f2e 64%, #404340 65%, #2f2f2e 66%, #404340 67%, #2f2f2e 68%, #404340 69%, #2f2f2e 70%, #404340 71%, #2f2f2e 72%, #404340 73%, #2f2f2e 74%, #404340 75%, #2f2f2e 76%, #404340 77%, #2f2f2e 78%, #404340 79%, #2f2f2e 80%, #404340 81%, #2f2f2e 82%, #404340 83%, #2f2f2e 84%, #404340 85%, #2f2f2e 86%, #404340 87%, #2f2f2e 88%, #404340 89%, #2f2f2e 90%, #404340 91%, #2f2f2e 92%, #404340 93%, #2f2f2e 94%, #404340 95%, #2f2f2e 96%, #404340 97%, #404340 97%, #2f2f2e 98%); top:0; left:0;
}
.vinyl::after { border:10px solid #2f2f2e; content:"\2022"; color:#fff; width:110px; display:block; height:110px; border-radius:50%; text-align:center; line-height:110px; position:absolute; top:50%; left:50%; margin:-65px 0 0 -65px; font-size:42px; background-color: rgb(191, 69, 58); text-shadow: rgb(176, 63, 53) 1px 1px, rgb(176, 63, 53) 2px 2px, rgb(176, 63, 53) 3px 3px, rgb(176, 63, 53) 4px 4px, rgb(177, 63, 53) 5px 5px, rgb(179, 64, 54) 6px 6px, rgb(180, 64, 54) 7px 7px, rgb(182, 65, 55) 8px 8px, rgb(183, 66, 55) 9px 9px, rgb(185, 66, 56) 10px 10px, rgb(186, 67, 56) 11px 11px, rgb(188, 67, 57) 12px 12px, rgb(189, 68, 57) 13px 13px, rgb(191, 69, 58) 14px 14px;
}
| Developer | Marius Balaj |
| Username | mariusbalaj |
| Uploaded | July 07, 2022 |
| Rating | 4 |
| Size | 2,296 Kb |
| Views | 62,744 |
Do you need developer help for One element Vinyl?
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!
Marius Balaj (mariusbalaj) Script Codes
| Name | Size |
| Angular Particles Explosion | 2,798 Kb |
| Pixel art to CSS | 4,772 Kb |
| Pythagorean theorem animation | 2,602 Kb |
| Codepen CSS Illustration | 2,818 Kb |
| Symphony of Math.PI | 2,355 Kb |
| Flat Turntable Icon and Animation in Pure CSS | 2,945 Kb |
| Login with flip 3d animation | 3,014 Kb |
| Social buttons with hover | 3,178 Kb |
| Flat iPhone with Next Post Animation | 3,283 Kb |
| Folding Effect on Hover | 3,317 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| Flexbox playground | Enxaneta | 5,418 Kb |
| CSS Social Media Icon | TychoBlender | 3,871 Kb |
| IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
| Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
| SVG Hover Animations | Kjbrum | 10,557 Kb |
| Spiralator 9000 | AdmiralPotato | 4,671 Kb |
| SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
| A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
| Simple jQuery Slider | Jurbank | 2,874 Kb |
| Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Do you want hide your ip address?
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!