Bilder Ecken runden

[skifan]

Versuch einer neuen (dummysicheren) Erklärung,...wurde teilweise schon von Norre und Unkraut erwähnt...

Dein Web-Hintergrund hat sicher einen Farbnamen als Hexadez. oder als RGB-Farbe. Wenn du den Farbnamen nicht weist, hol dir den pkColorpicker auf den Rechner. Der legt sich als Fenster immer über alle geöffneten Progs. Damit ermittelst du den Farbwert deines WEB-Seitenhintergrundes, am besten RGB.

- Dein Bild zum Abrunden in Photopaint (PP) öffnen und mit mit strg+D duplizieren (Andockfenster >Objekte geöffnet), ...du erhältst ein neues Objekt aus dem Hintergrund.

- jetzt den Hintergrund anklicken, Andockfenster > Farbe öffnen und darin den ermittelten Farbwert eingeben.

- Doppelklick auf Hilfsmittel >Füllung und dann Vordergrundfarbe anklicken und den Hintergrund mit dem Webseitenhintergrund füllen. Das siehst du nur im Andockfenster >Objekte

- Hilfsmittel >Rechteck auswählen, in der Eigenschaftsleiste den gewünschten Radius einstellen und das Rechteck mit den abgerundeten Ecken aufziehen,...es entsteht automatisch ein neues Objekt,...das Rechteck über >Objektauswahl so bearbeiten bis es deinen Vorstellungen entspricht.

- jetzt >strg+M drücken und das abger. Rechteck maskieren, nun in die Ebene >Objekt (also das duplizierte jpg) wechseln und >strg+Pfeil-nach-oben-Taste drücken und es ensteht ein neues Objekt mit abgerundeten Ecken.

- jetzt das über das Hilfsmittel >Rechteck erstellte Rechteck und das zuerst duplizierte JPG ausblenden (Auge) und du siehst ein jpg mit abger. Ecken mit dem Hintergrund deiner Webseite

Naja,...vielleicht doch zu kompliziert ? ;-)

Gruß HaJö

[Administrator]

Hallo,

für Farben habe ich auch etwas auf meiner HP, siehe hier:
http://www.juergens-workshops.de/cgi-bin/color.cgi

Bis dann
Jürgen

[Unkraut]

und so sehen die abgerundete Ecken in html & CSS aus. Funktioniert im Firefox und IE. (mehr Browser zum Testen habe ich z. Z. nicht. )

Da der Code bestimmt auch viel eleganter geht, verstecke ich ihn hier.

Code:

<style type="text/css">
div.bild3 {
background-image:url('images/post.jpg');
background-repeat: no-repeat;
width: 220px;
height: 204px;
border-radius: 30px;border: none;
}
</style>

[skifan]

...nun, scheint die einfachste Lösung zu sein..., wenn man sich ein wenig mit CSS auskennt...

Gruß HaJö