CSS3

CSS3 on CSS:n uusin versio, johon on lisätty paljon ominaisuuksia. Osa sen ominaisuuksista korvaa Flashin ja Appletit. Uudet ominaisuudet löytyvät Wikipedian sivulta CSS. CSS3:n tuki on vielä useassa selaimessa pieni, etenkin Internet Explorerissa. CSS3:ssa jotkin ominaisuudet pitää asettaa eri selaimille erikseen, mikä voi joskus koitua hyvin vaivalloiseksi.

Sanasto

• Laatikko (box), mikä tahansa suorakulmion muotoinen elementti.

Selain tunnukset

Tämä etuliite pitää monissa ominaisuuksissa laittaa ominaisuuden eteen.

Chrome	@-webkit-
Firefox	@-moz-
Opera	@-o-
Safari	@-webkit-

Esimerkit

Animointi

Animoinnissa elementin ominaisuuksia voidaan muuttaa tietyin väliajoin tai vain from ja to ominaisuuksin. Animointia ei tueta InternetExplorerissa.

Animation

animation on CSS3:n ominaisuus jolla asetetaan animaation ominaisuuksia.

Alla olevassa esimerkissä kaikki luokkaan animaatio kuuluvat HTML elementit animoituvat animaation vaihto mukaan niin että yksi animaatiokierros kestää 5s.

.animaatio { animation:vaihto 5s infinite; }

Animaation nimi asetetaan animaation määrittelyssä näin:

@keyframes liike /* nimi */
 {
 from { top:0px;   }
 to   { top:100px; }
 }

Animation-delay

animation-delay viivyttää aimaation alkamista tietyn sekunttiarvon.

Animation-iteration-count

animation-iteration-count asettaa määrän kuinka monta kertaa animaatio näytetään.

Animation-delay

animation-delay asettaa ajan miten pitkään aniimaation alkamista viivyttetään.

@keyframes

@keyframes antaa tietyt liikepisteet joiden kautta mennään. Tämä ominaisuus ei ole tuettu Internet Explorerissa.

Tämä koodi siirtää kaikkia elementtejä luokassa liike sivun yläreunasta 100 pikseliä alas 20px/s.

.liike{ animation: liike 5s infinite; }

@keyframes liike
 {
 from { top:0px;   }
 to   { top:100px; }
 }

@-moz-keyframes liike/* Firefox */
 {
 from { top:0px;   }
 to   { top:100px; }
 }

 @-webkit-keyframes liike /* Safari and Chrome */
 {
 from { top:0px;   }
 to   { top:100px; }
 }

 @-o-keyframes liike /* Opera */
 {
 from { top:0px;   }
 to   { top:100px; }
 }

Useampi piste voidaan asettaa kun korvataan from ja to prosenttimerkinnöillä, joilla ajoitus voidaan myös asettaa. Vaikka jos halutaan että on punainen neliö joka muuttuu hitaasti keltaiseksi ja sitten nopeasti vihreälksi, se voitaisiin tehdä näin:

.muuttuu { animation:vaihto 5s infinite; width: 100px; height: 100px; }

@keyframes vaihto
 {
 0%   { bacground: #ff0000; }
 75%  { bacground: #ffff00; }
 100% { bacground: #00ff00; }
 }

@-moz-keyframes vaihto/* Firefox */
 {
 0%   { bacground: #ff0000; }
 75%  { bacground: #ffff00; }
 100% { bacground: #00ff00; }
 }

 @-webkit-keyframes vaihto /* Safari and Chrome */
 {
 0%   { bacground: #ff0000; }
 75%  { bacground: #ffff00; }
 100% { bacground: #00ff00; }
 }

 @-o-keyframes vaihto /* Opera */
 {
 0%   { bacground: #ff0000; }
 75%  { bacground: #ffff00; }
 100% { bacground: #00ff00; }
 }

Värit, taustat, laatikot ja viivat

Tausta ominaisuudet ovat tuettuja kaikissa selaimissa. Uusia taustaominaisuuksia ei ole paljoa, mutta ne ovat silti melko käyttökelpoisia. Viivoille on tullut useampi uusi ominaisuus joista tässä käsitellään vain muutama.

Background-clip

Hyödyllinen ominaisuus joka asettaa miten tausta asetetaan. Mahdollisia arvoja on kolme:

• border-box - Laittaa taustan koko elementtiin.
• padding-box - Laittaa taustan koko elementtiin, paitsi reunaviivoihin.
• content-box - Laittaa neliömuotoisentaustan tekstin taakse, mutta ei täytteeseen (padding).

Background-origin

Hyödyllinen ominaisuus (tosin aika samanlainen kuin border-clip) joka asettaa minne elementtin kanssa erikokoinen tausta asetetaan. Mahdollisia arvoja on kolme:

• border-box - Laittaa taustan elementtin yläreunaan. Reunaviivan alle jos on.
• padding-box - Laittaa taustan täytteen (padding) yläreunaan.
• content-box - Laittaa taustan tekstin taakse.

Background-size

Asettaa taustan koon leveytenä ja korkeutena.

Esimerkiksi

background-size:75px 100px;

Border (kertausta)

Asettaa reunaaviivan ominaisuudet:

border: paksuus tyyppi väri;

Esim.

border: 10px dotted #00ff00;

Muista nämä

Yläviiva	border-top
Vasenviiva	border-left
Alaviiva	border-bottom
Oikeaviiva	border-right

border-radius

Tekee reunan kulmasta pyöreän. Ja samalla asettaa kaaren säteen.

Elementistä voi tehdä myös ypträn, mutta teksti menee viivojen yli.

border-bottom-left-radius:100%;

Muista nämä

Vasenyläviiva	border-top-left-radius
Vasealanviiva	border-bottem-left-radius
Oikeayläviiva	border-top-right-radius
Oikea-alaviiva	border-bottom-right-radius

border-image

Asettaa kuvan jota käytetään viivana. Ei tuettu InternetExplorerissa.

div
 {
 -moz-border-image:url(Regular apeirogon zig-zag.png) 5 5 round; /* Firefox */
 -webkit-border-image:url(Regular apeirogon zig-zag.png) 5 5 round; /* Safari */
 -o-border-image:url(Regular apeirogon zig-zag.png) 5 5 round; /* Opera */
 border-image:url(Regular apeirogon zig-zag.png) 5 5 round;
 }

Kuvana käytetty erästä Wikicomonssin kuvaa.

box-shadow

Tekee laatikolle varjon.

div
{
width:200px;
height:1500px;
box-shadow: 10px /* etäisyys laatikosta X */ 5px /* etäisyys laatikosta Y */ 5px /* etäisyys sumennukseen reunasta */ #888888 /* väri */;
}

Jos perään kirjoitetaan inset, varjo tulee taakse.

Rotation

Kiertää elementin. Ei tuettu millään selaimella. (Muuten hyvä)

div
{
rotation-point:50% 50%; /* akseli keskelle */
rotation:180deg;
}

opacity

Asettaa läpinäkymättömyyden.

div
{
opacity: 0.5 /* puoliksi näkymätön */;
}