Zaokrąglone rogi w obrazku


(Kloc221) #1

Witam

Mam kilka obrazków na swojej stronie i chciał bym aby każdy z nich miał zaokrąglone rogi - i chcę to zrobić w kodzie, ale nie wiem jak ? Nie chciał bym rysować w każdym obrazku zaokrągleń tylko mieć jakieś uniwersalne jak to zrobić ?


(Kontakt) #2

?q=zaokr%C4%85glone+rogi+css


(MaXDemage) #3

Sprawa nie jest taka prosta.... poniewaz chodzi o zaokraglenie obrazków.

Wyjściem byłoby wpisanie w google "zaokrąglone rogi obrazków w css",

ale na szybko odpowiedzieć mogę, że żadne border-radius dla img nie będą działać.

Najłatwiej ubrać każdy obrazek w jakiś kontener i kombinować z overflowem kontenera.

np.

xxx[/code]

Nie jest to najładniejsze wyjście. Ale mniej więcej daje pojęcie o sytuacji. Dalsze szukanie po ang. zwłaszcza stronach może nam znaleźć gotowe wtyczki do jquery robiące podobne rzeczy.


(tomilipin) #4

Możesz też umieścić obrazek jako tło DIVa, w którym umieścisz kolejnego DIVa z zaokrąglonymi rogami. Bez żadnego overflowa.


(Kloc221) #5

Ja pomyślałem, że na obrazek nałożę przezroczysty obrazek z zaokrąglonymi rogami ? tylko jak dać obrazek na obrazek ?


(MaXDemage) #6

Pozwolę sobie na dygresję i dyskusję ;p

To rozwiązanie jest oczywiście dobre - i sam często je stosowałem, ale niepolecane. Powoduje ono że ze struktury dokumentu znika obrazek.

Jeśli mamy do czynienia z ozdobnikiem, czemu nie. Jeśli takie rozwiązanie stosujemy w galerii odnośnie zdjęć... jest to semantycznie (;p) niepoprawne.

Obrazek na obrazek możesz dać...korzystając z kontenerów i pozycjonowania absolutnego lub stosując obrazek jako background dla obrazka przezroczystego png. :wink: więc koniec końców sytuacja naprawdę nieopłacalna. Nie polecam tej motody.

Jeśli masz problemy z rozkimaniem tego w CSS zagłęb się następujące właściwości stylów:

border-radius - zaokrągla rogi

overflow - określa co robić z elementami wykraczającymi poza rame obecnego elemetu

position - ustawia tryb pozycji

top, left, right, bottom - ustalają odstepy od góry, lewa, prawa, dołu.

i naprawdę poszukaj w internecie rozwiązań... wyważasz szeroko otwarte drzwi, szkoda Twoich i naszych sił na to.


(Damgora) #7

z canvas i js (nie wiem dlaczego nie działa z Firefoxem, w Operze jest ok)

function zaokraglijRogi(img, size){

    if (size>img.width/2 || size>img.height/2)

        size = (img.height>img.width)?img.width/2:img.height/2;    

    var canvas = document.createElement('CANVAS');

    canvas.setAttribute('width', img.width);

    canvas.setAttribute('height', img.height);

    var ctx = canvas.getContext('2d');

    ctx.drawImage(img, 0, 0);

    ctx.globalCompositeOperation = 'destination-in';    

    ctx.beginPath();

    ctx.moveTo(size, 0);

    ctx.lineTo(img.width-size, 0)

    ctx.arc(img.width-size, size, size, -Math.PI/2, 0, false);

    ctx.lineTo(img.width, img.height-size);

    ctx.arc(img.width-size, img.height-size, size, 0, Math.PI/2, false);

    ctx.lineTo(size, img.height);

    ctx.arc(size, img.height-size, size, Math.PI/2, Math.PI, false);

    ctx.lineTo(0, size);

    ctx.arc(size, size, size, Math.PI, 3*Math.PI/2, false);

    ctx.fill();

    img.setAttribute('src', canvas.toDataURL());

}

(floyd) #8

Z tymi szeroko otwartymi drzwiami to lekka przesada w tym przypadku, a jeśli chodzi o oszczędność sił, to można dodać, że border-radius działa tylko w przeglądarce Firefox czy Chrome więc szkoda sił na szukanie jeśli strona ma być i pod inne przeglądarki. :slight_smile:


(MaXDemage) #9

Też w Operze i Safari. I ponoć IE9 również. Zostaje tylko IE6, 7, 8... ;p


(floyd) #10

Niezła resztówka stanowiąca 70% rynku :slight_smile: Na dodatek w Operze trzeba użyć np. polecenia:

border-radius: 0 0 20px 20px w Firefoksie -moz-border-radius: 0 0 20px 20px; a w Chrome też trochę inaczej działa. W innych przeglądarkach też pewnie różnie bywa, jednym słowem nieźle.


(Remek Dobrowolski) #11

Rozwiązanie uniwersalne: http://www.webdesignerwall.com/tutorial ... th-jquery/

Pozdrawiam.


(floyd) #12

Jakoś nie widzę żeby to działało pod IE. :frowning: