This post contains a total of 10+ CSS Badge Examples with Source Code. All these Badges are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Badge Examples
1. GDPR badges
Made by Berkmans Johnny. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<style>
:root{
--color-primary: #214fe0;
--color-dark: #1d1f20;
--color-light: #f4f4f4;
--color-shade: #bbb;
--badge-size: 250px;
--lock-color: #fff;
--lock-width: 30px;
--lock-stroke: 2.5px;
}
::selection{
background:
}
body{
background-color: var(--color-light);
}
main{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.badge-icon,
.badge-text{
padding:1.5rem;
float:left;
-webkit-box-flex:1;
flex:1
}
.badge{
display:flex;
margin-bottom: 1.5rem;
margin-right: 1.5rem;
color: var(--color-light);
min-width: var(--badge-size);
border-radius: 5px;
box-shadow: 0px 0px 60px var(--color-shade);
overflow: hidden;
}
.badge-icon{
background: url('https://upload.wikimedia.org/wikipedia/commons/9/93/European_stars.svg') var(--color-primary) no-repeat center center;
background-size: contain;
max-width: calc( var(--badge-size) / 5);
}
.badge-text{
font: normal small-caps normal 16px/1.5 Arial, Helvetica, sans-serif;
text-transform: uppercase;
line-height: 1;
text-align: left;
}
.badge[data-color=""] .badge-text,
.badge[data-color="default"] .badge-text{
color: var(--color-light);
background-color: var(--color-primary);
}
.badge[data-color="light"] .badge-text{
color: var(--color-dark);
background-color: var(--color-light);
}
.badge[data-color="dark"] .badge-text{
color: var(--color-light);
background-color: var(--color-dark);
}
/*The body of the lock*/
.lock {
display:block;
width: var(--lock-width);
height: calc(var(--lock-width) * 0.75);
top: 50%; left:50%;
transform: translate(-50%,-50%);
border: var(--lock-stroke) solid var(--lock-color);
border-radius: 5px;
position: relative;
transition: all 0.1s ease-in-out;
}
/*The keyhole*/
.lock:after {
content: "";
display: block;
background: var(--lock-color);
width: var(--lock-stroke);
height: calc(var(--lock-stroke) * 3);
position: absolute;
top: 50%; left: 50%;
transform: translate(-50% , -50%);
transition: all 0.1s ease-in-out;
}
/*The arm of the lock*/
.lock:before {
content: "";
display: block;
width: calc(var(--lock-width) / 2);
height: calc(var(--lock-width) / 3);
position: absolute;
bottom: 100%; left: 50%;
transform: translateX(-50%);
border: var(--lock-stroke) solid var(--lock-color);
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom: 0;
}
</style>
</head>
<body>
<main>
<div class="badge" data-color="default">
<div class="badge-icon">
<span class="lock"></span>
</div>
<div class="badge-text">
<span><b>gdpr</b></span><br>
<span>compliant</span>
</div>
</div>
<div class="badge" data-color="dark">
<div class="badge-icon">
<span class="lock"></span>
</div>
<div class="badge-text">
<span><b>gdpr</b></span><br>
<span>ready</span>
</div>
</div>
<div class="badge" data-color="light">
<div class="badge-icon">
<span class="lock"></span>
</div>
<div class="badge-text">
<span><b>gdpr</b></span><br>
<span>progress</span>
</div>
</div>
</main>
</body>
</html>2. Title badges
Made by daniesy. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
.badge {
position: relative;
width: 216px;
display: inline-block;
margin: 40px;
}
.badge .title {
font-family: "Montserrat", sans-serif;
font-weight: bold;
font-size: 1.7em;
position: absolute;
top: -28px;
border-radius: 8px 8px 0 0;
text-align: center;
width: 100%;
background: red;
padding: 20px 0;
}
.badge .subtitle {
position: absolute;
font-family: "Fjalla One", sans-serif;
font-size: 1.8em;
width: 100%;
text-align: center;
color: white;
position: absolute;
top: 100px;
}
.badge .subtitle:after {
content: "★ ★ ★";
display: block;
font-size: .4em;
position: relative;
margin: 15px 0 0;
transition: all .3s;
}
.badge:hover .subtitle:after {
word-spacing: 30px;
}
.red .title {
background: #DC514E;
}
.red .subtitle:after {
color: #DC514E;
}
.green .title {
background: #2ecc71;
}
.green .subtitle:after {
color: #2ecc71;
}
.gray .title {
background: #95a5a6;
}
.gray .subtitle:after {
color: #95a5a6;
}
.yellow .title {
background: #f1c40f;
}
.yellow .subtitle:after {
color: #f1c40f;
}
.blue .title {
background: #3498db;
}
.blue .subtitle:after {
color: #3498db;
}
</style>
</head>
<body>
<div class="badge red">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169 c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
<p class="title">BRUTEFORCE EXPERT</p>
<p class="subtitle">CTF 365</p>
</div>
<div class="badge green">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169 c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
<p class="title">SQLi<br/>MASTER</p>
<p class="subtitle">CTF 365</p>
</div>
<div class="badge gray">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169 c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
<p class="title">SNIFFER COMMANDER</p>
<p class="subtitle">CTF 365</p>
</div>
<div class="badge yellow">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169 c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
<p class="title">SCRIPT<br/>EXPERT</p>
<p class="subtitle">CTF 365</p>
</div>
<div class="badge blue">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169 c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
<p class="title">CRYPTO MASTER</p>
<p class="subtitle">CTF 365</p>
</div>
</body>
</html>3. CSS Badge Promotion
Made by Hangs Breaker. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body{background:#ecf0f1;}
a{text-decoration:none;}
.firstLine {
font-size: 24px;
font-weight: 300;
}.secondLine {
font-size: 36px;
line-height: 36px;
font-weight: 600;
} .thirdLine {
font-size: 26px;
line-height: 32px;
font-weight: 300;
}.fourthLine {
font-size: 12px;
font-weight: 300;
position: relative;
top: -10px;
}
.badges {
position:relative;
margin:140px auto;
width:200px;
height:200px;
background:#552F87;
border-radius:100%;
color: #FFF;
line-height: 25px;
text-align: center;
text-transform: uppercase;
font-family: "Open Sans",sans-serif;
-webkit-animation: 3s ease-in-out 0s normal none infinite running swing;
-moz-animation: 3s ease-in-out 0s normal none infinite running swing;
-o-animation: 3s ease-in-out 0s normal none infinite running swing;
animation: 3s ease-in-out 0s normal none infinite running swing;
-webkit-transform-origin: 100px -71px;
-moz-transform-origin: 100px -71px;
-o-transform-origin: 100px -71px;
transform-origin: 100px -71px;
}
.badges:before{
content:'';
position:absolute;
top:90px;left:90px;
width:20px;height:20px;
border-radius:100%;
-webkit-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
-20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
-56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
-71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
-moz-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
-20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
-56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
-71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
-o-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
-20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
-56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
-71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
-20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
-56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
-71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
}
.badges:after{
content:'';
position:absolute;
top:-70px;left:99px;
width:2px;height:81px;
border-radius:0%;
background:#000;
}
@-webkit-keyframes swing{
0%{-webkit-transform:rotate(5deg);}
50%{-webkit-transform:rotate(-5deg);}
100%{-webkit-transform:rotate(5deg);}
}
@-moz-keyframes swing{
0%{-moz-transform:rotate(5deg);}
50%{-moz-transform:rotate(-5deg);}
100%{-moz-transform:rotate(5deg);}
}
@-o-keyframes swing{
0%{-o-transform:rotate(5deg);}
50%{-o-transform:rotate(-5deg);}
100%{-o-transform:rotate(5deg);}
}
@keyframes swing{
0%{transform:rotate(5deg);}
50%{transform:rotate(-5deg);}
100%{transform:rotate(5deg);}
}
</style>
</head>
<body>
<a href="#">
<div class="badges"><br>
<p>
<span class="firstLine">GET UP TO</span><br>
<span class="secondLine">$10,000</span><br>
<span class="thirdLine">PER MONTH</span><br>
<span class="fourthLine">AS A POPULAR INVESTOR</span>
</p>
</div>
</a>
</body>
</html>4. Pokemon badges in HTML/CSS
Made by Kevin Jannis. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import "https://fonts.googleapis.com/css?family=Lato";
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
*:before,
*:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
body {
padding: 25px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
background: #454545;
}
#wrapper {
display: table;
table-layout: fixed;
width: 960px;
height: 560px;
margin: 40px auto;
}
#boulder-badge,
#cascade-badge,
#thunder-badge,
#rainbow-badge,
#soul-badge,
#marsh-badge,
#volcano-badge,
#earth-badge {
display: table-cell;
vertical-align: bottom;
text-align: center;
width: 240px;
height: 240px;
padding: 20px;
}
#boulder-badge .badge,
#cascade-badge .badge,
#thunder-badge .badge,
#rainbow-badge .badge,
#soul-badge .badge,
#marsh-badge .badge,
#volcano-badge .badge,
#earth-badge .badge {
display: inline-block;
}
#boulder-badge h1,
#cascade-badge h1,
#thunder-badge h1,
#rainbow-badge h1,
#soul-badge h1,
#marsh-badge h1,
#volcano-badge h1,
#earth-badge h1 {
font-family: Lato, sans-serif;
font-size: 1em;
text-transform: uppercase;
color: white;
margin-top: 30px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
#boulder-badge {
background: #2d3e50;
}
#boulder-badge .badge {
position: relative;
width: 180px;
height: 180px;
}
#boulder-badge .badge .part,
#boulder-badge .badge .part:before,
#boulder-badge .badge .part:after {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#boulder-badge .badge .part {
-webkit-transform-origin: center center 0;
-moz-transform-origin: center center 0;
-ms-transform-origin: center center 0;
-o-transform-origin: center center 0;
transform-origin: center center 0;
top: 0;
left: 50%;
margin-left: -38px;
border-width: 90px 38px 90px 38px;
}
#boulder-badge .badge .part:before {
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
transform: rotate(0.01deg);
/* Jagged edge fix */
content: " ";
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -26px;
border-width: 60px 26px 60px 26px;
z-index: 10;
}
#boulder-badge .badge .part:after {
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
transform: rotate(0.01deg);
content: " ";
top: 50%;
left: 50%;
margin-top: -39px;
margin-left: -17px;
border-width: 39px 17px 39px 17px;
z-index: 20;
}
#boulder-badge .badge .part-1 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
border-top-color: #9f9d9e;
border-bottom-color: #646263;
z-index: 50;
}
#boulder-badge .badge .part-1:before {
border-top-color: #878586;
border-bottom-color: #595556;
}
#boulder-badge .badge .part-1:after {
border-top-color: #8d8d8d;
border-bottom-color: #7f7f7f;
}
#boulder-badge .badge .part-2 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-top-color: #858182;
border-bottom-color: #898788;
z-index: 40;
}
#boulder-badge .badge .part-2:before {
border-top-color: #706e6f;
border-bottom-color: #777576;
}
#boulder-badge .badge .part-2:after {
border-top-color: #8d8d8d;
border-bottom-color: #8d8d8d;
}
#boulder-badge .badge .part-3 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
border-top-color: #676364;
border-bottom-color: #979596;
z-index: 30;
}
#boulder-badge .badge .part-3:before {
border-top-color: #595556;
border-bottom-color: #838182;
}
#boulder-badge .badge .part-3:after {
border-top-color: #7f7f7f;
border-bottom-color: #8d8d8d;
}
#boulder-badge .badge .part-4 {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
border-top-color: #615d5e;
border-bottom-color: #a5a3a4;
z-index: 20;
}
#boulder-badge .badge .part-4:before {
border-top-color: #535152;
border-bottom-color: #878586;
}
#boulder-badge .badge .part-4:after {
border-top-color: #7f7f7f;
border-bottom-color: #8d8d8d;
}
#boulder-badge .badge .part-shade {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 13px;
margin-left: -6px;
border-left-width: 0;
border-top-color: #767475;
border-bottom-color: #7b797a;
z-index: 100;
}
#boulder-badge .badge .part-shade:before {
margin-left: 0;
border-left-width: 0;
border-top-color: #656364;
border-bottom-color: #6b696a;
}
#boulder-badge .badge .part-shade:after {
margin-left: 0;
border-left-width: 0;
border-top-color: #7f7f7f;
border-bottom-color: #7f7f7f;
}
#cascade-badge {
background: #474749;
}
#cascade-badge .badge {
position: relative;
width: 145px;
height: 200px;
}
#cascade-badge .badge .part {
position: absolute;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#cascade-badge .badge .part-1,
#cascade-badge .badge .part-2,
#cascade-badge .badge .part-3,
#cascade-badge .badge .part-4 {
left: 50%;
}
#cascade-badge .badge .part-5,
#cascade-badge .badge .part-6,
#cascade-badge .badge .part-7,
#cascade-badge .badge .part-8 {
right: 50%;
}
#cascade-badge .badge .part-1 {
border-width: 60px 0 40px 37px;
border-left-color: #39a8d5;
}
#cascade-badge .badge .part-2 {
-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-ms-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
top: 61px;
margin-left: 4px;
border-width: 0 48px 48px 27px;
border-bottom-color: #25a2d2;
}
#cascade-badge .badge .part-3 {
-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-ms-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
top: 107px;
margin-left: -9px;
border-width: 63px 7px 0 69px;
border-top-color: #0d9bcd;
}
#cascade-badge .badge .part-4 {
top: 100px;
border-width: 75px 0 24px 52px;
border-left-color: #0697c9;
}
#cascade-badge .badge .part-5 {
top: 100px;
border-width: 75px 52px 24px 0;
border-right-color: #25a2d2;
}
#cascade-badge .badge .part-6 {
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-ms-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
transform: rotate(-13deg);
top: 107px;
margin-right: -9px;
border-width: 63px 69px 0 7px;
border-top-color: #45acd9;
}
#cascade-badge .badge .part-7 {
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-ms-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
transform: rotate(-13deg);
top: 61px;
margin-right: 4px;
border-width: 0 27px 48px 48px;
border-bottom-color: #55b0dd;
}
#cascade-badge .badge .part-8 {
border-width: 60px 37px 40px 0;
border-right-color: #5db4df;
}
#thunder-badge {
background: #525c65;
}
#thunder-badge .badge {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 68px;
border-color: #eac830 #ebae2c #ebae2c #eac830;
margin-bottom: 27px;
}
#thunder-badge .badge:before, #thunder-badge .badge:after {
-webkit-transform-origin: center right 0;
-moz-transform-origin: center right 0;
-ms-transform-origin: center right 0;
-o-transform-origin: center right 0;
transform-origin: center right 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: " ";
position: absolute;
top: -68px;
left: -68px;
width: 68px;
height: 136px;
background: #eac830;
z-index: 10;
}
#thunder-badge .badge:after {
-webkit-transform-origin: center left 0;
-moz-transform-origin: center left 0;
-ms-transform-origin: center left 0;
-o-transform-origin: center left 0;
transform-origin: center left 0;
left: 0;
background: #ebae2c;
}
#thunder-badge .badge .part,
#thunder-badge .badge .part:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#thunder-badge .badge .part {
-webkit-transform-origin: center center 0;
-moz-transform-origin: center center 0;
-ms-transform-origin: center center 0;
-o-transform-origin: center center 0;
transform-origin: center center 0;
top: -60px;
left: 50%;
margin-left: -25px;
border-width: 60px 25px 60px 25px;
z-index: 20;
}
#thunder-badge .badge .part:before {
-webkit-transform: rotate(0.01deg);
-moz-transform: rotate(0.01deg);
-ms-transform: rotate(0.01deg);
-o-transform: rotate(0.01deg);
transform: rotate(0.01deg);
/* Jagged edge fix */
content: " ";
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -17px;
border-width: 40px 17px 40px 17px;
border-top-color: #e64d2d;
border-bottom-color: #e64d2d;
z-index: 30;
}
#thunder-badge .badge .part-1 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
border-top-color: #da492c;
border-bottom-color: #ac3518;
z-index: 50;
}
#thunder-badge .badge .part-2 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-top-color: #b33921;
border-bottom-color: #be3e25;
z-index: 40;
}
#thunder-badge .badge .part-3 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
border-top-color: #ac3518;
border-bottom-color: #d2452a;
z-index: 30;
}
#thunder-badge .badge .part-4 {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
border-top-color: #a63016;
border-bottom-color: #da492c;
z-index: 20;
}
#thunder-badge .badge .part-shade {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 9px;
margin-left: -4px;
border-left-width: 0;
border-top-color: #bf3b1f;
border-bottom-color: #c93f22;
z-index: 100;
}
#thunder-badge .badge .part-shade:before {
margin-left: 0;
border-left-width: 0;
border-top-color: #e64d2d;
border-bottom-color: #e64d2d;
}
#rainbow-badge {
background: #474749;
}
#rainbow-badge .badge {
position: relative;
height: 180px;
width: 180px;
}
#rainbow-badge .badge:before {
content: " ";
position: absolute;
background: #bdb6b4;
width: 0;
height: 0;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
border-style: solid;
border-width: 16px;
border-color: #c6bebc #beb6b4 #beb6b4 #c6bebc;
z-index: 50;
}
#rainbow-badge .badge .part-leaf {
-webkit-transform-origin: center bottom 0;
-moz-transform-origin: center bottom 0;
-ms-transform-origin: center bottom 0;
-o-transform-origin: center bottom 0;
transform-origin: center bottom 0;
position: absolute;
top: 0;
left: 50%;
height: 90px;
width: 0;
margin-left: -13px;
border-style: solid;
border-color: transparent;
border-color: transparent;
border-width: 0 13px 0 13px;
z-index: 10;
}
#rainbow-badge .badge .part-leaf:before, #rainbow-badge .badge .part-leaf:after {
content: " ";
position: absolute;
top: -1px;
border-style: solid;
border-color: transparent;
border-color: transparent;
}
#rainbow-badge .badge .part-leaf:before {
right: 12px;
border-width: 23px 17px 40px 0;
}
#rainbow-badge .badge .part-leaf:after {
left: 12px;
border-width: 23px 0 40px 17px;
}
#rainbow-badge .badge .part-leaf.part-1 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
border-left-color: #e2004b;
border-right-color: #d60048;
}
#rainbow-badge .badge .part-leaf.part-1:before {
border-right-color: #e2004b;
}
#rainbow-badge .badge .part-leaf.part-1:after {
border-left-color: #d60048;
}
#rainbow-badge .badge .part-leaf.part-2 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-left-color: #e64d2d;
border-right-color: #d2452a;
}
#rainbow-badge .badge .part-leaf.part-2:before {
border-right-color: #e64d2d;
}
#rainbow-badge .badge .part-leaf.part-2:after {
border-left-color: #d2452a;
}
#rainbow-badge .badge .part-leaf.part-3 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
border-left-color: #e0bd2d;
border-right-color: #d4b42b;
}
#rainbow-badge .badge .part-leaf.part-3:before {
border-right-color: #e0bd2d;
}
#rainbow-badge .badge .part-leaf.part-3:after {
border-left-color: #d4b42b;
}
#rainbow-badge .badge .part-leaf.part-4 {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
border-left-color: #4e9f5e;
border-right-color: #54b36a;
}
#rainbow-badge .badge .part-leaf.part-4:before {
border-right-color: #4e9f5e;
}
#rainbow-badge .badge .part-leaf.part-4:after {
border-left-color: #54b36a;
}
#rainbow-badge .badge .part-leaf.part-5 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
border-left-color: #399f57;
border-right-color: #3eaa5e;
}
#rainbow-badge .badge .part-leaf.part-5:before {
border-right-color: #399f57;
}
#rainbow-badge .badge .part-leaf.part-5:after {
border-left-color: #3eaa5e;
}
#rainbow-badge .badge .part-leaf.part-6 {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
border-left-color: #67a3c7;
border-right-color: #6eb3de;
}
#rainbow-badge .badge .part-leaf.part-6:before {
border-right-color: #67a3c7;
}
#rainbow-badge .badge .part-leaf.part-6:after {
border-left-color: #6eb3de;
}
#rainbow-badge .badge .part-leaf.part-7 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
border-left-color: #486ba7;
border-right-color: #4d70b3;
}
#rainbow-badge .badge .part-leaf.part-7:before {
border-right-color: #486ba7;
}
#rainbow-badge .badge .part-leaf.part-7:after {
border-left-color: #4d70b3;
}
#rainbow-badge .badge .part-leaf.part-8 {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
border-left-color: #9455a2;
border-right-color: #8b4f9b;
}
#rainbow-badge .badge .part-leaf.part-8:before {
border-right-color: #9455a2;
}
#rainbow-badge .badge .part-leaf.part-8:after {
border-left-color: #8b4f9b;
}
#rainbow-badge .badge .part-inner {
-webkit-transform-origin: center bottom 0;
-moz-transform-origin: center bottom 0;
-ms-transform-origin: center bottom 0;
-o-transform-origin: center bottom 0;
transform-origin: center bottom 0;
position: absolute;
top: 50%;
left: 50%;
height: 35px;
width: 0;
margin-left: -14px;
margin-top: -35px;
border-style: solid;
border-color: transparent;
border-color: transparent;
border-width: 0 14px 0 14px;
z-index: 20;
}
#rainbow-badge .badge .part-inner:before, #rainbow-badge .badge .part-inner:after {
content: " ";
position: absolute;
top: -1px;
border-style: solid;
border-color: transparent;
border-color: transparent;
}
#rainbow-badge .badge .part-inner:before {
right: 13px;
border-width: 16px 10px 10px 0;
}
#rainbow-badge .badge .part-inner:after {
left: 13px;
border-width: 16px 0 10px 10px;
}
#rainbow-badge .badge .part-inner.part-1 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-left-color: #e4d3cf;
border-right-color: #d9c8c4;
}
#rainbow-badge .badge .part-inner.part-1:before {
border-right-color: #e4d3cf;
}
#rainbow-badge .badge .part-inner.part-1:after {
border-left-color: #d9c8c4;
}
#rainbow-badge .badge .part-inner.part-2 {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
border-left-color: #cfbeb8;
border-right-color: #cfbeb8;
}
#rainbow-badge .badge .part-inner.part-2:before {
border-right-color: #cfbeb8;
}
#rainbow-badge .badge .part-inner.part-2:after {
border-left-color: #cfbeb8;
}
#rainbow-badge .badge .part-inner.part-3 {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
border-left-color: #e6d4d3;
border-right-color: #efe2db;
}
#rainbow-badge .badge .part-inner.part-3:before {
border-right-color: #e6d4d3;
}
#rainbow-badge .badge .part-inner.part-3:after {
border-left-color: #efe2db;
}
#rainbow-badge .badge .part-inner.part-4 {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
border-left-color: #fbeee7;
border-right-color: #fbeee7;
}
#rainbow-badge .badge .part-inner.part-4:before {
border-right-color: #fbeee7;
}
#rainbow-badge .badge .part-inner.part-4:after {
border-left-color: #fbeee7;
}
#soul-badge {
background: #2d3e50;
}
#soul-badge .badge {
position: relative;
height: 180px;
width: 180px;
}
#soul-badge .badge .part {
position: absolute;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: transparent;
}
#soul-badge .badge .part-1 {
-webkit-transform: rotate(-62deg);
-moz-transform: rotate(-62deg);
-ms-transform: rotate(-62deg);
-o-transform: rotate(-62deg);
transform: rotate(-62deg);
left: 50%;
margin-top: 31px;
margin-left: -36px;
border-width: 0 41px 27px 50px;
border-bottom-color: #c370a4;
}
#soul-badge .badge .part-2 {
-webkit-transform: rotate(-119deg);
-moz-transform: rotate(-119deg);
-ms-transform: rotate(-119deg);
-o-transform: rotate(-119deg);
transform: rotate(-119deg);
right: 50%;
margin-top: 31px;
margin-right: -36px;
border-width: 27px 41px 0 50px;
border-top-color: #c370a4;
}
#soul-badge .badge .part-3 {
-webkit-transform: rotate(-27deg);
-moz-transform: rotate(-27deg);
-ms-transform: rotate(-27deg);
-o-transform: rotate(-27deg);
transform: rotate(-27deg);
left: 50%;
margin-top: 20px;
margin-left: -18px;
border-width: 0 23px 53px 75px;
border-bottom-color: #b86c9d;
}
#soul-badge .badge .part-4 {
-webkit-transform: rotate(-154deg);
-moz-transform: rotate(-154deg);
-ms-transform: rotate(-154deg);
-o-transform: rotate(-154deg);
transform: rotate(-154deg);
right: 50%;
margin-top: 20px;
margin-right: -18px;
border-width: 53px 23px 0 75px;
border-top-color: #cb76af;
}
#soul-badge .badge .part-5 {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
left: 50%;
margin-top: 44px;
border-width: 0 6px 51px 84px;
border-bottom-color: #aa6091;
}
#soul-badge .badge .part-6 {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
right: 50%;
margin-top: 44px;
border-width: 0 84px 51px 6px;
border-bottom-color: #c370a4;
}
#soul-badge .badge .part-7 {
-webkit-transform: rotate(51deg);
-moz-transform: rotate(51deg);
-ms-transform: rotate(51deg);
-o-transform: rotate(51deg);
transform: rotate(51deg);
left: 50%;
margin-left: 10px;
margin-top: 65px;
border-width: 0 7px 63px 63px;
border-bottom-color: #995681;
}
#soul-badge .badge .part-8 {
-webkit-transform: rotate(-51deg);
-moz-transform: rotate(-51deg);
-ms-transform: rotate(-51deg);
-o-transform: rotate(-51deg);
transform: rotate(-51deg);
right: 50%;
margin-right: 10px;
margin-top: 65px;
border-width: 0 63px 63px 7px;
border-bottom-color: #b86c9d;
}
#soul-badge .badge .part-9 {
top: 50%;
left: 50%;
border-width: 52px 0 45px 44px;
border-left-color: #874d73;
}
#soul-badge .badge .part-10 {
top: 50%;
right: 50%;
border-width: 52px 44px 45px 0;
border-right-color: #b26695;
}
#soul-badge .badge .part-shade {
position: absolute;
top: 50%;
left: 50%;
margin-top: 4px;
margin-left: -3px;
width: 6px;
height: 89px;
background: #4e3145;
z-index: 20;
}
#soul-badge .badge .part-shade:before, #soul-badge .badge .part-shade:after {
content: " ";
position: absolute;
left: -3px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: transparent;
}
#soul-badge .badge .part-shade:before {
top: -7px;
border-width: 0 3px 4px 3px;
border-bottom-color: #4e3145;
}
#soul-badge .badge .part-shade:after {
bottom: -7px;
border-width: 4px 3px 0 3px;
border-top-color: #4e3145;
}
#marsh-badge {
background: #2d3e50;
}
#marsh-badge .badge {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: relative;
width: 180px;
height: 180px;
background: #f0c514;
overflow: hidden;
}
#marsh-badge .badge:before, #marsh-badge .badge:after {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
content: " ";
position: absolute;
top: 0;
left: 0;
height: 180px;
width: 180px;
background: #eeb412;
}
#marsh-badge .badge:before {
margin-left: 70px;
}
#marsh-badge .badge:after {
margin-top: 150px;
}
#marsh-badge .badge .inner {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 25px;
left: 25px;
right: 25px;
bottom: 25px;
background: #f0c514;
border: solid 6px #f59d1f;
overflow: hidden;
z-index: 10;
}
#marsh-badge .badge .inner:before {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
content: " ";
position: absolute;
top: 0;
left: 0;
height: 180px;
width: 180px;
background: #eeb412;
margin: 40px 0 0 10px;
}
#volcano-badge {
background: #474749;
}
#volcano-badge .badge {
position: relative;
width: 165px;
height: 190px;
}
#volcano-badge .badge .part-outer {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-outer.part-1 {
top: 0;
left: 50%;
border-width: 51px 0 37px 39px;
border-left-color: #e01544;
z-index: 2;
}
#volcano-badge .badge .part-outer.part-2 {
top: 0;
right: 50%;
border-width: 51px 39px 37px 0;
border-right-color: #e01544;
z-index: 2;
}
#volcano-badge .badge .part-outer.part-3 {
-webkit-transform: rotate(34deg);
-moz-transform: rotate(34deg);
-ms-transform: rotate(34deg);
-o-transform: rotate(34deg);
transform: rotate(34deg);
top: 0;
left: 50%;
height: 70px;
border-width: 25px 0 18px 48px;
border-left-color: #d61240;
margin: 44px 0 0 30px;
}
#volcano-badge .badge .part-outer.part-3:before, #volcano-badge .badge .part-outer.part-3:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-outer.part-3:before {
height: 50px;
border-width: 12px 7px 0 0;
border-right-color: #d61240;
margin: -16px 0 0 -52px;
}
#volcano-badge .badge .part-outer.part-3:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
width: 20px;
height: 60px;
border: none;
background: #d61240;
margin: -6px 0 0 -68px;
}
#volcano-badge .badge .part-outer.part-4 {
-webkit-transform: rotate(-34deg);
-moz-transform: rotate(-34deg);
-ms-transform: rotate(-34deg);
-o-transform: rotate(-34deg);
transform: rotate(-34deg);
top: 0;
right: 50%;
height: 70px;
border-width: 25px 48px 18px 0;
border-right-color: #ec1747;
margin: 45px 30px 0 0;
}
#volcano-badge .badge .part-outer.part-4:before, #volcano-badge .badge .part-outer.part-4:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-outer.part-4:before {
height: 50px;
border-width: 12px 0 0 7px;
border-left-color: #ec1747;
margin: -14px 0 0 47px;
}
#volcano-badge .badge .part-outer.part-4:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
width: 20px;
height: 60px;
border: none;
background: #ec1747;
margin: -6px 0 0 45px;
}
#volcano-badge .badge .part-outer.part-5 {
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
top: 0;
left: 50%;
margin: 95px 0 0 -4px;
border-width: 0 17px 13px 68px;
border-bottom-color: #af0931;
z-index: 2;
}
#volcano-badge .badge .part-outer.part-6 {
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
top: 0;
right: 50%;
margin: 95px -4px 0 0;
border-width: 0 68px 13px 17px;
border-bottom-color: #d61240;
z-index: 2;
}
#volcano-badge .badge .part-outer.part-7 {
-webkit-transform: rotate(49deg);
-moz-transform: rotate(49deg);
-ms-transform: rotate(49deg);
-o-transform: rotate(49deg);
transform: rotate(49deg);
top: 0;
left: 50%;
margin: 102px 0 0 0;
border-width: 0 24px 31px 70px;
border-bottom-color: #af0931;
z-index: 2;
}
#volcano-badge .badge .part-outer.part-8 {
-webkit-transform: rotate(-49deg);
-moz-transform: rotate(-49deg);
-ms-transform: rotate(-49deg);
-o-transform: rotate(-49deg);
transform: rotate(-49deg);
top: 0;
right: 50%;
margin: 102px 0 0 0;
border-width: 0 70px 31px 24px;
border-bottom-color: #d61240;
z-index: 2;
}
#volcano-badge .badge .part-outer.part-9 {
top: 88px;
left: 50%;
border-width: 73px 0 38px 67px;
border-left-color: #9d0329;
z-index: 2;
}
#volcano-badge .badge .part-outer.part-10 {
top: 88px;
right: 50%;
border-width: 73px 67px 38px 0;
border-right-color: #cd123d;
z-index: 2;
}
#volcano-badge .badge .part-inner {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
z-index: 5;
}
#volcano-badge .badge .part-inner.part-1 {
top: 60px;
left: 50%;
border-width: 24px 0 18px 17px;
border-left-color: #e6bc12;
z-index: 10;
}
#volcano-badge .badge .part-inner.part-2 {
top: 60px;
right: 50%;
border-width: 24px 17px 18px 0;
border-right-color: #e6bc12;
z-index: 10;
}
#volcano-badge .badge .part-inner.part-3 {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
top: 0;
left: 50%;
height: 35px;
border-width: 12px 0 9px 22px;
border-left-color: #d9b312;
margin: 79px 0 0 13px;
z-index: 5;
}
#volcano-badge .badge .part-inner.part-3:before, #volcano-badge .badge .part-inner.part-3:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-inner.part-3:before {
height: 32px;
border-width: 6px 4px 0 0;
border-right-color: #d9b312;
margin: -6px 0 0 -25px;
}
#volcano-badge .badge .part-inner.part-3:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
width: 10px;
height: 30px;
border: none;
background: #d9b312;
margin: 2px 0 0 -28px;
}
#volcano-badge .badge .part-inner.part-4 {
-webkit-transform: rotate(-37deg);
-moz-transform: rotate(-37deg);
-ms-transform: rotate(-37deg);
-o-transform: rotate(-37deg);
transform: rotate(-37deg);
top: 0;
right: 50%;
height: 35px;
border-width: 12px 22px 9px 0;
border-right-color: #f0c514;
margin: 78px 13px 0 0;
}
#volcano-badge .badge .part-inner.part-4:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#volcano-badge .badge .part-inner.part-4:before {
height: 32px;
border-width: 12px 0 0 7px;
border-left-color: #f0c514;
margin: -7px 0 0 21px;
}
#volcano-badge .badge .part-inner.part-5 {
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
top: 0;
left: 50%;
margin: 102px 0 0 -4px;
border-width: 0 7px 6px 34px;
border-bottom-color: #b2910e;
z-index: 10;
}
#volcano-badge .badge .part-inner.part-6 {
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
top: 0;
right: 50%;
margin: 102px -4px 0 0;
border-width: 0 34px 6px 7px;
border-bottom-color: #d9b312;
z-index: 10;
}
#volcano-badge .badge .part-inner.part-7 {
-webkit-transform: rotate(43deg);
-moz-transform: rotate(43deg);
-ms-transform: rotate(43deg);
-o-transform: rotate(43deg);
transform: rotate(43deg);
top: 0;
left: 50%;
margin: 102px 0 0 -1px;
border-width: 0 7px 16px 34px;
border-bottom-color: #b2910e;
z-index: 10;
}
#volcano-badge .badge .part-inner.part-8 {
-webkit-transform: rotate(-43deg);
-moz-transform: rotate(-43deg);
-ms-transform: rotate(-43deg);
-o-transform: rotate(-43deg);
transform: rotate(-43deg);
top: 0;
right: 50%;
margin: 102px -1px 0 0;
border-width: 0 34px 16px 7px;
border-bottom-color: #d9b312;
z-index: 10;
}
#volcano-badge .badge .part-inner.part-9 {
top: 102px;
left: 50%;
border-width: 28px 0 16px 30px;
border-left-color: #9e8006;
z-index: 10;
}
#volcano-badge .badge .part-inner.part-10 {
top: 102px;
right: 50%;
border-width: 28px 30px 16px 0;
border-right-color: #cfaa13;
z-index: 10;
}
#earth-badge {
background: #474749;
}
#earth-badge .badge {
position: relative;
height: 170px;
width: 170px;
}
#earth-badge .badge .part-leaf {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-leaf.part-top, #earth-badge .badge .part-leaf.part-1, #earth-badge .badge .part-leaf.part-2, #earth-badge .badge .part-leaf.part-3, #earth-badge .badge .part-leaf.part-4, #earth-badge .badge .part-leaf.part-5, #earth-badge .badge .part-leaf.part-6 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border: none;
right: 0;
top: 0;
margin: 7px 7px 0 0;
}
#earth-badge .badge .part-leaf.part-top:before, #earth-badge .badge .part-leaf.part-top:after, #earth-badge .badge .part-leaf.part-1:before, #earth-badge .badge .part-leaf.part-1:after, #earth-badge .badge .part-leaf.part-2:before, #earth-badge .badge .part-leaf.part-2:after, #earth-badge .badge .part-leaf.part-3:before, #earth-badge .badge .part-leaf.part-3:after, #earth-badge .badge .part-leaf.part-4:before, #earth-badge .badge .part-leaf.part-4:after, #earth-badge .badge .part-leaf.part-5:before, #earth-badge .badge .part-leaf.part-5:after, #earth-badge .badge .part-leaf.part-6:before, #earth-badge .badge .part-leaf.part-6:after {
content: " ";
position: absolute;
width: 0;
height: 29px;
top: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-leaf.part-top:before, #earth-badge .badge .part-leaf.part-1:before, #earth-badge .badge .part-leaf.part-2:before, #earth-badge .badge .part-leaf.part-3:before, #earth-badge .badge .part-leaf.part-4:before, #earth-badge .badge .part-leaf.part-5:before, #earth-badge .badge .part-leaf.part-6:before {
right: 0;
margin-right: -1px;
border-width: 15px 25px 15px 0;
border-right-color: #4fb96e;
}
#earth-badge .badge .part-leaf.part-top:after, #earth-badge .badge .part-leaf.part-1:after, #earth-badge .badge .part-leaf.part-2:after, #earth-badge .badge .part-leaf.part-3:after, #earth-badge .badge .part-leaf.part-4:after, #earth-badge .badge .part-leaf.part-5:after, #earth-badge .badge .part-leaf.part-6:after {
left: 0;
border-width: 15px 0 15px 25px;
border-left-color: #3c9255;
}
#earth-badge .badge .part-leaf.part-1 {
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-ms-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
transform: rotate(-13deg);
margin: 5px 75px 0 0;
}
#earth-badge .badge .part-leaf.part-1:before, #earth-badge .badge .part-leaf.part-1:after {
height: 38px;
}
#earth-badge .badge .part-leaf.part-1:before {
border-width: 10px 17px 10px 0;
border-right-color: #4bb168;
}
#earth-badge .badge .part-leaf.part-1:after {
border-width: 10px 0 10px 17px;
border-left-color: #4bb168;
}
#earth-badge .badge .part-leaf.part-2 {
-webkit-transform: rotate(106deg);
-moz-transform: rotate(106deg);
-ms-transform: rotate(106deg);
-o-transform: rotate(106deg);
transform: rotate(106deg);
margin: 76px 6px 0 0;
}
#earth-badge .badge .part-leaf.part-2:before, #earth-badge .badge .part-leaf.part-2:after {
height: 38px;
}
#earth-badge .badge .part-leaf.part-2:before {
border-width: 10px 17px 10px 0;
border-right-color: #398f52;
}
#earth-badge .badge .part-leaf.part-2:after {
border-width: 10px 0 10px 17px;
border-left-color: #398f52;
}
#earth-badge .badge .part-leaf.part-3 {
-webkit-transform: rotate(-14deg);
-moz-transform: rotate(-14deg);
-ms-transform: rotate(-14deg);
-o-transform: rotate(-14deg);
transform: rotate(-14deg);
margin: 35px 100px 0 0;
}
#earth-badge .badge .part-leaf.part-3:before, #earth-badge .badge .part-leaf.part-3:after {
height: 38px;
}
#earth-badge .badge .part-leaf.part-3:before {
border-width: 9px 16px 9px 0;
border-right-color: #46a060;
}
#earth-badge .badge .part-leaf.part-3:after {
border-width: 9px 0 9px 16px;
border-left-color: #46a060;
}
#earth-badge .badge .part-leaf.part-4 {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
margin: 100px 37px 0 0;
}
#earth-badge .badge .part-leaf.part-4:before, #earth-badge .badge .part-leaf.part-4:after {
height: 38px;
}
#earth-badge .badge .part-leaf.part-4:before {
border-width: 9px 16px 9px 0;
border-right-color: #338249;
}
#earth-badge .badge .part-leaf.part-4:after {
border-width: 9px 0 9px 16px;
border-left-color: #338249;
}
#earth-badge .badge .part-leaf.part-5 {
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
margin: 65px 121px 0 0;
}
#earth-badge .badge .part-leaf.part-5:before, #earth-badge .badge .part-leaf.part-5:after {
height: 19px;
}
#earth-badge .badge .part-leaf.part-5:before {
border-width: 9px 16px 9px 0;
border-right-color: #3a9256;
}
#earth-badge .badge .part-leaf.part-5:after {
border-width: 5px 0 9px 13px;
border-left-color: #3a9256;
}
#earth-badge .badge .part-leaf.part-6 {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
margin: 120px 64px 0 0;
}
#earth-badge .badge .part-leaf.part-6:before, #earth-badge .badge .part-leaf.part-6:after {
height: 19px;
}
#earth-badge .badge .part-leaf.part-6:before {
border-width: 5px 13px 9px 0;
border-right-color: #3a9256;
}
#earth-badge .badge .part-leaf.part-6:after {
border-width: 9px 0 9px 16px;
border-left-color: #3a9256;
}
#earth-badge .badge .part-center.part-handle {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 122px;
right: 124px;
}
#earth-badge .badge .part-center.part-handle:before, #earth-badge .badge .part-center.part-handle:after {
content: " ";
position: absolute;
width: 0;
height: 65px;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-handle:before {
left: 0;
margin-left: -7px;
border-right-color: #94b464;
border-right-width: 5px;
}
#earth-badge .badge .part-center.part-handle:after {
left: 0;
border-left-color: #84a35b;
border-left-width: 5px;
}
#earth-badge .badge .part-center.part-1-left, #earth-badge .badge .part-center.part-1-right, #earth-badge .badge .part-center.part-2-left, #earth-badge .badge .part-center.part-2-right, #earth-badge .badge .part-center.part-3-left, #earth-badge .badge .part-center.part-3-right, #earth-badge .badge .part-center.part-4 {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-1-left {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 0;
height: 67px;
top: 0;
right: 0;
margin: 51px 90px 0 0;
border-width: 0 0 0 25px;
border-left-color: #a3c86e;
}
#earth-badge .badge .part-center.part-1-left:before, #earth-badge .badge .part-center.part-1-left:after {
content: " ";
position: absolute;
width: 0;
height: 0;
top: 0;
left: -25px;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-1-left:before {
margin-top: -15px;
border-width: 15px 25px 15px 0;
border-right-color: #abd275;
}
#earth-badge .badge .part-center.part-1-left:after {
margin-top: 52px;
border-width: 15px 25px 15px 0;
border-right-color: #94b564;
}
#earth-badge .badge .part-center.part-1-right {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 0;
height: 67px;
top: 0;
right: 0;
margin: 68px 73px 0 0;
border-width: 0 25px 0 0;
border-right-color: #8dac60;
}
#earth-badge .badge .part-center.part-1-right:before, #earth-badge .badge .part-center.part-1-right:after {
content: " ";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-1-right:before {
margin-top: -15px;
border-width: 15px 0 15px 25px;
border-left-color: #9bc069;
}
#earth-badge .badge .part-center.part-1-right:after {
margin-top: 52px;
border-width: 15px 0 15px 25px;
border-left-color: #84a45b;
}
#earth-badge .badge .part-center.part-2-left {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 0;
height: 45px;
top: 0;
right: 0;
margin: 66px 92px 0 0;
border-width: 0 0 0 12px;
border-left-color: #53af65;
}
#earth-badge .badge .part-center.part-2-left:before, #earth-badge .badge .part-center.part-2-left:after {
content: " ";
position: absolute;
width: 0;
height: 0;
top: 0;
left: -12px;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-2-left:before {
margin-top: -11px;
border-width: 11px 12px 11px 0;
border-right-color: #5fbd71;
}
#earth-badge .badge .part-center.part-2-left:after {
margin-top: 33px;
border-width: 11px 12px 11px 0;
border-right-color: #459055;
}
#earth-badge .badge .part-center.part-2-right {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 0;
height: 45px;
top: 0;
right: 0;
margin: 75px 84px 0 0;
border-width: 0 12px 0 0;
border-right-color: #3f844e;
}
#earth-badge .badge .part-center.part-2-right:before, #earth-badge .badge .part-center.part-2-right:after {
content: " ";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-2-right:before {
margin-top: -11px;
border-width: 11px 0 11px 12px;
border-left-color: #4b9c5f;
}
#earth-badge .badge .part-center.part-2-right:after {
margin-top: 33px;
border-width: 11px 0 11px 12px;
border-left-color: #377744;
}
#earth-badge .badge .part-center.part-3-left {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 0;
height: 29px;
top: 0;
right: 0;
margin: 75px 92px 0 0;
border-width: 0 0 0 6px;
border-left-color: #59b66b;
}
#earth-badge .badge .part-center.part-3-left:before, #earth-badge .badge .part-center.part-3-left:after {
content: " ";
position: absolute;
width: 0;
height: 0;
top: 0;
left: -6px;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-3-left:before {
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-right-color: #54ae65;
}
#earth-badge .badge .part-center.part-3-left:after {
margin-top: 24px;
border-width: 6px 6px 6px 0;
border-right-color: #51a362;
}
#earth-badge .badge .part-center.part-3-right {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 0;
height: 29px;
top: 0;
right: 0;
margin: 79px 88px 0 0;
border-width: 0 6px 0 0;
border-right-color: #4d9f5d;
}
#earth-badge .badge .part-center.part-3-right:before, #earth-badge .badge .part-center.part-3-right:after {
content: " ";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-3-right:before {
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-left-color: #54ae65;
}
#earth-badge .badge .part-center.part-3-right:after {
margin-top: 24px;
border-width: 6px 0 6px 6px;
border-left-color: #489558;
}
#earth-badge .badge .part-center.part-4 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 6px;
height: 27px;
top: 0;
right: 0;
margin: 78px 90px 0 0;
border: none;
background: #3d9257;
}
#earth-badge .badge .part-center.part-4:before, #earth-badge .badge .part-center.part-4:after {
content: " ";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
border-style: solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0);
}
#earth-badge .badge .part-center.part-4:before {
margin-top: -3px;
border-width: 0 3px 3px 3px;
border-bottom-color: #3d9257;
}
#earth-badge .badge .part-center.part-4:after {
top: 100%;
border-width: 3px 3px 0 3px;
border-top-color: #3d9257;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div id="boulder-badge">
<div class="badge">
<div class="part part-1"></div>
<div class="part part-2"></div>
<div class="part part-3"></div>
<div class="part part-4"></div>
<div class="part part-shade"></div>
</div>
<h1>Boulder badge</h1>
</div>
<div id="cascade-badge">
<div class="badge">
<div class="part part-1"></div>
<div class="part part-2"></div>
<div class="part part-3"></div>
<div class="part part-4"></div>
<div class="part part-5"></div>
<div class="part part-6"></div>
<div class="part part-7"></div>
<div class="part part-8"></div>
</div>
<h1>Cascade badge</h1>
</div>
<div id="thunder-badge">
<div class="badge">
<div class="part part-1"></div>
<div class="part part-2"></div>
<div class="part part-3"></div>
<div class="part part-4"></div>
<div class="part part-shade"></div>
</div>
<h1>Thunder badge</h1>
</div>
<div id="rainbow-badge">
<div class="badge">
<div class="part-leaf part-1"></div>
<div class="part-leaf part-2"></div>
<div class="part-leaf part-3"></div>
<div class="part-leaf part-4"></div>
<div class="part-leaf part-5"></div>
<div class="part-leaf part-6"></div>
<div class="part-leaf part-7"></div>
<div class="part-leaf part-8"></div>
<div class="part-inner part-1"></div>
<div class="part-inner part-2"></div>
<div class="part-inner part-3"></div>
<div class="part-inner part-4"></div>
</div>
<h1>Rainbow badge</h1>
</div>
</div>
<div class="row">
<div id="soul-badge">
<div class="badge">
<div class="part part-1"></div>
<div class="part part-2"></div>
<div class="part part-3"></div>
<div class="part part-4"></div>
<div class="part part-5"></div>
<div class="part part-6"></div>
<div class="part part-7"></div>
<div class="part part-8"></div>
<div class="part part-9"></div>
<div class="part part-10"></div>
<div class="part part-shade"></div>
</div>
<h1>Soul badge</h1>
</div>
<div id="marsh-badge">
<div class="badge">
<div class="inner"></div>
</div>
<h1>Marsh badge</h1>
</div>
<div id="volcano-badge">
<div class="badge">
<div class="part-outer part-1"></div>
<div class="part-outer part-2"></div>
<div class="part-outer part-3"></div>
<div class="part-outer part-4"></div>
<div class="part-outer part-5"></div>
<div class="part-outer part-6"></div>
<div class="part-outer part-7"></div>
<div class="part-outer part-8"></div>
<div class="part-outer part-9"></div>
<div class="part-outer part-10"></div>
<div class="part-inner part-1"></div>
<div class="part-inner part-2"></div>
<div class="part-inner part-3"></div>
<div class="part-inner part-4"></div>
<div class="part-inner part-5"></div>
<div class="part-inner part-6"></div>
<div class="part-inner part-7"></div>
<div class="part-inner part-8"></div>
<div class="part-inner part-9"></div>
<div class="part-inner part-10"></div>
</div>
<h1>Volcano badge</h1>
</div>
<div id="earth-badge">
<div class="badge">
<div class="part-leaf part-top"></div>
<div class="part-leaf part-1"></div>
<div class="part-leaf part-2"></div>
<div class="part-leaf part-3"></div>
<div class="part-leaf part-4"></div>
<div class="part-leaf part-5"></div>
<div class="part-leaf part-6"></div>
<div class="part-center part-handle"></div>
<div class="part-center part-1-left"></div>
<div class="part-center part-1-right"></div>
<div class="part-center part-2-left"></div>
<div class="part-center part-2-right"></div>
<div class="part-center part-3-left"></div>
<div class="part-center part-3-right"></div>
<div class="part-center part-4"></div>
</div>
<h1>Earth badge</h1>
</div>
</div>
</body>
</html>5. Develop Denver Badge
Made by Michael Arestad. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html,
body {
background: #f4f4f4;
}
.dvlpdnvr {
position: absolute;
top: 50px;
left: 50%;
margin-left: -150px;
width: 300px;
padding: 158px 0 0 0;
}
.dvlpdnvr h1,
.dvlpdnvr h2 {
position: relative;
width: 222px;
margin: 0 auto;
text-align: center;
color: #6e120f;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}
.dvlpdnvr h1 {
font-size: 19px;
text-transform: uppercase;
border-top: 1px solid #972d29;
padding-top: 18px;
}
.dvlpdnvr h2 {
width: 202px;
padding-bottom: 10px;
font-size: 62px;
border-bottom: 1px solid #972d29;
letter-spacing: 15px;
text-indent: 10px;
}
.shield {
position: absolute;
top: 3px;
left: 2px;
}
.shield-bg {
fill: #bd3735;
}
.shield-border {
fill: #901f20;
}
.logo {
position: absolute;
top: 50px;
left: 108px;
width: 80px;
height: 70px;
font-size: 17px;
color: #561717;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
}
.logo div {
position: absolute;
}
.logo:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 84px;
height: 1px;
background: #561717;
box-shadow: -1px 4px 3px rgba(0, 0, 0, 0.2);
transform: rotate(-45deg) translate(-2px, -1px);
}
.logo:after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 84px;
height: 1px;
background: #561717;
box-shadow: 4px 1px 3px rgba(0, 0, 0, 0.2);
transform: rotate(45deg) translate(-1px, 2px);
}
.d {
top: 26px;
left: 9px;
}
.v {
top: 26px;
left: 58px;
}
.l {
top: 4px;
left: 34px;
}
.p {
bottom: 1px;
left: 34px;
}
.ribbon {
width: 160px;
height: 121px;
position: absolute;
top: 0;
left: 1px;
overflow: hidden;
transform: rotate(-7deg);
}
.mask {
width: 160px;
height: 121px;
position: absolute;
top: 0;
left: -1px;
overflow: hidden;
transform: rotate(7deg);
}
.tickets {
box-sizing: border-box;
position: relative;
padding: 11px 0 11px 21px;
top: 27px;
left: -36px;
width: 173px;
font-weight: bold;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
text-align: left;
transform-origin: center top;
transform: rotate(-40deg);
background-color: #4bcae1;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}
.tickets:before,
.tickets:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.tickets:before {
left: 0;
}
.tickets:after {
right: 0;
}
.header {
content: "";
height: 340px;
background: url(http://developdenver.org/images/header_background.jpg) center center no-repeat;
background-size: cover;
border-bottom: 5px solid #dce2e5;
}
</style>
</head>
<body>
<script type="text/javascript" src="//use.typekit.net/dsj1dpv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<div class="header"></div>
<div class="dvlpdnvr">
<svg class="shield" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="299px" height="334.571px" viewBox="0 0 299 334.571" enable-background="new 0 0 299 334.571" xml:space="preserve">
<g>
<polygon class="shield-bg" fill="#231F20" points="31.176,298.203 4.381,4 294.619,4 267.824,298.203 149.5,330.426 "/>
<path class="shield-border" fill="#808285" d="M290.238,8l-26.146,287.074L149.5,326.28L34.907,295.074L8.762,8H149.5H290.238 M299,0H149.5H0
l27.444,301.333L149.5,334.571l122.056-33.238L299,0L299,0z"/>
</g>
</svg>
<div class="logo">
<div class="d">D</div>
<div class="l">L</div>
<div class="v">V</div>
<div class="p">P</div>
</div>
<h1>Develop Denver</h1>
<h2>2013</h2>
<div class="ribbon">
<div class="mask">
<div class="tickets">Tickets on sale</div>
</div>
</div>
</div>
</body>
</html>
6. Download App Badge
Made by Mohammad Jamal Dashtaki. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.app-download {
display: flex;
justify-content: space-around;
align-items: center;
direction: rtl;
background-color: #dc1e4d;
top: 0;
position: fixed;
flex-direction: column;
z-index: 100;
left: 2rem;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
box-shadow: 1px 2px 14px 5px #00000070;
padding: 1rem;
}
.app-download:focus {
outline: none;
}
.app-download label {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
color: #fff;
cursor: pointer;
}
.app-download label#first-title {
font-size: 1rem;
}
.app-download label#second-title {
font-size: 0.8rem;
}
.app-download .fa-mobile-phone {
color: #fff;
font-size: 2.5rem;
width: 45px;
height: 45px;
display: flex;
border: 2px dotted #fff;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0.5rem 0;
cursor: pointer;
}
.app-download .close-download-app {
color: #fff;
margin-top: 0.5rem;
font-size: 0.7rem;
cursor: pointer;
}
.bounce {
animation: bounce 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
animation-iteration-count: infinite;
-webkit-animation-name: bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
-webkit-animation-iteration-count: infinite;
}
@keyframes bounce {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 3px, 0);
}
}
@-webkit-keyframes bounce {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(0, 3px, 0);
transform: translate3d(0, 3px, 0);
}
}
</style>
</head>
<body>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="app-download">
<label id="first-title">Download Our App</label>
<label id="second-title">!Download Now</label>
<i class="fa fa-mobile-phone bounce"></i>
<a class="close-download-app fa fa-close"></a>
</div>
</body>
</html>7. Badge
Made by Simon Wuyts. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html,
body {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
body {
box-sizing: border-box;
}
body *,
body *:before,
body *:after {
box-sizing: inherit;
}
@-webkit-keyframes introduceBadge {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes introduceBadge {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes pulseBadge {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes pulseBadge {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes pulseBadge2 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes pulseBadge2 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.badge {
-webkit-animation: introduceBadge 1s linear 0s 1 both;
animation: introduceBadge 1s linear 0s 1 both;
background: rgba(0, 113, 246, 0.2);
border-radius: 50%;
height: 136px;
perspective: 600px;
position: relative;
width: 136px;
}
.badge:before, .badge:after {
-webkit-animation: pulseBadge 3s cubic-bezier(0.86, 0, 0.07, 1) 0s infinite both;
animation: pulseBadge 3s cubic-bezier(0.86, 0, 0.07, 1) 0s infinite both;
border: 2px dashed #0071f6;
border-radius: inherit;
bottom: -16px;
content: "";
left: -16px;
opacity: 0.2;
position: absolute;
right: -16px;
top: -16px;
}
.badge:after {
-webkit-animation-name: pulseBadge2;
animation-name: pulseBadge2;
bottom: -32px;
left: -32px;
opacity: 0.1;
right: -32px;
top: -32px;
}
@-webkit-keyframes introduceLabel {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.4) rotateY(-1800deg);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotateY(20deg);
}
}
@keyframes introduceLabel {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.4) rotateY(-1800deg);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotateY(20deg);
}
}
@-webkit-keyframes rotateLabel {
0% {
transform: translate(-50%, -50%) rotateY(20deg);
}
50% {
transform: translate(-50%, -50%) rotateY(-20deg);
}
100% {
transform: translate(-50%, -50%) rotateY(20deg);
}
}
@keyframes rotateLabel {
0% {
transform: translate(-50%, -50%) rotateY(20deg);
}
50% {
transform: translate(-50%, -50%) rotateY(-20deg);
}
100% {
transform: translate(-50%, -50%) rotateY(20deg);
}
}
.badge__label {
-webkit-animation: introduceLabel 2s cubic-bezier(0.19, 1, 0.22, 1) 1s 1 both, rotateLabel 5s linear 3s infinite;
animation: introduceLabel 2s cubic-bezier(0.19, 1, 0.22, 1) 1s 1 both, rotateLabel 5s linear 3s infinite;
color: #0071f6;
font: 900 88px/1 -apple-system, BlinkMacSystemFont;
left: 50%;
position: absolute;
text-align: center;
text-shadow: 0px 4px 8px rgba(0, 113, 246, 0.2);
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="badge">
<div class="badge__label">+10</div>
</div>
</body>
</html>8. Google Partner Badge
Made by Maciej Leszczyński. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,500,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style>
html,
body {
font: 16px Open sans, sans-serif;
}
.google-badge {
margin-top: 50px;
}
.google-badge__inner {
display: flex;
align-items: center;
padding-top: 3.75em;
padding-bottom: 3.75em;
border: solid 1px #e5e5e5;
border-right: none;
border-left: none;
}
@media (max-width: 36.25em) {
.google-badge__inner {
flex-wrap: wrap;
justify-content: center;
}
}
.google-badge__img {
width: 14.6875em;
}
@media (min-width: 36.3125em) {
.google-badge__img {
margin-right: 1.875em;
}
}
.google-badge__text {
font-size: 0.9375rem;
line-height: 1.6;
color: #777;
}
@media (max-width: 36.25em) {
.google-badge__text {
text-align: center;
margin-top: 1.6666666667em;
}
}
.google-badge__text p {
margin: 0;
}
.google-badge__title {
margin: 0 0 0.4em;
font-weight: bold;
font-size: 1.25rem;
line-height: 1.3;
}
.google-badge__leafs {
fill: #e5e5e5;
transform-origin: center;
}
@media (max-width: 45.625em) {
.google-badge__leafs {
display: none;
}
}
.google-badge__leafs--right {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<section class="google-badge">
<div class="container google-badge__inner">
<svg class="google-badge__leafs"><use xlink:href="#leafs"></use></svg>
<img class="google-badge__img" src="https://lh3.googleusercontent.com/ZvO9XVMuwyEgej0f4HHlUiqv82xzRnZib7ghbDJ0eULGZ4g9LB-bBSfXYpfPb-1G-g=w336-h130" alt="" />
<div class="google-badge__text">
<h1 class="google-badge__title">Google Partner Accredited</h1>
<p>Only agencies that achieve the high standards set by Google can be <a href="https://www.google.com/partners/">certified as Google Partners</a>, providing trusted online marketing solutions.</p>
</div>
<svg class="google-badge__leafs google-badge__leafs--right"><use xlink:href="#leafs"></use></svg>
</div>
</section>
<svg>
<defs>
<symbol id="leafs" viewBox="0 0 89.32 172">
<path d="M89.32,168.86L88.13,172c-6.9-2.46-14.37-5.45-21.34-9.3c-1.39,2.64-4.11,4.5-6.81,5.58c-4.84,1.94-10.88,2.22-15.92,0.89c-0.95-0.25-1.93-0.56-2.78-1.05c0.3-1.62,1.4-3.11,2.61-4.18c3.59-3.18,8.94-3.74,13.52-3.37c2.76,0.22,5.51,0.75,8.18,1.46c-4.45-2.53-8.72-5.43-12.51-8.88c-1.06,2.47-3.84,3.95-6.28,4.67c-5.04,1.48-11.17,1.07-16.1-0.71c-0.93-0.34-1.89-0.73-2.72-1.29c0.23-1.51,1.4-2.82,2.59-3.68c3.99-2.86,9.92-2.71,14.49-1.78c2.58,0.53,5.12,1.34,7.55,2.38c-3.35-2.97-6.68-6.14-9.83-9.49c-2.25,2.48-5.77,3.61-9.03,3.71c-5.47,0.16-11.29-2.1-15.62-5.39c-0.85-0.65-1.7-1.35-2.4-2.16c0.92-1.51,2.56-2.63,4.16-3.3c4.5-1.89,9.92-0.87,14.19,1.14c2.66,1.25,5.15,2.88,7.47,4.68c-3.92-4.31-7.51-8.91-10.42-13.82c-2.33,2.31-5.98,2.93-9.12,2.83c-5.69-0.17-11.51-2.34-15.95-5.91c-0.88-0.71-1.74-1.47-2.46-2.34c1.6-1.6,3.34-2.79,5.55-3.42c5.14-1.46,10.62,0.4,15.08,2.99c2.18,1.26,4.22,2.77,6.1,4.45c-1.97-3.49-3.58-7.13-4.72-10.92c-3.27,1.33-7.2,0.84-10.48-0.14c-5.3-1.58-9.74-4.72-13.13-9.07c-0.72-0.93-1.41-1.89-1.99-2.92c0.88-0.76,2.59-1.01,3.68-1.17c3.08-0.47,6.23,0.13,9.06,1.42c5.01,2.29,9.26,6.35,12.53,10.74c-0.9-3.2-1.49-6.52-1.91-9.81c-4.81-0.82-9.34-3.49-12.93-6.7c-3.66-3.27-5.93-7.85-7.11-12.56c-0.27-1.07-0.5-2.16-0.62-3.25c0.46-0.28,1.73-0.01,2.22,0.04c1.77,0.18,3.51,0.62,5.15,1.31c5.16,2.16,8.32,6.61,10.19,11.74c0.97,2.67,1.53,5.6,2.93,8.1c-0.58-5.07-0.63-10.23-0.11-15.37c-3.73-0.97-6.77-4.2-8.96-7.18c-3.27-4.44-4.73-9.73-4.79-15.21c-0.01-1.19,0.02-2.39,0.18-3.57c0.46-0.09,1.28,0.33,1.69,0.48c1.35,0.49,2.64,1.15,3.84,1.96c3.84,2.59,6.12,6.5,7.21,10.94c0.75,3.04,1.09,6.19,1.23,9.31c0.62-4.39,1.7-8.74,3.05-12.97c-3.06-1.25-5.05-5.05-6.44-7.79c-2.38-4.7-2.94-9.96-2.27-15.15c0.15-1.18,0.36-2.37,0.68-3.53c0.68,0,1.59,0.58,2.16,0.89c1.56,0.85,2.94,2.01,4.06,3.39c4.06,5,3.97,12.04,3.22,18.11c1.71-4.52,3.68-9,6.01-13.24c-4.3-2.1-6.58-6.74-7.56-11.2c-1.01-4.59-0.83-9.68,1.67-13.78c0.44-0.71,0.93-1.42,1.54-1.99c0.62,0.04,1.61,1.2,1.99,1.58c1.4,1.37,2.54,3,3.38,4.77c2.76,5.77,2.07,12.55,0.18,18.47c2.43-4.22,5.04-8.44,8.02-12.3c-2.38-4.44-3.39-9.8-3.07-14.8c0.26-4.03,1.61-8.22,4.73-10.94c0.54-0.47,1.13-0.9,1.77-1.21c0.74,0.81,1.03,2.38,1.31,3.4c0.62,2.23,0.99,4.54,1.05,6.85c0.11,5.04-1.75,9.96-4.06,14.37c2.97-3.89,6.15-7.75,9.42-11.44c-1.74-3.97-1.95-8.68-1.61-12.94c0.35-4.35,1.97-8.66,5.05-11.82c0.57-0.58,1.18-1.14,1.87-1.59c0.77,1.1,1,2.67,1.21,3.96c0.36,2.23,0.46,4.51,0.34,6.76c-0.25,4.57-1.71,8.84-4.18,12.68c1.93-2.13,3.9-4.25,6.07-6.14v-0.01c1.22-2.19,2.77-4.19,4.45-6.04C70,8.47,72.8,5.76,76.26,4.36c3.52-1.43,7.88-1.62,11.44-0.14c-0.4,1.9-2.2,3.77-3.43,5.19c-2.02,2.34-4.33,4.53-6.97,6.16c-4.06,2.53-9.51,2.74-14.18,2.7c-3.26,2.84-6.09,6.17-8.89,9.45c3.38-2.73,7.43-4.39,11.74-4.93c4.05-0.51,8.51-0.22,12.11,1.87c-4.89,6.05-13.7,7.67-21.01,6.51c-1.59-0.25-3.14-0.68-4.62-1.32c-2.85,3.44-5.58,6.98-8.17,10.58c3.22-2.73,7.16-4.44,11.32-5.07c4-0.61,7.61-0.16,11.13,1.87c-4.1,5.97-13.04,7.43-19.66,6.23c-1.4-0.26-2.71-0.71-3.99-1.34c-3.04,4.35-5.62,8.61-7.9,13.73c3.41-3.96,7.81-6.93,12.85-8.38c2.2-0.63,4.5-0.95,6.78-0.65c1.63,0.21,3.17,0.75,4.7,1.32c-2.4,3.58-5.42,6.88-9.34,8.82c-4.85,2.39-10.79,2.55-15.94,1.14c-1.53,3.72-3.08,7.61-4.42,11.58c3.17-4.16,7.38-7.39,12.33-9.13c3.82-1.35,7.36-1.17,11.18-0.05c-2.1,3.71-4.85,7.18-8.55,9.39c-4.62,2.77-10.56,3.41-15.79,2.38c-1.62,5.21-2.74,10.56-3.13,16.01c3.46-4.68,6.04-10.05,11.06-13.34c2.04-1.34,4.35-2.11,6.79-2.18c1.87-0.05,3.68,0.33,5.53,0.51c-2.48,4.66-5.31,9.07-9.74,12.13c-4.04,2.79-8.85,3.72-13.68,3.58c-0.31,4.8-0.1,9.62,0.62,14.33c2.7-4.64,5.19-9.63,9.43-13.1c1.84-1.5,4-2.5,6.35-2.83c1.78-0.25,3.55-0.09,5.34-0.11C45.64,92.06,43,96.54,39.09,100c-3.5,3.1-7.87,4.37-12.46,4.45c0.68,3.9,1.72,7.72,3.13,11.42c2.6-4.18,4.22-8.95,7.6-12.61c1.68-1.82,3.79-3.11,6.17-3.76c1.9-0.52,3.85-0.6,5.8-0.78c-1.44,4.68-3.54,8.98-6.93,12.57c-1.8,1.9-3.96,3.32-6.47,4.11c-1.93,0.6-3.93,0.78-5.89,1.25c1.61,4.01,3.63,7.85,5.97,11.51c1-2.36,1.54-4.83,2.2-7.29c0.64-2.41,1.68-4.57,3.21-6.56c1.27-1.65,2.85-3.07,4.81-3.85c1.47-0.59,3.05-0.75,4.61-0.9c-1.24,3.55-2.06,7.36-3.92,10.64c-1.19,2.1-2.52,4.09-4.5,5.52c-1.85,1.33-4.01,2.03-6.06,2.96c2.2,3.38,4.66,6.62,7.32,9.7c0.5-2.31,0.45-4.59,0.55-6.93c0.1-2.39,0.86-4.66,1.99-6.76c0.92-1.7,2.16-3.24,3.81-4.28c1.32-0.83,2.82-1.28,4.31-1.72c-0.32,3.92-0.18,7.67-1.83,11.35c-1.77,3.95-5.11,6.24-8.46,8.76c3.33,3.84,6.95,7.44,10.68,10.81c-1.91-3.65-2.36-8.16-2.15-12.21c0.18-3.53,1.58-7.15,4.86-8.85c0.59-0.3,1.23-0.56,1.88-0.67c2.15,4.28,2.61,9.44,1.49,14.06c-0.74,3.06-2.39,6.88-5.56,8.15c3.3,2.97,6.83,5.62,10.61,7.95c-1.99-4.3-2.84-9.49-1.98-14.17c0.47-2.61,1.74-5.35,4.33-6.42c0.45-0.19,0.94-0.33,1.44-0.36c1.75,3.51,2.57,7.74,2.26,11.64c-0.29,3.67-1.5,7.87-4.6,10.17C74.31,163.04,81.96,166.23,89.32,168.86z"/>
</symbol>
</defs>
</svg>
</body>
</html>
9. Beta badge
Made by Nicklas Sandell. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
background: #EDF1EE;
}
.wrapper {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #FFF;
border: 1px solid #D4E0D7;
}
.badge {
height: 50px;
background: #58C777;
width: 200px;
text-align: center;
font-size: 20px;
line-height: 50px;
font-family: sans-serif;
color: #FFF;
transform: rotate(-45deg);
position: relative;
top: -2px;
left: -70px;
box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
}
.badge:after {
position: absolute;
content: '';
display: block;
height: 100px;
width: 100px;
background: #EDF1EE;
top: -55px;
left: 130px;
transform: rotate(-45deg);
box-shadow: -115px -121px 0px 0px #EDF1EE;
}
.badge .left {
position: absolute;
content: '';
display: block;
top: 50px;
left: 25px;
height: 8px;
width: 8px;
background: linear-gradient(135deg, #5a926a 50%, rgba(90, 146, 106, 0) 50.1%);
}
.badge .right {
position: absolute;
content: '';
display: block;
top: 50px;
left: 157px;
height: 8px;
width: 8px;
background: linear-gradient(135deg, #5a926a 50%, rgba(90, 146, 106, 0) 50.1%);
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="badge">
<i class="left"></i>
<i class="right"></i>
BETA
</div>
</div>
</body>
</html>10. CSS Badge
Made by Eduardo Grigolo. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/* General Styles */
*, *:after, *:before {
box-sizing: border-box;
}
html {
background: #7f7f80;
}
/* Mixins */
/* Variables */
/* Bagde Styles */
.badge {
position: relative;
height: 166px;
width: 100px;
margin: 100px auto;
}
.badge .dotted {
left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5), inset 0px 0px 5px 1px rgba(0, 0, 0, 0.4);
background: white;
}
.badge .dotted:before, .badge .dotted:after {
left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
border-radius: 50%;
}
.badge .dotted:before {
content: "";
z-index: 2;
top: 5px;
width: 90px;
height: 90px;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.8), inset 0px 0px 5px 1px rgba(0, 0, 0, 0.4);
background: #2989d8;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF7ABCFF', endColorstr='#FF4096EE');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdmYjllOCIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjNTRhMWUwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7fb9e8), color-stop(60%, #54a1e0), color-stop(100%, #2989d8));
background-image: -moz-linear-gradient(top, #7fb9e8 0%, #54a1e0 60%, #2989d8 100%);
background-image: -webkit-linear-gradient(top, #7fb9e8 0%, #54a1e0 60%, #2989d8 100%);
background-image: linear-gradient(to bottom, #7fb9e8 0%, #54a1e0 60%, #2989d8 100%);
}
.badge .dotted:after {
content: "";
z-index: 3;
top: 10px;
width: 80px;
height: 80px;
border: 1px dashed white;
font-size: 50px;
color: white;
text-align: center;
text-shadow: 0px 0px 4px #262626;
padding-top: 8px;
padding-right: 2px;
}
.badge .bubble {
left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: relative;
z-index: 4;
top: 25px;
width: 50px;
height: 50px;
padding: 0px;
background: white;
border-radius: 50%;
box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.4);
}
.badge .bubble:before {
content: attr(data-icon);
text-align: center;
font-size: 25px;
color: #2989d8;
display: block;
padding-top: 11px;
padding-right: 2px;
}
.badge .bubble:after {
content: "";
display: block;
position: absolute;
bottom: -4px;
left: 5px;
width: 0;
border-style: solid;
border-width: 10px 4px 0;
border-color: #FFFFFF transparent;
z-index: 1;
transform: rotate(35deg);
}
.badge .tail {
left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
z-index: 0;
top: 88px;
height: 70px;
width: 62px;
background: #2989d8;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF2989D8', endColorstr='#FF2989D8');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkYTZlMSIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4Ii8+PHN0b3Agb2Zmc2V0PSI3NiUiIHN0b3AtY29sb3I9IiMyOTg5ZDgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1ZGE2ZTEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5da6e1), color-stop(60%, #2989d8), color-stop(76%, #2989d8), color-stop(100%, #5da6e1));
background-image: -moz-linear-gradient(top, #5da6e1 0%, #2989d8 60%, #2989d8 76%, #5da6e1 100%);
background-image: -webkit-linear-gradient(top, #5da6e1 0%, #2989d8 60%, #2989d8 76%, #5da6e1 100%);
background-image: linear-gradient(to bottom, #5da6e1 0%, #2989d8 60%, #2989d8 76%, #5da6e1 100%);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.4);
}
.badge .tail:before, .badge .tail:after {
content: "";
position: absolute;
z-index: 0;
bottom: -15px;
width: 0px;
height: 0px;
border-style: solid;
}
.badge .tail:before {
border-width: 15px 31px 0 0;
border-color: #5da6e1 transparent transparent transparent;
}
.badge .tail:after {
right: 0;
border-width: 0 31px 15px 0;
border-color: transparent #5da6e1 transparent transparent;
}
.badge .tail .inner {
left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
z-index: 1;
height: 75px;
width: 50px;
border-left: 1px dashed white;
border-right: 1px dashed white;
}
</style>
</head>
<body>
<div class="badge">
<div class="dotted">
<div class="bubble" data-icon="!"></div>
</div>
<div class="tail">
<div class="inner"></div>
</div>
</div>
</body>
</html>11. Simple CSS badge
Made by Kitty Giraudel. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Cutive);
@import url(https://fonts.googleapis.com/css?family=Advent+Pro);
* {
box-sizing: border-box;
}
body {
background: #e1e1e1;
}
.main {
width: 150px;
height: 150px;
margin: 50px auto;
background: #fcfcfc;
border-radius: 50%;
position: relative;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2), 0 3px 2px rgba(0, 0, 0, 0.2);
line-height: 130px;
font-weight: bold;
color: #505b65;
text-align: center;
font-size: 50px;
font-family: 'Cutive', serif;
}
.main span {
color: #f15755;
}
.main .role {
text-transform: uppercase;
position: absolute;
font-family: 'Advent Pro', sans-serif;
font-size: 12px;
color: #a2a7ac;
left: 29px;
bottom: 39px;
line-height: 1;
text-align: right;
}
.main:after {
content: "";
position: absolute;
border-radius: inherit;
z-index: -1;
background: #c8c8c8;
background: linear-gradient(#c8c8c8, #dcdcdc);
left: -15px;
top: -15px;
right: -15px;
bottom: -15px;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9);
}
.main:before {
content: "";
position: absolute;
height: 3px;
width: 30px;
background: #c8c8c8;
border-radius: 40px;
left: 47%;
bottom: 40px;
}
</style>
</head>
<body>
<div class="main">hg<span>.</span><span class="role">front<br>end</span></div>
</body>
</html>