Abgerundete Ecken fĂŒr Elemente auf deinem Blog oder auch kreisrunde Fotos? Mit ein bisschen CSS ist das gar kein Problem!
Die Fotos, die aus deiner Speicherkarte purzeln, sind eckig. Auch HTML-Elemente wie etwa Buttons oder div-Container, mit denen du Boxen gestalten kannst, haben von Hause aus schnöde 90°-Ecken.
Das passt manchmal allerdings nicht so richtig zu deinem gewĂŒnschten Layout: sei es, dass du die Ecken ganz dezent abrunden magst, sei es, dass du deutliche Kurven hineinbringen möchtest – oder beispielsweise dein Profilfoto in der Sidebar ganz rund als Kreis darstellen magst.
Keine Sorge, du musst dafĂŒr weder zur Schere greifen, noch mĂŒhsam jedes einzelne Bild in Photoshop abrunden. Viel einfacher geht das mit CSS! đ
border-radius: eine runde Sache
Ăber die Eigenschaft border-radius kannst du einem Element, wie beispielsweise einem Div-Container oder eben einem Bild, abgerundete Ecken zuweisen:
.abgerundete-ecken {
border-radius: 10px;
}
Der Pixelwert bestimmt, wie stark die Rundung ausfallen soll:
Wirf die Prefixes weg!
In der Vergangenheit warst du mit dieser einen Zeile leider noch nicht fertig. Denn wie das halt so ist – nicht jeder Browser unterstĂŒtze diese Anweisung fĂŒr den border-radius. Daher waren fĂŒr Firefox (-moz) sowie Safari und Chrome (-webkit) zwei weitere Angaben nötig, sogenannte Browser-Prefixes:
.abgerundete-ecken {
-moz-border-radius: 10px;
-webkit-border-radius: 10px
border-radius: 10px;
}
Heutzutage kannst du die aber getrost weglassen.
Runde Bilder
Jetzt geht’s rund. đ
Besonders bei kleineren Bildchen – etwa Profilbildern oder Thumbnails – kann es ein netter Effekt sein, sie kugelrund darzustellen. Hier im Blog setze ich diesen Effekt beispielsweise bei meinem Foto in der Autorenbox oder rechts in der Sidebar ein.
Dazu machen wir uns einfach einen kleinen Trick mit der Eigenschaft border-radius zunutze. Die Voraussetzung ist, dass unser Bild quadratisch ist.
Im Stylesheet weist du diesem nun abgerundete Ecken zu und setzt einen Wert ein, der halb so groĂ (danke @ Jonathan) ist wie die SeitenlĂ€nge der Grafik. Dann entsteht ein perfekter Kreis. đ
<img src="bild.jpg" alt="ein quadratisches Bild" class="kreis">
.kreis {
border-radius: 50%;
}
Du kannst entweder einen Pixelwert angeben, der der HĂ€lfte der BildlĂ€nge bzw. -breite entspricht, oder einfach 50% verwenden. Damit bist du deutlich flexibler, falls du die BildgröĂe mit CSS noch anpassen möchtest.
Nur einzelne Ecken abrunden
Jetzt gehen wir noch einen Schritt weiter und runden nicht mehr alle Ecken gleichmĂ€Ăig ab, sondern nur einzelne. đ
Denn wÀhrend border-radius alle Ecken adressiert, kannst du sie auch gezielt ansprechen:
border-top-left-radius | obere linke Ecke |
border-top-right-radius | obere rechte Ecke |
border-bottom-left-radius | untere linke Ecke |
border-bottom-right-radius | untere rechte Ecke |
Ich hoffe, dass dir diese kleine Anleitung weitergeholfen hat. đ
Gutes Tutorial! Zwei kleine Details: Man kann das Bild auch in einen quadratischen Container zwĂ€ngen und border-radius: 100 wĂŒrde reichen, da Breite/2 auch einen Kreis erzeugt đ
Ah, stimmt, die halbe SeitenlĂ€nge reicht auch… danke fĂŒr den Hinweis! đ Hab ich oben im Artikel gleich mal korrigiert.
Wie meinst du das mit dem quadratischen Container? Das hat dann doch zur Folge, dass das Bild verzerrt wird?!
Pingback: Links stylen | Bloghexe
Danke fĂŒr das Tutorial, habe schon lange danach gesucht, bei den meisten ist es immer so kompliziert erklĂ€rt :-S Da ich mich noch nicht zu 100% auskenne ist das perfekt fĂŒr mich erklĂ€rt đ
Hii đ Ein super Tutorial nur bin ich leider zu blond..wo muss ich denn den Code einfĂŒgen damit meine Comment-Bilder wie bei dir zum Kreis werden? Ich habe da leider keine Ahnung ;/
Dankeschön
Hej,
wo du diesen CSS-Code einfĂŒgst, hĂ€ngt davon ab, mit welchem System deine Webseite oder dein Blog lĂ€uft:
Dort fĂŒgst du (am einfachsten am Ende) den Code ein – wie die Klassen der Bilder bei dir heiĂen, musst du vorher nachgucken und ggf. anpassen: ruf deine Seite auf, drĂŒcke Strg + U. Dann siehst du den Quellcode. Dort suchst du nach dem entsprechenden Bild und findest so die entsprechende Klasse heraus. đ
Pingback: So kannst du Links perfekt stylen | Bloghexe
kurz und einfach erklĂ€rt, einfach nur top! Hab sogar ich kapiert đ Danke!!
Gerne, freut mich wenn ich dir weiterhelfen konnte! đ