Rotert transparent sirkel med CSS3

På gårsdagens frokostseminar fikk jeg forespørsel om jeg ikke kunne legge ut et eksempel på hvordan man ved hjelp av CSS3 kan lage en sirkel med tekst i, som kan plasseres over annet innhold på siden, med transparent bakgrunn og rotering. Tradisjonelt ville vi laget et bilde med tekst i for å løse en slik oppgave. Med CSS3 byr det seg andre muligheter ved hjelp av egenskaper som transparent bakgrunn, border radius, transform og box-shadow.

I HTML-dokumentet plasserer du inn en div slik som dette:

<div class="badge">
<p>Teksten du vil vise...</p>
</div>

I CSS-dokumentet lager du en stil som skal brukes av div-taggen:

.badge
{
background-color: hsla(0,100%,50%,.8); /*transparent bakgrunn */
position: absolute; /*absolutt posisjonering, for plassering over annet innhold */
width: 140px;
-moz-border-radius: 100px; /*border radius for å lage en sirkel */
-webkit-border-radius: 100px;
border-radius: 100px;
padding-top: 25px;
padding-left: 40px;
padding-right: 25px;
padding-bottom: 25px;
color: rgba(255,255,255,1);
left: 465px; /* plassering fra venstre marg */
top: 430px; /* plassering fra toppen */
text-align: center;
-webkit-transform: rotate(15deg); /* rotering */
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
-webkit-box-shadow:0px 3px 3px rgba(58, 58, 58, 0.75); /* skygge */
-moz-box-shadow:0px 3px 3px rgba(58, 58, 58, 0.75);
box-shadow:0px 3px 3px rgba(58, 58, 58, 0.75);
}