Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 Grundkurs

Runde Ecken

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Runde Ecken sind "in" – werden aber meist grafisch implementiert, weil der alte CSS-Standard keine einfache Möglichkeit dafür bietet. Das wird mit CSS3 anders, runde Ecken sind per simplem CSS-Stil fix umgesetzt.
05:03

Transkript

Zugegeben es klingt jetzt nicht nach einem missionskritischen Feature, aber runde Ecken sind eines derjenigen Dinge von CSS3, das mit am meisten herbeigesehen worden ist. Warum? Runde Ecken sind bei vielen Layouts gang und gäbe, konnten aber bisschen nicht mit Bordmitteln erstellt werden, oder zumindest nur eingeschränkt und mit sehr großem Aufwand. Hat sich häufig beholfen, indem man extra Grafiken mit runden Ecken für Rahmen erstellt hat und dann diese Grafiken vom Server einen Client übertragen hat, "Sprich mir" wurde benutzt. War also nicht so ganz perfekt. Und herum Grafiken nehmen wir eine Information, wie runde Ecken, wenn man e nicht so, wie CSS hat, was sich um die Darstellung kümmert. In CSS3 gibt es jetzt tatsächlich etwas Neues: für runde Ecken eine neue Stil-Anweisung, die wollen wir uns an der Stelle kurz anschauen. Klicke eine neue Datei an und nenne die Ganze border.html, oh, nennen wir sie ecken.html noch besser. Ich bin auf border deswegen gekommen, weil die entsprechende CSS-Anweisung so ähnlich heißt. Wir brauchen irgendeine Form von Rahmen. Liegen wir erst mal einen "Kasten" an, der dann den Rahmen enthält, und dieser Kasten soll dann runde Ecken haben. So die Hoffnung. Das lösen wir jetzt mit CSS, genauer gesagt mit CSS3. Zu Erinnerung, eine der Erneuerung von HTML5 ist es, dass wir beim Style-Tag das Style-Attribut weglassen können, brauchen also keinen tab=CSS mehr, ist der Standardfall. Und jetzt können wir für uns einem Kasten entspechende Stile angeben, vielleicht zunächst mal eine Breite und eine Höhe. Und wenn wir das haben, brauchen wir zunächst einen Rahmen. Also, border wäre es mit 2px dotted black, also ein schwarzer gepunktete Rahmen,na ja nehmen wir einen durchgezogenen Rahmen, dann sieht man nachher die Rundungen besser. Wir gehen mal in den Browser, laden ecken.html. Und bis jetzt sind die Ecken nicht rund, sondern natürlich eckig. Es ist ganz normaler Rahmen für das Block-Element div 300 mal 200 px, deswegen sieht das so aus. Was wir jetzt machen können, ist eine neue CSS3-Anweisung zu verwenden, und zwar heißt die border radius. Man muss sich das so vorstellen. Wenn dieser Kasten runde Ecken bekommt, dannist jede dieser vier Ecken gewisser Hinsicht ein Kreisbogen. Und wir geben jetzt einfach den Radius des dazu gehörigen Kreises an. Das wird nicht der komplette Kreis gemalt, sondern eben nur diesen Bogen, aber durch den Radius geben wir an, wie sehr dann de facto der eckige Bogen ist. So kann man sich das vorstellen. Das heißt, wir geben jetzt einfach mal zum Beispiel 10px an, haben also einen Kreisbogen, der einen radius von 10px, Durchmesser von 20px hat. Schauen wir uns das an! Ich lade neue. Und jetzt haben wir hier gleichmäßig runde Ecken. Das ist ja schon mal ganz gut. Und das ist ein, ich sage mal, guter Ausgangspunkt. Allerdings ist es ja vielleicht nicht immer so, dass alle Ecken dieselbe Rundung haben sollen, und deswegen kann man spezifisch für jede einzelne Ecke den Radius angeben, Und zwar läuft es wie folgt. Ich schalte mal wieder um. Wir geben anstelle von einem Wert, also hier 10px, geben wir vier Werte an, und zwar denn die linke obere Ecke lassen mal 10 px dann die rechte obere Ecke, da nehmen wir vielleicht nun etwas größeren Kreis, und dann die rechte untere Ecke, geht als im Uhrzeigersinn, dann nehmen wir vielleicht einen ganz kleinen Kreis und für linke untere Ecke nehmen wir einen richtig großen Kreis. So was in der Art. Ja, also links um, rechts um, rechts unten, links unten. Gehen zurück und laden neue, und jetzt sehen wir tatsächlich hier den sehr,sehr großen Kreis links unten, rechts unten den sehr, sehr kleinen Kreis links oben den Kreis von zuvor und rechts oben einen etwas größeren Kreis. So können wir also runde Ecken angeben und zwar jeweils für die einzelnen Ecken oder eben auch konsistent für alle Ecken gleichermaßen. Wenn wir jetzt nicht wollen, dass jede Ecke rund ist, können wir natürlich sagen, gut der Radius der entsprechenden Ecke ist 0px, aber es gibt auch spezifische Eigenschaften nur für bestimmte Ecken. Wir haben bis jetzt hier border radius eingesetzt, aber wir können bei border radius auch entsprechend die linke, rechte, obere oder untere Ecke angeben. Und zwar funktioniert das wie folgt, dass wir eine etwas andere Eigenschaft nehmen, und zwar radius steht am Ende oder steht am Anfang wie vorher schon verwendet, aber dazwischen geben wir an welche Ecke, also zum Beispiel border-top-left-redius könnten wir angeben oder border-top-right-redius. Wir sehen das hier auch in der Intellisense-Ergänzung und für die beiden unteren Ecken es ist da natürlich border-bottom und dann sehen Sie es schon left-radius oder right-radius. Können wir das also spezifisch angeben, wie wir es []CSS haben oder wir schlagen alles auf einmal eben mit dieser border-radius-Anweisung. Und damit haben wir jetzt tatsächlich abgeordnete Ecken. Unser Designer freut es.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!