Bilder mit abgerundeten Ecken

Question

Wie funktionieren Websites wie diese Bilder mit abgerundeten Ecken anzeigen lassen?

Ich habe mit Firebug überprüft, dass das heruntergeladene Bild scharfe Ecken hat, aber das angezeigte Bild wurde irgendwie verändert.

EDIT: Ich beziehe mich auf die abgerundeten Miniaturbilder, die auf der genannten Website im Abschnitt "Herausragende Artikel" zu sehen sind.

Answer 1

Es verwendet ein Bild-Overlay, das enthält die gebogenen Ränder .

<img class="rounders2_img" width="103" height="80" alt="" src="http://pad2.whstatic.com/images/thumb/1/18/Shadow-of-a-Writing-Hand-1834.jpg/-crop-103-80-103px-Shadow-of-a-Writing-Hand-1834.jpg"/>
<img class="rounders2_sprite" src="http://pad1.whstatic.com/skins/WikiHow/images/corner_sprite.png" alt=""/>

Die gleiche Technik wird im Allgemeinen verwendet für Schlagschatten .

Dies geschieht, weil der IE viele coole CSS 3-Funktionen nicht unterstützt, wie z. B. abgerundete Ecken :

moz-border-radius: 5px; -webkit-border-radius: 5px;

Answer 2

Sie können das auch ohne Bilder machen (habe es irgendwo gelesen, kann den Link nicht mehr finden), indem Sie dies in Ihrer Formatvorlage definieren:

#divallrounded { /* every border rounded */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Answer 3

Es gibt mehrere Möglichkeiten, dies zu erreichen, aber in diesem Fall haben sie es folgendermaßen gemacht:

Wenn Sie sich das HTML ansehen, werden Sie feststellen, dass die <img> ist innerhalb einer <a> und innerhalb desselben <a> ist eine zweite <img> , ecke_sprite.png . Wenn Sie sich dieses Bild ansehen, werden Sie feststellen, dass es sich um eine Reihe von weißen Ecken handelt, die in verschiedene Größen passen. Mit CSS wird dieses Bild einfach über das Bild gelegt, dessen Ecken abgerundet werden sollen, so dass die Ecken mit dem Bild in der entsprechenden Größe übereinstimmen. Die CSS-Datei, in der dies geschieht, lautet aquí . Suchen Sie nach "rounders" (eine CSS-Verschönerung könnte hier nützlich sein).

Answer 4

Probieren Sie die jquery Plugin für abgerundete Ecken . Ich denke, das kann tun, was Sie suchen

Answer 5

Ich glaube, du irrst dich - sieh dir das Bild an, wo die großen Aufschriften zu sehen sind -

http://pad3.whstatic.com/skins/WikiHow/images/actionBox_background_curl.png

... und hier ist das Bild, das über dem Hauptcontainer div (div.actions_shell) liegt -

http://pad1.whstatic.com/skins/WikiHow/images/actions_top.png

... beide enthalten abgerundete Ecken.

Was die Thumbnails im "Featured"-Bereich angeht, so überlagern sie einfach ein .png, das bis auf die weißen, abgerundeten Ecken transparent ist:

http://pad1.whstatic.com/skins/WikiHow/images/corner_sprite.png