Pure CSS Badge Logo

Developer
Rachel Nabors
Size
5,155 Kb
Views
54,648
  1. Pure CSS Badge Logo Previews
  2. Pure CSS Badge Logo HTML Codes
  3. Pure CSS Badge Logo CSS Codes

How do I make an pure css badge logo?

Badge logos are super popular these days. The best part is you can make them with pure CSS! Observe what a handful of tricks can do.... What is a pure css badge logo? How do you make a pure css badge logo? This script and codes were developed by Rachel Nabors on 14 June 2022, Tuesday.

Pure CSS Badge Logo Previews
IQ Test

Pure CSS Badge Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Badge Logo</title> <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="logo"> <div class="upper"> <span class="char1">1</span> <span class="char2">0</span> <span class="char3">0</span> <span class="char4">%</span> <span class="char5"> </span> <span class="char6">T</span> <span class="char7">u</span> <span class="char8">n</span> <span class="char9">a</span> </div> <div class="star"> <div class="seal"> <div class="face"> <img src="https://s3.amazonaws.com/stash.rachelnabors.com/codepen/badge/tuna-face.svg" /> </div> </div> </div> <div class="lower"> <span class="char1">A</span> <span class="char2">l</span> <span class="char3">w</span> <span class="char4">a</span> <span class="char5">y</span> <span class="char6">s</span> <span class="char7"> </span> <span class="char8">F</span> <span class="char9">r</span> <span class="char10">e</span> <span class="char11">s</span> <span class="char12">h</span> </div>
</div>
</body>
</html>

Pure CSS Badge Logo - Script Codes CSS Codes

