Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Aufgabenlösung: Box im Design eines Karteikartenreiters / Box mit Inhalt als Kreis

Einem DIV-Bereich wird, über CSS3, das Aussehen eines Karteikartenreiters mit oben runden Ecken mitgegeben. Und im zweiten Teil wird die Lösung gezeigt, wie über CSS3 ein Kreis mit Text dargestellt werden kann.

Inhalte über CSS3 in einem Kreis auszugeben bzw. mit der Optik eines Karteikartenreiters
Inhalte über CSS3 in einem Kreis auszugeben bzw. mit der Optik eines Karteikartenreiters

Im ersten Schritt benötigen wie einen HTML-Datei mit 2 DIV-Bereichen.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>CSS3: Lösung zur Aufgabe mit border-radius</title>
    <link href="css3-kreis-loesung.css" rel="stylesheet">
</head>
<body>

<div id="box1">
    <p>Box als Karteikartenreiter</p>
</div>

<div id="box2">
    <p>Box als Kreis</p>
</div>

</body>
</html>

Und als Grundlage im CSS-Bereich haben wir folgenden CSS-Anweisungen, die uns 2 graue Rechtecke zeichnet.

#box1 {
    background-color: yellow;
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    left: 25px;
    border: 1px solid black;
}

#box2 {
    background-color: green;
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    left: 250px;
    border: 1px solid black;
    text-align: center;
}

Im ersten Schritt soll unsere Box 1 zwei Rundungen bekommen. Dazu wird der entsprechende Bereich in CSS erweitert mit border-radius. Dabei wird aber für jede entsprechende Ecke, die entsprechende Angabe gemacht. Der erste Wert ist für links oben, der zweite für rechts oben und so weiter. Lesbar also im Uhrzeigersinn.

#box1 {
    background-color: yellow;
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    left: 25px;
    border: 1px solid black;
    border-radius: 40px 40px 0 0;
}

Zusätzlich ändern wir noch die Höhe von Box 1, damit wir die entsprechende Karteikartenreiteroptik bekommen.

#box1 {
    background-color: yellow;
    position: absolute;
    width: 200px;
    height: 100px;

Kreis zeichnen per CSS3

Unsere Box 2 soll als Kreis dargestellt werden. Das ist relativ einfach. Wir wissen, dass der Bereich eine Höhe von 200 Pixel und eine Breite von 200 Pixel hat. Somit können wir uns, durch den Radius von 100 Pixel (200/2), einen Kreis ausgeben lassen.

#box2 {
    background-color: green;
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    left: 250px;
    border: 1px solid black;
    text-align: center;
    border-radius: 100px;
}

Und somit wird bereits ein Kreis ausgegeben, wenn wir aktuelle Browser verwenden, die CSS3 unterstützen.

Jetzt können wir noch die entsprechenden alten Anweisungen für border-radius angeben: -moz-border-radius und -webkit-border-radius. Dies wird man nur für die alten Versionen für die Browser machen. Und wichtig ist, wenn man die alten Angaben macht, dass diese Angaben über der aktuellen Form stehen – sprich border-radius: muss als letzte Angabe im CSS-Code gemacht werden, damit aktuelle Browser dann diese nutzen.