Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe