kjodle/css-badge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
kjodle 2017-08-05 20:31:41 -04:00
commit 7a4021c911
2 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
07ec6svg.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="123" height="20">
<linearGradient id="b" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<mask id="a">
<rect width="123" height="20" rx="3" fill="#fff"/>
</mask>
<g mask="url(#a)">
<rect width="71" height="20" fill="#555"/>
<rect x="71" width="52" height="20" fill="#007ec6"/>
<rect width="123" height="20" fill="url(#b)"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
<text x="36.5" y="15" fill="#010101" fill-opacity=".3">downloads</text>
<text x="36.5" y="14">downloads</text>
<text x="96" y="15" fill="#010101" fill-opacity=".3">2.56 M </text>
<text x="96" y="14">2.56 M </text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 898 B

48
badge.html Normal file
View File

@ -0,0 +1,48 @@
<!doctype html>
<html>
<head>
<title>CSS Badge</title>
<style>
.badge {
height: 2em;
font-size: 0.7em;
font-family: "Ubuntu", sans-serif;
color: #fafafa;
text-shadow: 1px 1px 1px #bbb;
}
.badge-left {
float: left;
border-radius: 4px 0 0 4px;
background: linear-gradient(#777, #444);
}
.badge-right {
float: left;
border-radius: 0 4px 4px 0;
background: linear-gradient(#4D8E8E, #2e5555);
}
.badge p {
margin: 0;
padding: 0;
padding: 0.45em;
letter-spacing: 0.1em;
}
.badge:after {
clear: both;
}
</style>
</head>
<body>
<div class="badge">
<div class="badge-left">
<p>downloads</p>
</div>
<div class="badge-right">
<p>2.56 M</p>
</div>
</div>
</body>
</html>