Bilder & abgerundete Ecken

[CrawlerSkiline]

Hallo allerseits

Ich bräuchte mal wieder eure Hilfe. Ich baue gerade ein neues Design für den Intranetauftritt unserer Abteilung. Dort habte ich eine Box mit einer Breite von 560px
und eine Höhe von 160px. In diese Box möchte ich ein Bild legen, aber egal welches
Bild darein kommt es soll abgerundete Ecken haben. Leider habe ich null ahnung wie
ich dies bewerkstelligen soll.

Hoffe ihr habt irgendwelche Tipps/Lösungsvorschläge für mich.

MfG euer Ski.

 

[fotosaugsburg]

AW: Bilder & abgerundete Ecken

Die Box ist innen eckig, richtig.
Als Idee :
Lege das Bild als Hintergrund in die Box darüber ein transparentes GIF (Oder baue ein DIV Container) das einen innen abgerundeten Rahmen hat.

 

[Silvio]

AW: Bilder & abgerundete Ecken

Schau mal hier:
CSS: Abgerundete Ecken in allen Browsern darstellen - Matthias Schütz

Das dürfte Dir schnell weiterhelfen.

 

[CrawlerSkiline]

AW: Bilder & abgerundete Ecken

Die Box ist innen eckig, richtig.
Als Idee :
Lege das Bild als Hintergrund in die Box darüber ein transparentes GIF (Oder baue ein DIV Container) das einen innen abgerundeten Rahmen hat.

Tut mir leid hab deine Idee nicht ganz verstanden.

Schau mal hier:
CSS: Abgerundete Ecken in allen Browsern darstellen - Matthias Schütz

Das dürfte Dir schnell weiterhelfen.

Ja das kenn ich schon aber da gibt es ja wohl wieder ein paar Probleme mit dem
Internet Explorer. Wir arbeiten hier mitlerweile mit IE8 aber an manchen stellen ist
sogar noch IE6 im einsatz (auch wenn ich darauf nicht sooviel acht gebe).
Ich brauche eine Lösung die sicher im Firefox aber vorallem im IE8 ist.

Deine Seite kann ich im IE8 nichtmal öffnen der will was downloaden geht nur mit
Firefox ^^

EDIT: Habe es mitlerweile gelöst. Über jQuery und diesem Plugin


Trotzdem vielen Dank an alle

 

[pascal.k]

AW: Bilder & abgerundete Ecken

Link geht zum jQuery Plugin geht leider nicht: Error 404 - Not Found

 

[CrawlerSkiline]

AW: Bilder & abgerundete Ecken

wurde Zensiert

Naja dann halt direct Link zu den Beispielen:


Oben auch editiert.

 

[fakerer]

AW: Bilder & abgerundete Ecken

hier noch eine Jquery Lösung JQuery Corner Demo klappt auch wunderbar, kenn allerdings die andre nicht.

ohne Javascript: Du nimmst sozusagen einen Rahmen wo der ausschnitt für das Bild abgerundete kanten hat oder du nimmst nur die ecken je nachdem wie du es brauchst. Und das eigentlich Bild gibst dann als background rein.

 

[CrawlerSkiline]

AW: Bilder & abgerundete Ecken

Ja genau den hatte ich auch gefunden nur da wusste ich noch nicht wie man mit JQuery umgeht xD
Eigentlich ja einfach aber danach fand ich das nicht mehr wieder Danke für den Link

 

[Br0]

AW: Bilder & abgerundete Ecken

Eine möglichkeit OHNE Javascript:

lege dir eine gif oder png Datei an mit folgendem (oder ähnlichem) Inhalt:



Positioniere dies und setze es mit z-index in den Vordergrund.

Anschliessend positionierst du dein gewünschtes Bild bzw. den Div-Container an die selbe stelle und legst es mit z-index hinter die erste Grafik.

Nun kann dieser Div-Container mit deinen Bildern befüllt werden und die Bilder haben immer einen Abgerundeten Rahmen.



Eine Live Version davon findest du hier:
my.ucart.de/rahmen/

mfg

 

[holger2]

AW: Bilder & abgerundete Ecken

am besten nimmst du dazu eein transparentes GIF ist eigentlich so üblich.

 

[ben3plus]

AW: Bilder & abgerundete Ecken

Mit der GIF-Komprimierung musst Du aufpassen,
ob sie in Deinem Fall geeignet ist.
PNG unterstützt auch Tranzparenzen.

- lade Dein Bild in den Photoshop
- runde die Ecken ab
- Hintergrund muss tranzparent sein
- Für WEB und Geräte speichern
- PNG 24 mit Deinen gewünschten Einstellungen