Colțuri rotunjite cross-browser

Limbaje de Programare HTML & CSS
1

Am o problema cu “CSS Rounded Corners In All Browsers” nu inteleg prea bine despre ce este vorba, am intampinat o problema sa inserez intr-un html o poza cu marginile rotunjite iar browser-ul imi afiseaza poza rotunjita la margini, dar diferenta pana la o imagine normala imi afiseaza o bucata mica alba ca sa imi faca poza patrata… cum pot rezolva asta… nu prea inteleg pe internet mai nimic, sunt diferite explicatii.

2
  1. Nu mai scrie cu bold
  • Arată-ne ce ai făcut până acum și cum nu merge (i.e. codepen.io)
3
  1. E imposibil de facut ceva total cross browser sau ia mult prea mult timp, Pe tine te intereseaza IE8 in sus si restul browserelor nu mai vechi de 2 ani, adica Chrome, Firefox, Opera, Safari 6+, IE 8+
  2. De ce are poza colturile rotunjite la margini ? Foloseste o imagine normala si elementul css border-radius. Pe elementul img ti se aplica un background-color alb din ceva motiv sau un margin nedorit, foloseste un css reset sau mai bine normalize css.

https://necolas.github.io/normalize.css/ - e un fisier .css pe care il incluzi inainte de stilurile tale ca sa normalizeze stilurile pe toate browserele.

Seteaza border-radius cu procentaj
.coltrotunjit{border-radius: 50%;}

1 Like
4

7kb pentru niște colțuri rotunjite? Nu-i cam… mult? :slight_smile:

5

E 2kb cu minify si il scapa de 90% din problemele pe care nu are de unde le sti.
Dupa normalize macar ai ceva siguranta ca e vina ta daca ceva nu merge.

6

nu exista imagini cu colturi rotunjite. indiferent cum manipulezi imaginea propriu zisa (rotunjesti colulturi, adaugi diferite chenare, etc etc) imaginea o as se salveze cu colturi drepte. foloseste png transparent.

PS: eu asta am inteles ca ai facut.

7

Am rezolvat intr-un final, raspunsul era

-moz-border-radius: X px;
-webkit-border-radius: Y px;
-khtml-border-radius: Z px;
border-radius: X px;

8

border-radius nu mai are nevoie de prefix de mulți ani.

Dar dacă ai rezolvat cu border-radius… nu pot să nu mă întreb: cum ai încercat inițial?

1 Like
9

Un link cu mai multe exemple si explicatii : Working with Shapes in Web Design | CSS-Tricks - CSS-Tricks

Advantages:

  • well supported by modern browsers.
  • only requires a tiny amount of CSS.
10

Sincer ? La cum sunt dat peste cap cu ele nici eu nu mai stiu, totusi nimeni nu s-a nascut inca sa le stie pe toate