CSS3 Teppo Räisänen

Esitys aiheesta: "CSS3 Teppo Räisänen"— Esityksen transkriptio:

1 CSS3 Teppo Räisänen http://www.oamk.fi/~teraisan/ Teppo.raisanen@oamk.fi

2 Yleistä CSS = Cascading Style SheetsCascading Style Sheets CSS 1 1996 CSS 2 1998 CSS 3 Kehittely alkoi 2005 Koostuu erilaisista suosituksista

3 Yleistä CSS 3 Perusidea ei eroa aikaisemmista CSS- versioista Mukana on kuitenkin paljon uusia ominaisuuksia

4 Yleistä Suurin ongelma on, että eri selaimet tukevat CSS 3:ea eri tavoin Selaimen ytimenä on moottori, joka tulkitsee HTML:n ja rakentaa sivun kuvan sen perusteella Eri selaimissa eri ytimet, jotka tulkitsevat CSS 3:ea hivenen eri tavoin

5 Yleistä Mozilla Gecko Firefox Webkit Google Chrome, Safari Presto Opera Trident Microsoft Internet Explorer

6 Yleistä Keskeisiä elementtejä Background Border Font Box-model Columt Text

7 Yleistä Muita elementtejä Transitions (3D/2D) Speech Animations Pseudo-class Angles Selectors

8 Box model

9 CSS3 Eri selaimilla on erilainen notaatio CSS3 elementeille CSS-tiedostossa CSS3-elementit merkitään yleensä kolme kertaa

10 CSS3 Webkit-selaimien ymmärtämä muoto Alkuun kirjoitetaan -webkit- Mozilla-selaimien ymmärtämä muoto Alkuun –moz- Geneerinen CSS3 (jota ei kyllä vielä tueta) Merkitään normaalisti

11 CSS3 -webkit-box-shadow: 5px 5px 5px #888; -moz-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5px #888; Tekee varjon, joka on 5 pikseliä elementin oikealla ja alla. Varjon häivytys 5 pikselin leveydeltä Väriltä harmaa (888)

12 CSS3