.logo { background: #000 url("http://stash.rachelnabors.com/codepen/badge/dark_wall.png"); -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; margin: 2em auto; position: relative; text-align: center; width: 14em; height: 14em; /* Ribbon inspired by http://thecodeplayer.com/walkthrough/single-element-pure-css3-double-fold-ribbon */
}
.logo img { height: 4em;
}
.logo:before { content: ''; position: absolute; top: 6em; left: -4em; z-index: -1; width: 22em; height: 0; border: 1.25em solid transparent; border-left: 1.25em solid #fff; border-right: 1.25em solid #fff; /*Same color as the container which is the body in this case*/ background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjglIiBzdG9wLWNvbG9yPSIjY2VkOTJlIiBzdG9wLW9wYWNpdHk9IjAuOCIvPjxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjY2VkOTJlIi8+PHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI4NiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI4NiUiIHN0b3AtY29sb3I9IiNjZWQ5MmUiLz48c3RvcCBvZmZzZXQ9IjkyJSIgc3RvcC1jb2xvcj0iI2NlZDkyZSIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjkyJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU1NTU1NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(8%, rgba(0, 0, 0, 0)), color-stop(8%, rgba(206, 217, 46, 0.8)), color-stop(15%, #ced92e), color-stop(15%, rgba(0, 0, 0, 0)), color-stop(86%, rgba(0, 0, 0, 0)), color-stop(86%, #ced92e), color-stop(92%, rgba(206, 217, 46, 0.8)), color-stop(92%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #555555)); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 8%, rgba(206, 217, 46, 0.8) 8%, #ced92e 15%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 86%, #ced92e 86%, rgba(206, 217, 46, 0.8) 92%, rgba(0, 0, 0, 0) 92%), -moz-linear-gradient(#666666, #555555); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 8%, rgba(206, 217, 46, 0.8) 8%, #ced92e 15%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 86%, #ced92e 86%, rgba(206, 217, 46, 0.8) 92%, rgba(0, 0, 0, 0) 92%), -webkit-linear-gradient(#666666, #555555); background-image: linear-gradient(rgba(0, 0, 0, 0) 8%, rgba(206, 217, 46, 0.8) 8%, #ced92e 15%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 86%, #ced92e 86%, rgba(206, 217, 46, 0.8) 92%, rgba(0, 0, 0, 0) 92%), linear-gradient(#666666, #555555); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*Fix to make the borders appear on the ribbon ends also*/ background-origin: border-box;
}
.logo:after { content: ""; border: .1em dashed #fff; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; position: absolute; top: .2em; left: .2em; width: 13.5em; height: 13.5em;
}
/* Set Text on a Circle from http://css-tricks.com/set-text-on-a-circle/ */
.upper, .lower { color: #fff; font-family: "Josefin Slab", serif; font-size: 1.5em; font-weight: 700; text-transform: uppercase;
}
.upper span, .lower span { position: absolute; width: 1em; height: 8.5em; left: 50%; top: .45em; margin-left: -.5em; -moz-transform-origin: bottom center 50%; -ms-transform-origin: bottom center 50%; -webkit-transform-origin: bottom center 50%; transform-origin: bottom center 50%;
}
.upper .char1 { -moz-transform: rotate(-56.66667deg); -ms-transform: rotate(-56.66667deg); -webkit-transform: rotate(-56.66667deg); transform: rotate(-56.66667deg);
}
.upper .char2 { -moz-transform: rotate(-43.33333deg); -ms-transform: rotate(-43.33333deg); -webkit-transform: rotate(-43.33333deg); transform: rotate(-43.33333deg);
}
.upper .char3 { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg);
}
.upper .char4 { -moz-transform: rotate(-16.66667deg); -ms-transform: rotate(-16.66667deg); -webkit-transform: rotate(-16.66667deg); transform: rotate(-16.66667deg);
}
.upper .char5 { -moz-transform: rotate(-3.33333deg); -ms-transform: rotate(-3.33333deg); -webkit-transform: rotate(-3.33333deg); transform: rotate(-3.33333deg);
}
.upper .char6 { -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg);
}
.upper .char7 { -moz-transform: rotate(23.33333deg); -ms-transform: rotate(23.33333deg); -webkit-transform: rotate(23.33333deg); transform: rotate(23.33333deg);
}
.upper .char8 { -moz-transform: rotate(36.66667deg); -ms-transform: rotate(36.66667deg); -webkit-transform: rotate(36.66667deg); transform: rotate(36.66667deg);
}
.upper .char9 { -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg);
}
.lower .char1 { -moz-transform: rotate(-265deg); -ms-transform: rotate(-265deg); -webkit-transform: rotate(-265deg); transform: rotate(-265deg);
}
.lower .char2 { -moz-transform: rotate(-250deg); -ms-transform: rotate(-250deg); -webkit-transform: rotate(-250deg); transform: rotate(-250deg);
}
.lower .char3 { -moz-transform: rotate(-235deg); -ms-transform: rotate(-235deg); -webkit-transform: rotate(-235deg); transform: rotate(-235deg);
}
.lower .char4 { -moz-transform: rotate(-220deg); -ms-transform: rotate(-220deg); -webkit-transform: rotate(-220deg); transform: rotate(-220deg);
}
.lower .char5 { -moz-transform: rotate(-205deg); -ms-transform: rotate(-205deg); -webkit-transform: rotate(-205deg); transform: rotate(-205deg);
}
.lower .char6 { -moz-transform: rotate(-190deg); -ms-transform: rotate(-190deg); -webkit-transform: rotate(-190deg); transform: rotate(-190deg);
}
.lower .char7 { -moz-transform: rotate(-175deg); -ms-transform: rotate(-175deg); -webkit-transform: rotate(-175deg); transform: rotate(-175deg);
}
.lower .char8 { -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -webkit-transform: rotate(-160deg); transform: rotate(-160deg);
}
.lower .char9 { -moz-transform: rotate(-145deg); -ms-transform: rotate(-145deg); -webkit-transform: rotate(-145deg); transform: rotate(-145deg);
}
.lower .char10 { -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -webkit-transform: rotate(-130deg); transform: rotate(-130deg);
}
.lower .char11 { -moz-transform: rotate(-115deg); -ms-transform: rotate(-115deg); -webkit-transform: rotate(-115deg); transform: rotate(-115deg);
}
.lower .char12 { -moz-transform: rotate(-100deg); -ms-transform: rotate(-100deg); -webkit-transform: rotate(-100deg); transform: rotate(-100deg);
}
.lower span { top: .35em;
}
/* 12 point star from http://www.css3shapes.com/ with rounded corners because I like it. */
.star { background: #ced92e; -moz-border-radius: 0.75em; -webkit-border-radius: 0.75em; border-radius: 0.75em; position: absolute; left: 50%; top: 50%; margin: -3.4em 0 0 -3.4em; height: 6.8em; width: 6.8em;
}
.star:before { -moz-border-radius: 0.75em; -webkit-border-radius: 0.75em; border-radius: 0.75em; background: #ced92e; content: ""; position: absolute; top: 0; left: 0; -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); width: 6.8em; height: 6.8em; z-index: 0;
}
.star:after { background: #ced92e; -moz-border-radius: 0.75em; -webkit-border-radius: 0.75em; border-radius: 0.75em; content: ""; position: absolute; top: 0; left: 0; -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); width: 6.8em; height: 6.8em; z-index: 0;
}
.seal { border: .15em dotted #fff; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; padding: .25em; position: relative; width: 6em; height: 6em; z-index: 1;
}
.face { background: #fff; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; padding: 1em; width: 4em; height: 4em;
}
Pure CSS Badge Logo - Script Codes
Pure CSS Badge Logo - Script Codes
Home Page Home
Developer Rachel Nabors
Username rachelnabors
Uploaded June 14, 2022
Rating 4
Size 5,155 Kb
Views 54,648
Do you need developer help for Pure CSS Badge Logo?

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!

Rachel Nabors (rachelnabors) Script Codes
Name
Spinner
Falling Down the Rabbit Hole
Tuna in the Window
Yarn Loader
Key Press SVG illustration with CSS animation
Bright Lights, Big Kitty
Text Clipping Sass mixin
Down the Hipster Rabbit Hole
Rolling a Ball with CSS Transitions
Walkcycle with music loop
Create amazing art & images 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!