CSS3-ominaisuudet

by Tanja Tuulikki Välisalo — last modified Nov 27, 2014 08:03 AM

Uusimpia CSS-ominaisuuksia, eivät toimi kaikissa selaimissa

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 päällekkäin niin, että koodissa ensimmäinen kuva on verkkosivulla päällimmäinen. Esim. background-image: url(tausta1.jpg), url(tausta2.jpg)
background-size	Taustakuvan koko	[%] [mitta]	Taustakuvan koon määrittäminen alkuperäisestä koosta poikkeavaksi. Prosentit kertovat tässä taustakuvan koon suhteessa html-elementin kokoon. Ominaisuudella on mahdollista venyttää tai kutistaa taustakuva koko elementin levyiseksi. 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 box-shadow: h-shadow v-shadow blur spread color inset h-shadow = vaakasuuntaisen varjon sijainti v-shadow = pystysuuntaisen varjon sijainti blur = varjon sumennuksen etäisyys spread = varjon koko color = varjon väri (oletuksena musta) inset = muuttaa varjon ulkopuolella sijaitsevasta sisäpuolella sijaitsevaksi Esim. sininen varjo, jonka koko on 10px box-shadow: 10px 10px blue 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 column-rule: column-rule-width column-rule-style column-rule-color Esim. musta 1 pikselin levyinen katkoviiva column-rule: 1px dashed #000000 HUOM! Ei toimi Internet Explorer -selaimessa. Firefox, Chrome ja Safari vaativat etuliitteen.