Hallo hab mal ne Frage:

Kann man die Ecken eines Bildes mit CSS abrunden? Hat sich schon jemand mit dem Thema ausseinander gesetzt?

__________________
Kein Code der Welt ist es Wert ...

Afaik - Ja, aber schwierig.

Was du tun musst:
Das Bild als Hintergrund einbinden.
Dadrüber ein Bild mit abgerundeten Ecken als Rahmen, die Mitte dann transparent lassen.

Nachteil: Entweder Png benutzen (kann der IE nicht), oder Gif, was dann aber pixlig wird.

__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder

Mittlerweile gibts eine Menge an Tutorials zu runden Ecken im Netz.

Such mal bei google nach "rounded corners" da sollten eine Menge Tipps und Tricks rauskommen.

alistapart.com hat dazu einen schon älteren Artikel, sozusagen der Beginn der Sache.

Mozilla hat sowas bereits proprietär mit moz-border-radius....
IE kanns nicht, aber in CSS 3 solls angeblich kommen.

grüsse andir

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

hmmmm...

muss ehrlich zugeben das "befriedigt" mich nicht, da ich es für eine Seite bräuchte die wartbar sein sollte und bei der die Photos dann automatisch per css-angabe die Ecken "weg" bekommen

hab zu 95% gewusst das das nicht möglich ist (noch nicht ) ... dachte nur vielleicht habe ich was verpasst und es gibt eine Möglichkeit

*thnx

__________________
Kein Code der Welt ist es Wert ...

@ andir:
z.B. nifty corners (mit JS), sowas meinst du doch, oder? Aber kann man da direkt bilder mit abrunden?

__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder

ja ich weiss, habs auf css4you gelesen
http://www.css4you.de/trickkiste/tr00012.html

hmmm, wird mir nichts anderes übrig bleiben, als zu warten ...

__________________
Kein Code der Welt ist es Wert ...

wenn du das so vor hast, wie ich das evtl. denke, dann kannst du doch einen css container für die Bilder bauen, der die runden Ecken suggeriert und da rein lädst du dann die Bilder?

__________________
Shibby.....

Mein Blog

Es gibt Möglichkeiten, wobei es auf das Bild oder seine Größe nicht ankommt.
Die Dinger sind sogar skalierbar.

Einfach mal durchgucken:


http://www.google.de/search?biw=1024...le-Suche&meta=

grüsse andir

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

interesante variante, nur es geht darum das die seite per cms wartbar sein wird bzw. soll. dh. wenn ein image hochgeladen wird sollte es dann in der Ausgabeseite mit runden Ecken erscheinen.

so müsste das Bild immer auf der gleichen Stelle sein...
wo wir wieder bei dem ersten Vorschlag des Doc-s wären

__________________
Kein Code der Welt ist es Wert ...

@the doc:

Natürlich nicht. Da werden eben per html und css img tags oder andere elemente angesprochen, die dem Image die runden Ecken optisch verpassen.

Die einzige Möglichkeit, die ich sehe, Bilder direkt zu bearbeiten, so dass sie runde Ecken bekommen, ist mit einem batch-konverter (serverseitig) der die Bilder beim Hochladen automatisch bearbeitet, z.B. mit definierter Auswahlmaske, Alphatransparenz usw.

Wenn ein Hintergrund definiert ist ( weiß, schwarz, rot, blau) kann auf Alphatransparenz verzichtet werden. Der Konverter müsste dann eben die Hintergrundfarbe auslesen können und entsprechend verarbeiten können.
Scheint mir recht schwierig zu sein.

Obs da schon Module dafür gibt - k.A., ich glaube Typo3 hat da so eine Erweiterung, die aber ziemlich tricky sein soll.

Allgemein muss man sonst das HTML etwas bearbeiten, was für die meisten nicht in Frage kommt. Man könnte sich aber per code-snippet den entsprechenden Container / Element vordefinieren und einen shortcut zuweisen. Erleichtert die Sache ungemein.

grüsse andir

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte