CSS3-ominaisuudet
CSS3 on CSS-tyylimerkintöjen uusin versio, joka tuo lisää ulkoasun muokkausmahdollisuuksia kurssilla muuten käytettyyn CSS2-kieleen verrattuna. CSS3-merkintöjä voi käyttää yhdessä CSS2-merkintöjen kanssa.
CSS3-ominaisuuksien yhteensopivuus eri selainten kanssa
Kaikki CSS3-ominaisuudet eivät toimi vielä kaikissa selaimissa.Yleisin poikkeus on Internet Explorer -selain. Osa selaimista ja selainversioista saattaa tarvita myös erillisen etuliitteen, jotta ominaisuus toimisi, esim. -moz-border-image.
Selain | Etuliite |
---|---|
Mozilla Firefox | -moz- |
Chrome | -webkit- |
Safari | -webkit- |
Opera | -o- |
CSS3-ominaisuuksia
Seuraavassa on esitelty joitakin CSS3-ominaisuuksia. Kaikki ominaisuudet löytyvät osoitteesta: http://www.w3schools.com/css/css3_intro.asp
Ominaisuus | Toiminto | Arvot | Huomioitavaa |
---|---|---|---|
TAUSTA | |||
background-image | Taustakuva | none url(URL) |
Samalle elementille voidaan CSS3:ssa määrittää useita taustakuvia, jotka sijoittuvat Esim. |
background-size | Taustakuvan koko |
[%] |
Taustakuvan koon määrittäminen alkuperäisestä koosta poikkeavaksi. HUOM! Firefox 3.6 ja Opera 4 ja niitä vanhemmat versiot vaativat ominaisuuteen etuliitteen. |
REUNUS | |||
border-radius | Reunuksen kulman säde | [%] [mitta] |
Ominaisuus mahdollistaa käytännössä pyöristettyjen kulmien tekemisen. |
box-shadow | Laatikon varjostus |
Ominaisuuden avulla lisätään varjostus div-elementtiin. Ominaisuudelle merkitään arvot alla olevassa järjestyksessä. Arvoista vain kaksi ensimmäistä on pakollisia h-shadow = vaakasuuntaisen varjon sijainti Esim. sininen varjo, jonka koko on 10px HUOM! Toimii selaimissa IE9+, Firefox 4, Chrome, Opera ja Safari 5.1.1. |
|
PALSTAT | |||
column-count | Palstojen määrä | auto [luku] |
Tekstimassan jakaminen palstoihin esim. div-elementin sisällä. HUOM! Ei toimi Internet Explorer -selaimessa. Firefox, Chrome ja Safari vaativat etuliitteen. |
column-gap | Palstojen välimatka | [mitta] | HUOM! Ei toimi Internet Explorer -selaimessa. Firefox, Chrome ja Safari vaativat etuliitteen. |
column-rule | Pystyviiva palstojen välillä |
Merkintätapa Esim. musta 1 pikselin levyinen katkoviiva HUOM! Ei toimi Internet Explorer -selaimessa. Firefox, Chrome ja Safari vaativat etuliitteen. |