Runde hjørner på billeder

Brug imagemagick:

#repox: Super kode, nu er mit eneste problem bare at billederne kan have forskellige størrelser. Så umiddelbart så kan en fast maske ikke bruges, da rundingerne skal være den samme på store og på små billeder.

Jeg mener engang at have forsøgt med: http://www.assemblysys.com/dataServices/php_roundedCorners.php
Måske dur den for dig?

Har set på det, men kan ikke bruge det, da jeg ikke må erstatte original billedet med det "nye" billed som har runde hjørner. Hvis jeg bare måtte det ville det være så meget lettere...

Havde selv overvejet noget med at lave 1 div som har runde hjørner i CSS'en og så smide billedet ind i den div gennem et "<img src=...... />" tag. Men er ikke sikker på om den så overskrive det firkantede billed og tvinge den til at vise det med runde hjørner.

Jeg er nået så langt som at lave en div box med runnde hjørner, kun bestående af en div, og noget CSS. Men lige så snart at jeg ligger et billed ind i samme størrelse som div'en er så overskriver billedet de runde hjørner... PIV TUD!!!

Jeg er ret sikker på, at den kode kun viser dig det nygenererede billede. Er du sikker på, at det gamle bliver overskrevet? Jeg tror endda, at man med en ekstra linje kunne få koden til at gemme det nye billede under et andet navn.

CSS-alternativet kunne også være at lave runde hjørner på billederne vha.:

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

Det virker dog kun i nye browsere - ældre browsere ville bare vise billederne normalt. Indtil folk tager sig sammen og upgraderer. :)

Mit CSS-alternativ kræver i øvrigt, at man lægger det direkte på billedet. Ikke på div'en udenom, sådan som det lyder som om du har forsøgt.

Du er i sandhed min nye gud w13!!!! I LOOOOOOOOOOOOOOOOVE YOU!!! Har siddet og bakset med det siden igår morges, og den kode du skrev:

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

fik det hele til at virke præcis som jeg ville have det!

Smid et svar og du skal blive belønnet for din guddommelige viden!

Hehe. ;) Selv tak.

Tak for point! :)

var så lidt... eneste problem jeg har nu er at hele den virksomhed jeg arbejder for er en microsoft virksomhed, ment på den måde at de bruger EI, og alle deres web-applications er C++ eller C#.. Så den kode du gav mig virker kun i Chrome og FF 4, hvilket de ikke bruger!! TUD! men må lave et eller andet smart..

skal nok lige poste det her når jeg har fået det lavet! :D

Så tror jeg altså stadig, at du kan bruge den der anden kode. :) Det er PHP og derved Cross-browser. (Hvis din server altså kører PHP, det er jo ikke ligefrem typisk Microsoft. :)

Jeg tror bare, du skal rette 5. sidste linje:

imagejpeg($image);

til:

// Save the image.
imagejpeg($image, "mappe/billede.jpg", 100) or die("Cant save image");

Så retter du bare "mappe/billede.jpg" til den sti, du ønsker. Muligvis vil den have stien med serverpath foran. Men det finder du nok ud af. :) Ellers så bare sig til, og husk at poste eventuelle fejlbeskeder. =)

Runde hjørner i CSS virker dog i IE9, hører jeg! :)

Hehe jeg har løst det.. Som jeg sagde til min chef, så virker de runde hjørner i Chrome og FF 4 beta, men ikke i IE, før om omkring 1 år, men hvis jeg fik en extra dag til at lave hele projektet færdigt i så kunne jeg godt lave en script så det virkede i alle browsere.. Hans svar dertil kom instant og var "Vi lever med kantede hjørner et års tid endnu"

Virker bare epic den måde han sagde det på! HAHA!:D

Sådan! ;)

Jeg har leget lidt med det her:

http://www.thesug.org/Blogs/kyles/archive/2009/04/17/Karate_Corners.aspx.aspx

godt nok med en gif med en gennemsigtig cirkel - for du må vel ikke bruge png - eller hvad? for så ville problemet vel være løst.

Sobr>> Hvorfor skulle man ikke måtte bruge .png? :)

Fordi png's gennemsigtighed ikke understøttes af ældre browsere (det gennemsigtige blir blåt) - fra IE 7 og op er de ok...

Jeg tror faktisk, at transparente PNG'er virker, når de sættes som baggrund vha. CSS. Ellers kan man jo bare bruge pngfix.js (http://homepage.ntlworld.com/bobosola/pnghowto.htm), så burde der ingen problemer være i gamle browsere. (Men jeg mener netop, at pngfix løser problemet ved at sætte PNG'er som baggrunde vha. CSS..)

Ja, det ku jo være super lækkert, hvis man ellers ku få det til at funke - det kan jeg desværre ikke - hverken med css eller pngfix.

Ta' lige selv og prøv og kom med løsningen ;D

Jeg bruger selv pngfix, når jeg laver hjemmesider, og tester altid i IE6 (vha. www.Browsershots.org), hvor det vises fint.

Nå W13 - nu har jeg været en tur på Browsershots og har kigget på din side - jeg ser godt nok hjørner på dit fine design - kan også se at kaldet til javascriptet ligger i body (jeg har læst at det skal ligge i head).
Men jeg har også surfet en del rundt på nettet og afprøvet forskellige pngfix og det bedste jeg fandt var her:

http://dillerdesign.com/experiment/DD_belatedPNG/

med denne kan man positionere en png baggrund i css, det kunne man ikke med alle de andre fix.

Mit pngfix blev nødt til at ligge nederst i <body>, for ellers kørte det nogle gange for tidligt og fik ikke de fleste png-billeder med.

Det fungerer sådan, at jeg bruger png-billeder helt normalt og sætter siden op, så den ser fin ud i mine nye browsere, og så indsætter jeg png-fix nederst i body, som automatisk får det til at virke i IE6. Så positionering o. lign. gør jeg helt selv i min CSS, ligesom jeg ville have gjort med jpeg-billeder.

Kan se at i har en del snakken omkring alt det her. Hvis det skulle være af interesse så laver jeg en function som laver de runde hjørner for mig på alle billeder, Uanset størrelse på billedet. Er det noget jeg skal smide op når den er færdig? :D