Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Tutoriali taitaa painottua koodin kokeilemiseen, joka ei välity hirveän hyvin raporttiin.

Koodiesimerkki 1) : Useita päällekkäisiä taustakuvia sivulla tai elementillä, jolloin toista niistä voi venyttää ja toista ei. Taustoja voi nyt myös määritellä erilaiseksi eri div-elementteihin, tai vaikka table-määreeseen n:th-child määreellä. Tai toinen tausta voi skrollata yhden alueen (divin) mukana ja toinen pysyy paikallaan.

...

(Mental note itselle: nämä kaikki esimerkit päätyvät syksyn Merkkauskielet-kurssille.)

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.

Sarakkeita, eli Multi-column
Sarakkeiden välit voi määritellä omilla määreillään, esim. eri värisiksi kuin muu sivu. Sarakkeita voi täyttää eri tavoin, esim. eka sarake täyttyy alas asti, mutta muut ei. Uusia ominaisuuksia suunnitteilla, mutta on teknisesti vaikea toteuttaa esim. kahdelle ensimmäiselle sarakkeelle ja viimeiselle eri määritykset kuin muille sarakkeille. Parhaiten sarake-säännöt toimivat tällä hetkellä Opera -selaimessa versiosta 11 lähtien.

Mediakyselyt, Media Queries
Tarkoitettu sivun muokkaamiseen erilaiseksi eri alustoille, esim. kännykälle ja pöytäkoneelle erilaiset tyylimääreet.