CSS Gem Badge

Developer
Size
3,335 Kb
Views
16,192

How do I make an css gem badge?

Rough CSS construction of this Dribbble shot by Ilja Miskov. What is a css gem badge? How do you make a css gem badge? This script and codes were developed by Adam Orchard on 02 December 2022, Friday.

CSS Gem Badge Previews

CSS Gem Badge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Gem Badge</title> <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: #d0d0d0; font-family: "Raleway", sans-serif; font-size: 18pt; color: #424242;
}
a { color: #ea4c89;
}
#badge { -webkit-backface-visibility: hidden; transition: transform 0.2s ease-in-out; position: absolute; left: 50%; top: 50%; margin: -100px; width: 200px; height: 200px; background: #e0e0e0; border-radius: 50%;
}
#badge:hover { transform: scale(1.1);
}
.left { position: absolute; left: 33.33333333px;
}
.right { position: absolute; right: 33.33333333px;
}
.gem-top { bottom: 110px; height: 0; width: 50px; border-bottom: 33.33333333px solid; border-left: 25px solid transparent; border-right: 25px solid transparent;
}
.gem-top-left { bottom: 110px; height: 0; width: 50px; border-bottom: 33.33333333px solid; border-left: 25px solid transparent; border-right: 25px solid transparent; position: absolute; left: 33.33333333px; border-bottom-color: rgba(255, 169, 158, 0.7);
}
.gem-top-right { bottom: 110px; height: 0; width: 50px; border-bottom: 33.33333333px solid; border-left: 25px solid transparent; border-right: 25px solid transparent; position: absolute; right: 33.33333333px; border-bottom-color: rgba(224, 36, 58, 0.7);
}
.gem-bottom { top: 90px; width: 0; height: 0; border-top: 80px solid;
}
.gem-bottom-left { top: 90px; width: 0; height: 0; border-top: 80px solid; position: absolute; left: 33.33333333px; border-left: 66.66666667px solid transparent; border-right: 33.33333333px solid transparent; border-top-color: rgba(240, 192, 192, 0.7);
}
.gem-bottom-right { top: 90px; width: 0; height: 0; border-top: 80px solid; position: absolute; right: 33.33333333px; border-left: 33.33333333px solid transparent; border-right: 66.66666667px solid transparent; border-top-color: rgba(255, 118, 63, 0.7);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> Rebound of<br /><a href="http://dribbble.com/shots/1178230-Sticker-Rebound">dribbble shot</a><br />by<br /><a href="http://dribbble.com/iljamiskov">Ilja Miskov</a>
<div id="badge"> <div class="gem-top-right"></div> <div class="gem-top-left"></div> <div class="gem-bottom-right"></div> <div class="gem-bottom-left"></div>
</div>
</body>
</html>

CSS Gem Badge - Script Codes CSS Codes

body { background: #d0d0d0; font-family: "Raleway", sans-serif; font-size: 18pt; color: #424242;
}
a { color: #ea4c89;
}
#badge { -webkit-backface-visibility: hidden; transition: transform 0.2s ease-in-out; position: absolute; left: 50%; top: 50%; margin: -100px; width: 200px; height: 200px; background: #e0e0e0; border-radius: 50%;
}
#badge:hover { transform: scale(1.1);
}
.left { position: absolute; left: 33.33333333px;
}
.right { position: absolute; right: 33.33333333px;
}
.gem-top { bottom: 110px; height: 0; width: 50px; border-bottom: 33.33333333px solid; border-left: 25px solid transparent; border-right: 25px solid transparent;
}
.gem-top-left { bottom: 110px; height: 0; width: 50px; border-bottom: 33.33333333px solid; border-left: 25px solid transparent; border-right: 25px solid transparent; position: absolute; left: 33.33333333px; border-bottom-color: rgba(255, 169, 158, 0.7);
}
.gem-top-right { bottom: 110px; height: 0; width: 50px; border-bottom: 33.33333333px solid; border-left: 25px solid transparent; border-right: 25px solid transparent; position: absolute; right: 33.33333333px; border-bottom-color: rgba(224, 36, 58, 0.7);
}
.gem-bottom { top: 90px; width: 0; height: 0; border-top: 80px solid;
}
.gem-bottom-left { top: 90px; width: 0; height: 0; border-top: 80px solid; position: absolute; left: 33.33333333px; border-left: 66.66666667px solid transparent; border-right: 33.33333333px solid transparent; border-top-color: rgba(240, 192, 192, 0.7);
}
.gem-bottom-right { top: 90px; width: 0; height: 0; border-top: 80px solid; position: absolute; right: 33.33333333px; border-left: 33.33333333px solid transparent; border-right: 66.66666667px solid transparent; border-top-color: rgba(255, 118, 63, 0.7);
}
CSS Gem Badge - Script Codes
CSS Gem Badge - Script Codes
Home Page Home
Developer Adam Orchard
Username orchard
Uploaded December 02, 2022
Rating 3.5
Size 3,335 Kb
Views 16,192
Do you need developer help for CSS Gem Badge?

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!

Adam Orchard (orchard) Script Codes
Create amazing video scripts 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!