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.
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
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 :).
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:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
