...
Transforms
Tällä voidaan väännellä ja muokata 2d ja 3d -onjekteja (lähinnä kai kuvia) sivulla. Tähän kuuluu Translate, scale, rotate ja skew -määreet. 3D muunnokset lisää yhden ulottuvuuden muokkauksiin, tätä varten pitää määritellä sivulla jokin vanhempi (parent) jonka suhteen elementtiä sivulla voi 3d-vääntää. Parent voi olla esim taustalla oleva kuva.
Jotta esimerkkikoodit toimisivat, tarvitsee tosiaan Operan uusimman version, joskus jopa kehitysversion, esimerkit:
http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-transform-2d.html Muista demoissa klikata ylhäältä oikea transformaatio päälle. Katsoka esim. näyttävää perspektiivi esimerkkiä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo_perspective_origin.html
Tai katsokaa tätä kuvaa:http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/images/cadrillage_rubick_cube.png
tuolla yhdellä pienellä kuvalla on rakennettu aika vähällä koodilla tämä:http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo_cube.html
huh-huh, vaikuttavaa!
CSS Transitions
Transitions eli muutokset mahdollistavat esim. liikkeen, väri- tai muun muutoksen sivulla. Muutokset liittyvät usein johonkin tapahtumaan sivulla, kuten esim. että vie hiiren johonkin kohtaan sivua.
Demoja & esimerkkikoodia: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-transitions.html
Animaatio, Animation
Animaation avulla voi määritellä muutoksen/liikkeen elementille. Tarvitaan keyframeja ja muutoksia. Nämä esimerkit toimivat vain webkit-selaimissa (Safari tai Chrome).http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-animations.html
"Taittaminen CSS:llä. Grid Template Layout
Tähän satsataan / tätä kehitetään tällä hetkellä. Voidaan määritellä ulkoasupohja sivun ulkoasulle (sisältäen sarakkeet, menut, ja muut layoutit). Tällä hetkellä kun määritellään gridi, niin ei voi käyttää semanttisesti merkityksellisiä nimiä, vaan jokainen eri alue pitää määritellä vain omalla kirjaimellaan (kaikki a-alueet ovat samantapaisia keskenään ja b:t myös keskenään.) Piste tarkoittaa että kyseinen alue gridissä pysyy aina tyhjänä.
Esimerkkejä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-grid-template.html
Alueita, Regions
Kun on gridin märitellyt, niin jokaiselle alueelle voi määritellä oman tyylinsä. Täten region (alue) on esim sivulla oleva yksi tietty sarake, laatikko sivulla, tai jokin muu alue sivulla. (Kokeellista, kaikki tämä ei toimi vielä.) Nämä alueet tuntuvat olevan uusi tapa muotoilla eri alueet sivulla omanlaisikseen. Eiköhän tästäkin ole hyötyä kunhan kehittyy lisää. Tämä tarkoitus on tukea varsinkin (webbi)kirjojen julkaisua tulevaisuudessa.http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-regions.html
Yleisesti: tällä hetkellä kehitteillä ja keskeneräisenä vaikuttaisi olevan juuri taittamiseen liittyviä CSS-juttuja.
Flexbox
Graafinen taitto / graafinen layoutti sivulle. Tätä on kehitetty varsinkin käyttöliittymien suunnittelua ajatellen. Tästä on olemassa vasta luonnos, eli selainvalmistajat eivät ole implementoineet tätä vielä millään tapaa, mutta FireFix tukee täkä omassa XUL -kielessään. Tällä voidaan määritellä esim. sivun rautalankimallin osien käyttäytymistä sivulla, esim: kaikki napit pysyy paikallaan, mutta niiden alla oleva kuva saa joustaa sivun koon mukaan.http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-flexbox.html
Muuta
- Muotoja, Shapes
Perinteien sivun laatikkomalli perustuu juuri laatikoihin, tulevaisuudessa muodon voi kenties määritellä itse (pallo, kolmio, jne.) - Tekstin sijoittuinen sivulle ja katkaisu on myös työn alla.
Jos yllä olevia haluaa testata pitää ladata koneelleen Adoben JavaScript demot, ne ei toimi verkon yli.
Kalvot: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-exclusions.html
Muiden työn alla olevien ehdotuksien joukkoon kuuluu mm. verkkonopeuteen perustuva mediakysely.
LOPPU / FIN