Kako prikazati zaobljene kuteve slike pomoću CSS-a?

418 pogleda
blagonix pitano 14.04.2015. u kategoriji Web Dizajn od korisnika blagonix Superaktivan (1,171 bodova)
Kako mogu prilikom izrade web-dizajna prikazati zaobljene kuteve slike pomoću CSS-a?

Please log in or register to answer this question.

1 odgovor

+3 glasova
Marko Radić odgovoreno 14.04.2015. od korisnika Marko Radić Superaktivan (1,499 bodova)

Postavite u <img> tag sljedeću klasu sa ovim property-jima:

img.obli-kutevi {
    border-radius: 25px;
    -moz-border-radius: 15px;
}

 

To možete napraviti i pojedinačno za svaki kut slike. Npr.

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

...ili čak ovako:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

 

Radi kompatibilnosti sa Mozilla-om (Firefox) uvijek koristite ove pandane....

W3C Mozilla (Firefox)
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft

 

Za kraj evo nekoliko primjera upotrebe za različite oble oblike kuteve:

#Primjer_A {
   height: 65px;
   width:160px;
  -moz-border-radius-bottomright: 50px;
  border-bottom-right-radius: 50px;
}

#Primjer_B {
  height: 65px;
  width:160px;
  -moz-border-radius-bottomright: 50px 25px;
  border-bottom-right-radius: 50px 25px;
}

#Primjer_C {
   height: 65px;
   width:160px;
   -moz-border-radius-bottomright: 25px 50px;
   border-bottom-right-radius: 25px 50px;
}

#Primjer_D {
  height: 5em;
  width: 12em;
  -moz-border-radius: 1em 4em 1em 4em;
  border-radius: 1em 4em 1em 4em;
}

#Primjer_E {
  height: 65px;
  width:160px;
  -moz-border-radius: 25px 10px / 10px 25px;
  border-radius: 25px 10px / 10px 25px;
}

#Primjer_F {
  height: 70px;
  width: 70px;
  -moz-border-radius: 35px;
  border-radius: 35px;
}

Nadam se da sam pomogao.

Goran Dren commented 18.03.2016. od korisnika Goran Dren Superaktivan (3,893 bodova)
uuu, ovo je jedan od boljih odgovora na znatku

Slična pitanja

1 odgovor 505 pogleda
Zoran pitano 11.01.2014. u kategoriji Web Dizajn od korisnika Zoran Superaktivan (4,415 bodova)
1 odgovor 872 pogleda
1 odgovor 758 pogleda
Zoran pitano 11.01.2014. u kategoriji Web Dizajn od korisnika Zoran Superaktivan (4,415 bodova)
1 odgovor 132 pogleda
Marko Radić pitano 22.04.2015. u kategoriji Web Dizajn od korisnika Marko Radić Superaktivan (1,499 bodova)
1 odgovor 237 pogleda
1 odgovor 252 pogleda
Goran Dren pitano 06.02.2014. u kategoriji Web Dizajn od korisnika Goran Dren Superaktivan (3,893 bodova)
1 odgovor 226 pogleda
Zoran pitano 11.01.2014. u kategoriji Web Dizajn od korisnika Zoran Superaktivan (4,415 bodova)
1 odgovor 140 pogleda
Ivanhoe M. pitano 20.01.2014. u kategoriji Web Programiranje od korisnika Ivanhoe M. Superaktivan (6,004 bodova)
Znatko

Znatko je edukativni web servis online zajednice za pretraživanje pitanja, postavljanje pitanja i odgovaranje na pitanja.

..:: POSTAVITE PITANJE ::..

Znatko Vam može pomoći!

2,046 pitanja

2,659 odgovora

1,319 komentara

703 korisnika

Gdje pratiti Znatka?

Koga preporuča Znatko?



Web::Edukacija

CISEx

Kontaktirajte Znatka kako biste mogli i Vi postati preporučeni partneri te sudjelovati u mjesečnom nagradnom fondu!
...