...
Reunat, eli Border-kokeilua. Koodit tutustumista & kokeilua varten täällä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-borders.html
Venytettävät kehyskuvat ovat hienoja, mutta vaatii kyllä myös esim. kykyä osata suunnitella kuva jota venytetään kehykseksi (jos haluaa saada hyvännäköistä aikaiseksi). Sen sijaan border-radius esimerkki tuolla on todella hieno, kannattaa tutustua miten eri kulmamääreillä saa hienoa aikaiseksi.
...
Mediakyselyt, Media Queries
Tarkoitettu sivun muokkaamiseen erilaiseksi eri alustoille, esim. kännykälle ja pöytäkoneelle erilaiset tyylimääreet. Esimerkkinä toiminnasta voi katsoa esim: http://bostonglobe.com/ ja pienentää / suurentaa ikkunaa, sivun ulkoasu reagoi siihen. Esimerkit täällä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-media-queries.html Myös esityksen kalvot käyttävät mediakyselyjä, presentation mode käyttää eri tyylimääreitä kuin tavallien sivun katsominen.
Mielenkiintoinen pointit miten iPhone hajoitti "handheld" -määreen kännyköille, se nimittäin väittää olevansa pöytäkone ("screen") eikä mobiililaite ("handheld"). Siksi html-koodiin pitää iphoneja varten lisätä:
<meta name=viewport content="width=device-width">
jonka jälkee myös ne seuraavat medikyselyjä. (Oisko tuo riittävä koodipätkä? Pitää kokeilla puhelimella myöhemmin.)
"Valitsimet", eli Selectors
Näillä kohdistetaan tyylimääreet mahdollisimman tarkkaan tiettyyn kohtaan, mutta samalla tarvittaessa myös yleisesti koko sivulle. Koodiesimerkit: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-selectors.html
Hyödyllinen on esim. koodiesimerkki jolla saadaan sivun kaikki linkit muotoiltua erinäköiseksi kuin muu sivu / muu teksti. Lisätkää tähän vaikka kuva alkuun (12px padding vasempaan reunaan ja 10pix kokoinen kuva sinne.)
Värit
Värejä voi nykyään määritellä myös HSL:n avulla (rgb:n, hexan ja keywordin lisäksi.) HSL liittyy väriympyrään. HSL:ään voidaan lisätä myös alpha, jolloin se ottaa neljä arvoa: väri, saturaatio, luminance ja alpha, esim: hsla(20, 90%, 50%, 0.3)
Esimerkkikoodit: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-color.html
Color Scheme Designer palvelua kehuttiin ja kokeiltiin esimerkissä, tällä saa koko sivun vääriskaalan helposti ja hyvännäköiseksi määriteltyä: http://colorschemedesigner.com/
Fontit
Tähän kuuluu myös varjostukset esim. tekstiin tai laatikoihin. Jos lisäät eksoottisia fontteja sivullesi, toistaiseksi se pitää lisätä useassa eri formaatissa, näissä.
- eot microsoftin tukema
- woff firefoxille, avoin w3c standardi joka toivottavasti kohta toimii kaikissa selaimissa
- svg iphone ja ipadille (ne ei tue mitään muita fonttiformaatteja)
Esimerkkikoodit: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-box-text-shadow-fontface.html
Yleisökysymys:
Voiko kirjainten sisälle vaikuttaa, vastaus: ei, et voi lisätä esim. keltaista kirjaimen sisälle.
Lyhyt kagvitauko, 5min.
Ekan päivän perusteella, ei pelkästään kahvitauko vaan muutenkin, niin aikataulut kusee täällä. Eivät ole ihan yhtä "pro" organisojia kuin jenkit olivat vuonna 2010.
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