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

reference spletnih strani
6th April

CSS 3 oblikovanje – ideje WebKita

WebKit je že pred časom predstavil nekaj idej oz dodatnih funkcij, ki naj bi se vključile v CSS standard verzije 3.

Njihov predlog se nanaša na trenutno pomanjkljivost “uradne” verzije CSS z (ne)možnost obračanja elementov okrog osi. Sam sem velikokrat želel tekst obrniti vzdolžno, vendar sem se moral zateči k slikami. Dodatna težava nastopi, če želimo okrog osi obračati dinamično generirano vsebino. Obstajajo sicer opcije z javascritom, vendar bi bilo lahko resnično enostavno, če bi lahko s CSS ukazom določili recimo kot obračanja teksta ali slike.

WebKit (Apple Safari) ima pripravljeno delovno različico predloga za nov CSS ukaz. Predlog predvideva obračanje okrog osi in simetrično(skale) in nesimetrično (skew) spreminjanje velikosti.

Oblikovanje je zaenkrat predvideno z uporabo -webkit-transform ukaza, seveda le za Safari brskalnik. Podpira verižno dodajanje ukazov, s katerimi poljudno oblikujemo element.
Dodatno so predstavili ukaz -webkit-transform-origin , ki naj bi določal center spreminjanja (izven centra)

Primeri:

scale, scaleX, scaleY – Scale an object around the transform origin. These functions take a number as an argument. The number can be negative (if you want to flip an object).
rotate – Rotate an object around the transform origin. This function takes a CSS angle (e.g., degrees or radian units).
translate, translateX, translateY – Translate an object. These functions take lengths or percentages as arguments. Percentages are relative to the border box of the object.
skew, skewX, skewY – Skew an object. These functions take CSS angles.
matrix – Specify a full affine transform matrix. This function takes six values. The last two values are the tx and ty, and they can be lengths or percentages.

Deli s skupnostjo:

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

Podobni članki:

  1. Zaokroževanje robov s CSS ukazov
  2. CSS 3 delovne skupine – zadnji sklepi
  3. Barvni prehodi s CSS
  4. Več nivojski CSS selektorji
  5. Napredno programiranje v CSS s pomočjo LESS
  6. CSS triki za Google CHROME brskalnik
  7. CSS triki – selektorji za Internet Explorer
  8. Kako ohraniti pregledno strukturo CSS dokumenta
  9. Internet Explorer 8 CSS hack
  10. Javascript predogled slike – CSS opacity – picture preview – picture fade

2x komentirano na “CSS 3 oblikovanje – ideje WebKita”

  1. zmenki je napisal:

    Zdaj ko je izšel internet explorer RC, bodo počasi vse strani začele uporabljati CSS3.
    Nič več nadležnih fint z zaokroževanjem robov in podobno.

  2. Chuck Norris je napisal:

    Tipičen primer kako industrija in standardi zaostajajo za zahevami trga in uporabniki. Kje so bili te standardi 5-7 let nazaj ko so rounded corners bili še zanimivost in prednost.

Dodaj komentar