589 pregleda
Zoran Marković u rubrici Web Dizajn od Zoran Marković (3.9k bodova)
Kako mogu prilikom izrade web-dizajna prikazati zaobljene kuteve slike pomoću CSS-a?

Prijavite se ili registrirajte kako biste odgovorili na ovo pitanje.

1 odgovor

+6 glasa
Marko Radić od Marko Radić (8.7k 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 od Goran Dren (6.1k bodova)
uuu, ovo je jedan od boljih odgovora na znatku

Slična pitanja

2 odgovora
Zoran Jurić 11.01.2014. pitanje u rubrici Web Dizajn od Zoran Jurić (8.6k bodova)
1 odgovor
Goran Dren 08.04.2014. pitanje u rubrici Web Dizajn od Goran Dren (6.1k bodova)
1 odgovor
Zoran Jurić 11.01.2014. pitanje u rubrici Web Dizajn od Zoran Jurić (8.6k bodova)
2 odgovora
1 odgovor
Znatko medijski pokriva
MONEY MOTION 2023
<< the only FinTech conference you should attend >>

Zagreb, 9. - 10. ožujka 2023.
ULAZNICE
Znatko medijski pokriva

WINE EnoGASTRO Vip Event 2023

WINE EnoGASTRO Vip Event 2023


Rijeka, 1. ožujka 2023.
Novigrad (Istra), 3. ožujka 2023.
Split, 15. ožujka 2023.
Zadar, 17. ožujka 2023.
Zagreb, 29. ožujka 2023.

Besplatan ulaz za uzvanike

Medijska platforma Znatko

NAJNOVIJE VIJESTI

Impressum | Znatkova redakcija

10.1k pitanja

16.1k odgovora

3.9k komentara

1.4k korisnika

...