Bilder abrunden mit CSS?

[Michel]

Hallo,
ich bin mit einem Relaunch einer Internetseite befasst und habe eine Frage bezüglich CSS. Ist es möglich via CSS die unteren Ecken eines Bildes abzurunden, oder mit CSS ein transparentes GIF/PNG, das diese abrundenen Pixel enthält, drüber zu legen ohne das der Link dadurch kaputt geht?

Problem ist, die Seite ist relativ groß und mit vielen Bildern bzw. Screenshots, daher kann ich nicht alle im Grafikprogramm bearbeiten und dann wieder hochladen... und wäre ja blöd, falls mal wieder ein Relaunch ansteht...

Besten Dank!
Michel

[Ingo Turski]

Hi,

Ist es möglich via CSS die unteren Ecken eines Bildes abzurunden,

nein.

oder mit CSS ein transparentes GIF/PNG, das diese abrundenen Pixel enthält, drüber zu legen ohne das der Link dadurch kaputt geht?

noch nicht ausprobiert, aber wenn das Bild in einem gleichgroß dimensioniertem Block-Element mit position:relative steckt, sollte man zwei kleine GIFs hierin entsprechend drüberlegen können. Allerdings würden _transparente_ Grafiken wohl wenig Sinn machen.

freundliche Grüße
Ingo

[Michel]

Schade, dachte, weil Mozilla.org ja oben ihre Menüpunkte auch mit CSS irgendwie abgerundet haben soll, werd nur aus dem CSS absolut nicht schlau.

[Ingo Turski]

Hi,

Schade, dachte, weil Mozilla.org ja oben ihre Menüpunkte auch mit CSS irgendwie abgerundet haben soll, werd nur aus dem CSS absolut nicht schlau.

das ist ein Vorgriff auf CSS 3 - abgerundete border. Aber wie ich Dich verstanden habe, willst Du doch die Bilder selbst abrunden, oder?

freundliche Grüße
Ingo

[Avalon]

Schade, dachte, weil Mozilla.org ja oben ihre Menüpunkte auch mit CSS irgendwie abgerundet haben soll, werd nur aus dem CSS absolut nicht schlau.

Wenn Du wissen willst mit welchen CSS-Eigenschaften Mozilla den Browser gestalltet, dann starte den DOM-Inspektor und lade folgende URI:
chrome://navigator/content/navigator.xul
Im oberen rechten Fenster wählst Du im Pull Down Menu: CSS Style Rules.
Dann ist Dir alles zugänglich.

Übrigens für firefox mußt Du in obiger URI nur navigator durch browser ersetzen.

Gruß
Avalon

[MudGuard]

Hi,

Schade, dachte, weil Mozilla.org ja oben ihre Menüpunkte auch mit CSS irgendwie abgerundet haben soll, werd nur aus dem CSS absolut nicht schlau.

ja, das ist mit -moz-border-radius gemacht.
Das wirkt sich zwar auf die Hintergrundfarbe aus - diese wird nur innerhalb der border dargestellt, ein Hintergrundbild wird jedoch dabei nicht abgerundet, die Ecken stehen

p { -moz-border-radius:30px; width:50px; height:50px; padding:15px; }
.c1 { background-image:url(test.png); border:1px solid black;  }
.c2 { background:#ccf; border:1px solid black;  }
.c3 { background:#cfc;   }

<p class="c1">bla</p>
 <p class="c2">bla</p>
 <p class="c3">bla</p>

erzeugt

-moz-border-radius funktioniert also auch ohne border, aber nicht für Hintergrundbilder.

cu,
Andreas

[twobot]

Problem ist, die Seite ist relativ groß und mit vielen Bildern bzw. Screenshots, daher kann ich nicht alle im Grafikprogramm bearbeiten und dann wieder hochladen... und wäre ja blöd, falls mal wieder ein Relaunch ansteht...»»

Es gibt auch sogenannte "Aktionen" in Photoshop, wenn die Bilder also zb alle auf die gleiche Größe gebracht werden müssen oder sowas kannst du in PS direkt eine Aktion einrichten, im den Ordner sagen wo er die Bilder findet und schon rattern PS alle Bilder automatisch nacheinander durch! Falls jedes Bild individuell bearbeitet werden muss isses natürlich zu viel Arbeit! Greeze