Guten Abend zusammen,
ich habe mir mal überlegt ein Tutorial zu schreiben, wie man Kreise in HTML/CSS erstellt.
Das Tutorial:
Als erstes kommt das HTML Dokument. Dort erstellt ihr in dem Grundgerüst, im body ein div-container mit der class "kreis". In diesen erstellt ihr noch ein span-tag mit der class "name". In diesem schreibt ihr jetzt einen Namen. In diesem Tut nehmen wir "Hund Bärle". Nun sollte es so aussehen:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Kreis mit CSS</title>
<link href="kreis.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="kreis">
<span class="name">Hund Bärle</span>
</div>
</body>
</html>Nun kommt der CSS-Teil. Dort gebe ich jetzt in dem div.kreis erstmal die background-color, höhe und breite, border, background-image, border-radius, background-repeat, background-position und background-size ein und gebt ihnen Werte.
div.kreis
{
background-color:yellow; /*hintergrundfarbe*/
width: 200px; /*breite*/
height: 200px; /*höhe*/
border-radius: 50%; /*Abgerundete Ecken, in diesem Beispiel tun die 50% ein Kreis darstellen*/
text-align: center; /*der Text wird zentriert*/
border: 16px solid rgba(0,0,0,0.4); /*rahmenfarbe*/
background-image: url("http://i1.web.de/image/502/31464502,pd=3/bilder-woche-haustiermesse-japan-tokyo-pudel-kajak.jpg"); /*hintergrundbild*/
background-repeat: no-repeat; /*hintergrundbild soll nicht mehr wiederholt werden*/
background-position: center; /*hintergrundbild zentriert*/
background-size:400px; /*größe des hintergrundbildes*/
}Nun haben wir für die class kreis schon alles gemacht. Nun möchten wir noch, dass das der text besser dargestellt wird, dazu wird dieser erstmal eine absolute Positionierung gegeben, mit Abstand von Links und Oben, die Farbe, Hintergrundfarbe und die schriftgröße.
span.name
{
position: absolute; /*Absolute Positionierung - aus dem Textfluss rausgenommen kann frei plaziert werden*/
left: 90px; /*Abstand von der oberen li. Ecke nach links*/
top: 190px; /*Abstand von der oberen li. Ecke nach oben*/
color: red; /*schriftfarbe*/
font-weight: 800; /*schriftstärke/-größe*/
background-color: rgba(0,0,0,9); /*Hintergrundfarbe*/
}Nun sollte es so Aussehen:
[Blockierte Grafik: http://image.prntscr.com/image/88dceb00681d42338576e4cb1bdd376c.jpeg]
Das war das Tutorial dazu. Hoffe ich konnte euch helfen.
Falls Fehler oder andere Missgeschicke entdeckt werden bitte mitteilen.
Stef