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
[muokkaa | muokkaa wikitekstiä]- Laatikko (box), mikä tahansa suorakulmion muotoinen elementti.
Selain tunnukset
[muokkaa | muokkaa wikitekstiä]Tämä etuliite pitää monissa ominaisuuksissa laittaa ominaisuuden eteen.
Chrome | @-webkit- |
---|---|
Firefox | @-moz- |
Opera | @-o- |
Safari | @-webkit- |
Esimerkit
[muokkaa | muokkaa wikitekstiä]Animointi
[muokkaa | muokkaa wikitekstiä]Animoinnissa elementin ominaisuuksia voidaan muuttaa tietyin väliajoin tai vain from
ja to
ominaisuuksin. Animointia ei tueta InternetExplorerissa.
Animation
[muokkaa | muokkaa wikitekstiä]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
[muokkaa | muokkaa wikitekstiä]animation-delay
viivyttää aimaation alkamista tietyn sekunttiarvon.
Animation-iteration-count
[muokkaa | muokkaa wikitekstiä]animation-iteration-count
asettaa määrän kuinka monta kertaa animaatio näytetään.
Animation-delay
[muokkaa | muokkaa wikitekstiä]animation-delay
asettaa ajan miten pitkään aniimaation alkamista viivyttetään.
@keyframes
[muokkaa | muokkaa wikitekstiä]@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
[muokkaa | muokkaa wikitekstiä]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
[muokkaa | muokkaa wikitekstiä]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
[muokkaa | muokkaa wikitekstiä]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
[muokkaa | muokkaa wikitekstiä]Asettaa taustan koon leveytenä ja korkeutena.
Esimerkiksi
background-size:75px 100px;
Border (kertausta)
[muokkaa | muokkaa wikitekstiä]Asettaa reunaaviivan ominaisuudet:
border: paksuus tyyppi väri;
Esim.
border: 10px dotted #00ff00;
Muista nämä
[muokkaa | muokkaa wikitekstiä]Yläviiva | border-top
|
---|---|
Vasenviiva | border-left
|
Alaviiva | border-bottom
|
Oikeaviiva | border-right
|
border-radius
[muokkaa | muokkaa wikitekstiä]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ä
[muokkaa | muokkaa wikitekstiä]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
[muokkaa | muokkaa wikitekstiä]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
[muokkaa | muokkaa wikitekstiä]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
[muokkaa | muokkaa wikitekstiä]Kiertää elementin. Ei tuettu millään selaimella. (Muuten hyvä)
div
{
rotation-point:50% 50%; /* akseli keskelle */
rotation:180deg;
}
opacity
[muokkaa | muokkaa wikitekstiä]Asettaa läpinäkymättömyyden.
div
{
opacity: 0.5 /* puoliksi näkymätön */;
}