CSS: Zaobljeni rubovi 2

Power webaši, preskočite ovaj post.

Prije nekoliko godina zaobljeni rubovi (pravokutni komad web stranice koji nema oštre rubove) bili su tema za pričat tjedan+ dana: mnogo je različitih rješenja napravljeno da bi se oni postigli.

Vidi npr.:

1. 4 Ways to Get Rounded Corners Using CSS
2. 25 Rounded Corners Techniques with CSS
3. Best Collection of CSS Rounded Corners Tutorials
4. List of javascript rounded corners

Kako danas CSS s verzijom 3 ide dalje ili bar pojedini proizvođači web preglednika imaju svoje prefikse nije problem napraviti jednostavno i kratko rješenje za postizanje istih.

• • • • •

Specifične CSS prefikse (prefikse za CSS atribute) imaju Firefox, Safari i Konqueror. Ostali bi trebali kužiti CSS3. Jedini je problem, pogađate, Internet Explorer.

Srećom, netko je bio vrijedan programer pa je riješio problem za IE6+. Potrebno je skinuti HTC datoteku border-radius.htc (a href="http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser">izvor) i dodati behavior atribut u CSS.

Cijeli CSS kod onda izgleda ovako:

div.rounded
{
  -moz-border-radius: 10px; /** firefox 1+ **/
  -webkit-border-radius: 10px; /** safari **/
  border-radius: 10px; /** css 3 **/
  -khtml-border-radius: 10px; /** konqueror **/
  behavior:url('border-radius.htc'); /** ie6+ **/
}

Radi u:

Demo se nalazi ovdje, ZIP za download ondje (2.7K).

Vezani postovi:

- CSS: Targetiranje preglednika
- CSS: Zamjena teksta slikom
- Utopija za web majstore
- Zaobljeni rubovi