547 pregleda
Zoran Marković u rubrici Web Dizajn od Zoran Marković [Superaktivan] (3.3k 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ć [Ekstraktivan] (7.0k 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 [Ekstraktivan] (5.4k bodova)
uuu, ovo je jedan od boljih odgovora na znatku

Slična pitanja

2 odgovora 1.4k pregleda
1 odgovor 1.5k pregleda
1 odgovor 1.4k pregleda
Zoran Jurić 11.01.2014. pitanje u rubrici Web Dizajn od Zoran Jurić [Ekstraktivan] (7.3k bodova)
1 odgovor 476 pregleda
1 odgovor 377 pregleda
1 odgovor 421 pregleda
Goran Dren 06.02.2014. pitanje u rubrici Web Dizajn od Goran Dren [Ekstraktivan] (5.4k bodova)
1 odgovor 888 pregleda
Zoran Jurić 11.01.2014. pitanje u rubrici Web Dizajn od Zoran Jurić [Ekstraktivan] (7.3k bodova)
1 odgovor 267 pregleda
1 odgovor 2.4k pregleda
Zoran Jurić 11.01.2014. pitanje u rubrici Web Dizajn od Zoran Jurić [Ekstraktivan] (7.3k bodova)
1 odgovor 1.2k pregleda
Znatko medijski pokriva

CRO commerce 2022



Najnoviji eCommerce trendovi na četvrtoj CRO commerce konferenciji u organizaciji trgovaca

Zagreb, 07.10.2022.

ULAZNICE
Znatko medijski pokriva

Prijava
Znatko medijski pokriva


Ignite the Spark

Zagreb, 13.10.2022.

ULAZNICE
Znatko medijski pokriva

‘ko?VA! Konferencija VIRTUALNI ASISTENT


Prva konferencija u Hrvatskoj namijenjena virtualnim asistentima i svima koje zanima svijet virtualne asistencije

Zagreb, 21.10.2022.

Ulaznice putem ENTRIO sustava
Znatko medijski pokriva


Phygital – the future of retail!

Konferencija namijenjena robi široke potrošnje (FMCG).

22.10.2022.
Mozaik Centar Zagreb


PRIJAVA
Znatko medijski pokriva

20. ZFF
Zagreb Film Festival



Zagreb, 23.-30.10.2022.

Prijave uskoro!

Medijska platforma Znatko

NAJNOVIJE VIJESTI

Impressum | Znatkova redakcija

Gdje pratiti Znatka?



[ Pretraživanje Znatka ]

9.3k pitanja

14.8k odgovora

3.2k komentara

1.4k korisnika

...