T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« CSS triki za Google CHROME brskalnik
Več nivojski CSS selektorji »
10th September

Zaokroževanje robov s CSS ukazov

Dizajnerji velikokrat uporabljajo zaokrožitve raznih delov vsebine, naslovo itd. Običajno sam zaokrožitev robov rešujem z ozadjem. Težava se pojavi takrat, ko je teh zaokroževanj veliko ali pa se nadaljujejo recimo s kakšnim barvnim prehodom. V praski so pomeni, da slika za ozadje ni majhna, temveč relativno velika. To pa že lahko pomeni težavi pri zelo obiskanih straneh (portalih). Da bi zmanjšali "velikost" spletne strani za dol vleko lahko uporabite za zaokroževanje kar CSS ukaz. Slaba stran tega ukaza je, da ga Internet Explorer ne podpira. Če to vzamemo v zakup, da bodo uporabniki IE pač gledali pravokotnike brez zaokroženih robov, je ta ukaz idealen.

PLAIN TEXT
CSS:
  1. div.box {
  2. -moz-border-radius: 5px;
  3. -webkit-border-radius: 5px;
  4. border: 1px solid #000;
  5. }

Če želite za Safari določiti samo določen kot, potem se poslužujte sledečih ukazov:

PLAIN TEXT
CSS:
  1. -webkit-border-top-left-radius
  2. -webkit-border-top-right-radius
  3. -webkit-border-bottom-left-radius
  4. -webkit-border-bottom-right-radius

S temi ukazi lahko prihranite nekaj povezave, vendar zanemarite uporabnike IE, ki jih je pa na žalost še veliko. Le upamo lahko, da bo IE8 del standardnih nadgradenj v Windovsih (v kar pa osebno dvomim, ker imajo velika podjetja precej aplikacij prirejenih za IE6, tako da ne podpirajo niti IE7).

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Barvni prehodi s CSS
  2. Napredno programiranje v CSS s pomočjo LESS
  3. CSS 3 delovne skupine – zadnji sklepi
  4. CSS 3 oblikovanje – ideje WebKita
  5. Kako ohraniti pregledno strukturo CSS dokumenta
  6. CSS triki – selektorji za Internet Explorer
  7. Več nivojski CSS selektorji
  8. Kdaj uporabiti class in kdaj id oznako za CSS selektorje
  9. CSS triki za Google CHROME brskalnik
  10. Internet Explorer 8 CSS hack

Antony || Wednesday, September 10th, 2008 ob 6:24 am || Splet, Splet (XHTML, CSS) || RSS 2.0 | Dodaj komentar || Trackback


4x komentirano na “Zaokroževanje robov s CSS ukazov”

  1. Carli je napisal:
    September 10th, 2008 ob 7:45 am

    Ja za IE pa uporabiš jquery corner pa je stvar rešena. Po mojih izkušnjah je IE pri temu pluginu, kar se daj dobro podprt. Uporaba je pa še enostavnejša ...

  2. brezimenko je napisal:
    September 10th, 2008 ob 8:13 am

    Če bi dizajnerji vsaj približno vedl, kuko zgleda eno njihovo svaritev v html in css spravit, bi verjetno bl šparal s fensi elementi :)

  3. Antony je napisal:
    September 10th, 2008 ob 8:24 am

    brezimenko > jap maš res, sam sem pa velikokrat v obeh vlogah in lahko dizajn malo prilagodim razrezu. Slaba plat tega pa je, da ne moreš narest napredka kot dizajner, ker si obremenjen s kodo. V malih projektih je to mogoče res bolj optimalno, pri velikih projektih je pa bolje, da se dizajnerska ekipa ukvarja samo z interfaceom in obliko, ostalo pa prepustijo drugim specialistom.

  4. Mitja je napisal:
    September 11th, 2008 ob 9:39 am

    http://www.html.it/articoli/niftycube/index.html

    s tem dela tudi na IE 6 in 7

Dodaj komentar