freeQnet-Logo
freeQnet

CSS-Tippborder-radius für BilderRunde Avatare etc.

CSS ist schon was Tolles. Mit den neuen Möglichkeiten der Version 3 der Stil-Beschreibungssprache sind viele Dinge möglich, die ein Webdesigner vorher nur kompliziert mit vielen gestückelten Grafiken erledigen konnte, die zudem noch ziemlich unflexibel sind. Perfekt ist CSS3 – oder besser die Browser-Integration – bis heute allerdings leider noch nicht. Aber findige Tüftler finden immer Mittel und Wege.

Ein Beispiel ist die fehlende Unterstützung abgerundeter Ecken für Grafiken. Seltsamerweise kann keine der aktuellen Versionen der verschiedenen Browser Grafiken direkt abrunden, obwohl mittlerweile alle so ziemlich sämtlichen anderen Block-Elemente von ihren Ecken befreit werden können. Es gibt allerdings auch für dieses Problem eine Lösung, wie die Kommentar-Avatare in meinem Blog beweisen. Wie’s geht, erfahrt ihr nach dem Klick!

Wie man Bildern Rundungen verpasst

Die Entwicklung von Web-Browsern nimmt schon komische Wege. Einen Grund, warum nun gerade das IMG-Tag von allen Herstellern bei der Unterstützung der CSS3-Eigenschaft border-radius ausgelassen wurde, ist mir ein Rätsel. Definiert man einen Radius für IMG-Objekte, ignorieren die Browser diese und zeigen das Bild gewohnt rechteckig an. Um dieses unschöne Verhalten zu umgehen, machen wir uns die Möglichkeit zu Nutze, das Bild als Hintergrund eines anderen Objekts zu verwenden.

Als erstes definieren wir im HTML-Code ein einfaches leeres DIV-Objekt und geben diesem gleich mal eine Klasse, die wir dann anschließend stylen werden:

1
<div class="roundgravatar"></div>

Wir können theoretisch auch andere HTML-Elemente verwenden, aber um es einfach zu halten, sollte es ein Block-Element sein, das möglichst keine vordefinierte Bedeutung hat, welche im Browser dann eventuell schon gewisse Standard-Stile besitzt, die wir resetten müssten. Dieses leere DIV stylen wir dann folgendermaßen:

1
2
3
4
5
6
7
8
9
10
11
.roundgravatar {
	padding: 0;
	width: 96px;
	height: 96px;
	background: url('bild.jpg');
	border: 5px solid #ccc;
	-webkit-border-radius: 53px;
	-khtml-border-radius: 53px;
	-moz-border-radius: 53px;
	border-radius: 53px;
}

Wir vergeben vorsichtshalber einen Innenabstand von 0[1]. Die Breite und Höhe soll der des Bildes entsprechen, das wir direkt danach als Hintergrund einbinden. Mit dem Border geben wir dem Bild einen schicken Rand.

Zu guter Letzt setzen wir den border-radius für alle Browser separat, da dieser Befehl als CSS3-Angabe noch nicht final ist und die Browser-Hersteller daher noch ihre eigene Version nutzen. Um das Bild auch exakt rund zu bekommen, sollte dieses zu erst einmal möglichst quadratisch sein, also die gleiche Höhe und Breite besitzen. Für den Radius müssen wir dann die Breite bzw. Höhe des Bildes durch zwei teilen und auf das Ergebnis noch jegliche Angaben für padding und border dazu addieren. In diesem Fall ist das 96 / 2 + 0 + 5 = 53!

Damit sollte das an sich leere DIV-Element plötzlich als rundes Bild mit grauem Rand erscheinen. Das ist schon mal super. Was aber, wenn wir diesen Effekt für verschiedene Bilder einsetzen wollen? Man könnte nun für jedes einzelne Bild eine eigene Klasse definieren und einzeln stilen. Das ist aber keine so gute Idee, da das CSS so aufgebläht wird und wir Bilder, die nur auf einer Seite auftauchen sollen, ja nicht auch durch sämtliche anderen Seiten mitschleppen wollen, die dieses CSS eingebunden haben.

Wir müssen also wohl oder übel ein wenig des Styles ins HTML auslagern. Aus dem obigen CSS-Beispiel entfernen wir einfach die Zeile, in der wir das Bild als background definieren. Dies geben wir nun direkt im DIV-Element an, das dieses Bild enthalten soll:

1
<div class="roundgravatar" style="background: url('bild.jpg');"></div>

