CSS Gem Badge
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 - 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);
}
Developer | Adam Orchard |
Username | orchard |
Uploaded | December 02, 2022 |
Rating | 3.5 |
Size | 3,335 Kb |
Views | 16,192 |
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!
Name | Size |
WIP | 2,835 Kb |
CSS Triangle Animation | 2,638 Kb |
Tree growth tests | 3,818 Kb |
Parallax Clouds | 7,285 Kb |
CSS Moon - dribbble rebound | 2,929 Kb |
Animated Burgers | 3,329 Kb |
A Pen by Adam Orchard | 1,983 Kb |
Burger with Label | 3,346 Kb |
Colour Themes | 2,662 Kb |
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!
Name | Username | Size |
A Pen by Miro Olma | Programiro | 2,342 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
3D-box | Parthviroja | 2,346 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Css or Czz.. | Judag | 4,111 Kb |
Easing | GreenSock | 2,043 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
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!