Webstandard & Webdesign - CSS, HTML

 

Border Radius - Ungleiche Ecken - CSS3 Adventskalender Tag 2

Ungleiche Ecken mit Border-Radius - Am zweiten Tag des Adventskalenders zum Thema CSS3, werden euch heute "schiefe bzw. ungleiche" Ecken etwas näher vorgestellt. Diese "Erweiterung" ist ein Verhalten, welches auf der Eigenschaft Border-Radius aufsetzt und mittlerweile von allen aktuellen Browserversionen Unterstützung erfährt. Um diese CSS3 Eigenschaft aber etwas genauer vorstellen zu können, werden in diesem Beispiel vier Elemente abgebildet (in diesem Fall vier nebeneinander ausgerichtete Listenpunkte), welche durch Hinzufügen entsprechender CSS3-Eigenschaften eine Art Metamorphose vom Quadrat hinzu einem Element mit "ungleichen bzw. schiefen Ecken" vollzieht. Aber seht selbst.

Quadrat

Grundlage dieses 2.Fensters des CSS3 Adventskalenders sind vier gleichgroße Listenpunkte (es kann natürlich auch jedes andere beliebige Element mit einer Block-Eigenschaft sein), mit jeweils unterschiedlichen Farben. Die Strukturierung einer solchen Liste (HTML-Code) und die Definition einer Hintergrundfarbe wird hierbei außen vor gelassen, da diese Grundkenntnisse an dieser Stelle vorausgesetzt werden ;o)

Quadrate
ul {
  list-style: none;
}
li {
  float:left;
  width:100px;
  height:100px;
  padding:0;
  margin:0 20px 0 0;
}

Quadrate mit gleichförmigen Ecken

Kreis (gleichhoher Radius für alle Ecken)

Um aus einem Quadrat einen Kreis erzeugen zu können, halbiert man den in diesem Fall gleich hohen Wert für Breite und Höhe und weist diesen der Eigenschaft Border-Radius zu. Da diese CSS3 Eigenschaft bereits gestern am ersten Tag des Adventskalenders eingehend beschrieben wurde, wird an dieser Stelle hier nicht weiter darauf eingegangen, sondern auf den Artikel Border-Radius - CSS3 Adventskalender Tag 1 verwiesen.

Kreis
li {   -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

Kreis (gleichhoher Radius für alle Ecken)

2 unterschiedlich abgerundete Ecken

Ecken die unterschiedlich abgerundet sind, erhält man in dem man der Eigenschaft Border-Radius mindestens zwei Werte zuweist. Wobei der erste Wert die Ecken oben links und unten rechts bestimmt und der zweite Wert die Ecken oben rechts und unten links definiert. Wenn diese zwei Werte im Verhältnis zueinander unterschiedlich gross sind, können Formen entstehen, die wie in der folgenden Abbildung, an eine Zitrone erinnern.

2 unterschiedlich abgerundete Ecken
li {   -webkit-border-radius: 15px 50px;
  -moz-border-radius: 15px 50px;
  border-radius: 15px 50px;
}

2 unterschiedlich abgerundete Ecken

4 unterschiedlich abgerundete Ecken

Diese Vorgehensweise kann man natürlich auch noch steigern, in dem man allen Ecken vier verschiedene Wert zuweist. Die Reihenfolge in einem solchen Fall ist folgende: oben links (15px), oben rechts (50px), unten rechts (40px), unten links (30px). Die auf diese Weise festgelegten Werte, gelten für horizontale und vertikale Radien der Ecken.

4 unterschiedlich abgerundete Ecken
li {   -webkit-border-radius: 15px 50px 40px 30px;
  -moz-border-radius: 15px 50px 40px 30px;
  border-radius: 15px 50px 40px 30px;
}

4 unterschiedlich abgerundete Ecken

Ungleiche bzw. schiefe Ecken

Mit allein einem einzigen Zeichen allerdings, kann man die anfangs erwähnten "ungleichen bzw. schiefen Ecken" erzeugen. Dem Slash ("/")! Durch dieses Zeichen, wird den beiden Werten vor dem Slash ein horizontaler Radius zugewiesen, während für die beiden Zeichen nach dem Slash ein vertikaler Radius festgelegt wird.

Ungleiche Ecken
li {   -moz-border-radius: 15px 50px / 40px 30px;
  -webkit-border-radius: 15px 50px / 50px 30px;
  border-radius: 15px 50px / 50px 30px;
}

Ungleiche bzw. schiefe Ecken

Keine Tricks, keine Zauberei und vor allem keinerlei Grafiken (!), lediglich ein paar übersichtliche Zeilen CSS.

Browser-Support

Safari 3+, Chrome 3+, Firefox 1+, Opera 10.5+ und IE9 Beta. Hinweis: Ab der Version 4 benötigt der Firefox den Prefix -moz- nicht mehr.

Auch wenn die Abbildung zum Browser-Support der hier aufgelisteten Browser recht positiv aussieht, soll an dieser Stelle nicht unerwähnt bleiben, dass alle Versionen des Internet Explorers kleiner Version IE9b als Endresultat die obige Abbildung des Quadrats aufweisen.

CSS3 Advenstkalender - Vorschau

Für all diejenigen die auch morgen wieder dabei sein wollen, sei kurz gesagt das es bei maddesigns morgen um "einfache Farbverläufe" gehen wird.