FSK Kennzeichnungen mit CSS3


Um seine im Internet angebotenen Inhalte bald mit Alterskennzeichnungen zu versehen, habe ich die FSK Kennzeichnungen in CSS3 umgesetzt. Dank rgba Farbwerten und border-radius, ist das ziemlich einfach. Zunächst benötigt man eine passende Struktur.

<div class="fsklogo fsk18">
<div class="kreis">
<div class="fsk">FSK</div>
<small>ab</small><br />
<div class="alter">18</div>
<small>freigegeben</small> </div>
</div>

Einen großer Kasten mit leicht runden Ecken, der 50% Transparenz aufweist beinhaltet einen Kreis mit den Worten FSK ab 18 Jahre freigegeben.

Der große Kasten .fsklogo beinhaltet die Größe der Box, den border-radius, margin und padding, sowie text-align als CSS Attribute. Je nach Alterskennzeichnung (.fsk18) bekommt der Kasten außerdem noch die passende Hintergrundfarbe und Randfarbe. Beim Farbwert für die Hintergrundfarbe ist darauf zu achten, dass der Alphakanal 0.5 enthält. ( rgba(255,0,0,0.5) )

.fsklogo {
padding:0;
margin:20px;
width:140px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
text-align:  center;
float:left;
}
.fsk18 {
background:  rgba(255,0,0,0.5);
border:2px solid rgba(255,0,0,1);
}

Was jetzt noch fehlt ist der Kreis in der Mitte der Kennzeichnung. Hierfür wählt man eine feste Größe. z.B. 100px x 100px und setzt den border-radius auf die Hälfte der Breite bzw. Höhe (50px). Dadurch erhält man einen Kreis.

.fsk18 .kreis {
background:  rgba(255,0,0,1);
width:100px;
height:100px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border:1px solid black;
margin:20px;
}

Jetzt fehlt nur noch der Style für die Inhaltselemente.

.fsk {
margin-top:10px;
line-height:3px;
}
.alter {
font-size:50px;
line-height:30px;
font-weight:bold;
padding:-5px;
}
small {
font-size:10px;
}

Die passenden Farbwerte für die unterschiedlichen Alterskennzeichnungen lauten.

FSK 18:
rgba(255,0,0,1)
FSK 16:
rgba(0,164,224,1)
FSK 12:
rgba(0,190,105,1)
FSK 6:
rgba(255,231,72,1)
FSK 0:
rgba(255,255,255,1)

Hier gehts zur Demo.

Be Sociable, Share!

Comments are closed.