cssBadge – no images, just XHTML and CSS
Es gab eine Zeit, da war es total Mode, möglichst viele Badges auf seiner Webseite unterzubringen. Welche Standards man beachtet, wo man sich überall eingetragen hat oder welche Soft- oder Hardware man benutzt. Diese Badges wurden meist von Leuten erstellt, die Ahnung haben, wie man kleine Schrift lesbar auf dem begrenzten Platz unterbringt. Fehlte ein bestimmtes, bekam nicht jeder das gewünschte Design hin.
Die moderne Form dieser Badges ist eine rein textbasierte. Dadurch sind diese nahezu unendlich an die individuellen Bedürfnisse jedes Einzelnen anpassbar.
Live-Example
XFN Friendly W3C XHTML 1.1 W3C WAI-AAA MF microformats CC by-nc-sa 2.5
Usage Example
<a href="http://gmpg.org/xfn/" class="cssBadge">
<span class="cssBadgeFront bgOrange">XFN</span>
<span class="hidden"> </span>
<span class="cssBadgeText">Friendly</span>
</a>
StyleSheet
a.cssBadge {
display: inline;
font: 11px 'helvetica neue', arial, sans-serif;
margin: 0; padding: 1px; background: #fff;
border: 1px solid #777; text-decoration: none;
}
.cssBadgeFront {
display: inline; margin: 0 1px 0 0; padding: 0 2px;
background: #00b0e9; color: #fff;
}
.cssBadgeText {
display: inline; margin: 0 0 0 1px; padding: 0 3px;
color: #434343; border: 0;
}
.bgGreen { background: #90e400; }
.bgOrange { background: #ffb900; }
.bgBlue { background: #00b0e9; }
.bgGray { background: #aaa; }
.hidden { display: none; }