So lassen sich nun einfach verschiedene Bilder mit der selben Klasse abrunden. Diese sollten allerdings alle die selbe Größe haben, da sonst eventuell überstehende Teile einfach weggeschnitten werden. Theoretisch könnte man nun natürlich für verschiedene Größen auch die Höhe und Breite aus der CSS-Datei entfernen und direkt im DIV-Element angeben. Dann müsste man aber auch für den Radius jeweils andere Werte verwenden, wenn man einen perfekten Kreis haben will. Hier sollte man abwägen, ob das nötig ist. Soll das Bild allerdings nur leicht abgerundete Ecken haben, geht das natürlich problemlos.

praktische Verwendung für WordPress-Gravatare

Mit der Angabe des Bildes direkt im DIV-Element haben wir übrigens auch gleich den Weg für den praktischen Einsatz bei Kommentar-Avataren, wie ich sie hier nutze, frei gemacht. Die CSS-Datei kann man in den WordPress-Templates ja nicht direkt im Loop manipulieren, den HTML-Code aber schon. Das mache ich z.B. innerhalb meiner comments.php mit folgendem Schnipsel:

1
<div class="roundgravatar" style="background: url('<?php echo get_gravatar() ?>');"></div>

Ich verwende hier also die Funktion get_avatar, um mir das Bild für die Style-Angabe zu ermitteln. Wer sich mit den WordPress-Funktionen auskennt, wird vielleicht merken, dass es diese Funktion gar nicht standardmäßig gibt. Diese habe ich mir nämlich selbst geschrieben und in meine functions.php eingefügt. Sie ist folgendermaßen aufgebaut:

1
2
3
function get_gravatar() {
  return "http://www.gravatar.com/avatar/".md5(strtolower(get_comment_author_email()))."?s=96&d=monsterid&r=X";
}

Hiermit sage ich der Gravatar-Website ganz simpel, dass sie mir den Avatar passend zu dem MD5-Hash der Mail-Adresse des Kommentierers in der Größe 96 und mit Content-Rating bis maximal “X” zurückgeben soll. Zusätzlich jage ich die Mail-Adresse noch durch einen Filter, der sie in Kleinbuchstaben umwandelt, da der MD5-Hash sonst ein anderer wäre und Gravatar das Bild nicht finden würde.

Theoretisch hätte ich den Code auch direkt in die comments.php einfügen können, aber ich habe es gern aufgeräumt und zudem kann man den selben Code so auch simpel an anderen Stellen verwenden, beispielsweise für eine Anzeige der Gravatare der letzten Kommentare in der Sidebar o.ä.!

Fazit

Im Endeffekt ist das Abrunden von Bildern direkt im Browser also ganz einfach. Leider muss man allerdings mit den selben Einschränkungen leben, die viele der neuen CSS3-Befehle noch so plagen: Der Internet Explorer unterstützt die Angabe erst seit Version 9 und auch die anderen Browser könnten die Angabe für den Radius in alten Versionen teils noch ignorieren. Da der Anteil meiner Leser mit so alten Browsern aber mittlerweile sehr gering ist und diese dann stattdessen einfach ein quadratisches Bild zu sehen bekommen, kann ich gut mit dem Makel leben.

Ich hoffe, der Tipp ist für euch auch nützlich und ich habe alles ausreichend verständlich geschrieben. Feedback ist natürlich ausdrücklich erwünscht. Auch würden mich eure Ergebnisse interessieren, solltet ihr diesen Tipp in euren Designs einsetzen!

  1. falls diese schon an anderer Stelle auf einen anderen Wert gesetzt wurde. Das ist vor allem wichtig, wenn wir das Bild exakt rund haben wollen, da dieser Innenabstand mit geztählt wird! []

Kommentare

1

Simple Sache, wenn man erstmal drauf gekommen ist, CSS-Datei und direktes CSS zu mischen. Wusste gar nicht, dass die Eigenschaft für Bilder erstmal nicht funktioniert… ein möglicher Gedanke dabei mag gewesen sein, dass dadurch unnötiger Content geladen wird (der abgeschnittene Bildteil, der sonst wegkomprimiert werden könnte).

geschrieben von Konzertheld
antworten  •  Link
Kein Wind bewegt die Stille,
die Luft ist regungslos,
als wenn die Welt an diesem Ort in ihrem Atmen innehält

Kante

Blogverzeichnis - Blog Verzeichnis bloggerei.de blogoscoop Bloggeramt.de