Ero sivun ”CSS3” versioiden välillä
Poistettu sisältö Lisätty sisältö
fix |
Animaatioista lisätty tietoa |
||
Rivi 1:
'''CSS3''' on CSS:n uusin versio, johon on lisätty paljon ominaisuuksia. Osa sen ominaisuuksista korvaa [[w:Flash|Flashin]] ja [[w:Java|Apletit]]. Uudet ominaisuudet löytyvät Wikipedian sivulta [[w:CSS|CSS]]. CSS3:n tuki on vielä useassa selaimessa pieni, etenkin [[w:Internet Explorer|Internet Explorerissa]]. CSS3:ssa jotkin ominaisuudet pitää asettaa eri selaimille erikseen, mikä voi joskus koitua hyvin vaivalloiseksi.
== Selain tunnukset ==
Tämä etuliite pitää monissa ominaisuuksissa laittaa ominaisuuden eteen.
<!-- Internet Explorer puuttuu kaivataan lisäystä -->
{|- class="wikitable" style="font-family:courier, sans-serif"
!align="left"|Chrome
|@-webkit-
|-
!align="left"|Firefox
|@-moz-
|-
!align="left"|Opera
|@-o-
|-
!align="left"|Safarri
|@-webkit-
|}
== Esimerkkit ==
=== Animointi ===
Animoinnissa elementin ominaisuuksia voidaan muuttaa tietyin väliajoin.
==== Animation ====
<code>animation</code> on CSS3:n ominaisuus jolla asetetaan animaation ominaisuuksia.
Alla olevassa esimerkissä kaikki luokkaan animaatio kuuluvat HTML elemntit animoituvat animaation vaihto mukaan niin että yksi animaatiokierros kestää 5s.
<source lang="css">
.animaatio { animation:vaihto 5s infinite; }
</source>
Animaation nimi asetetaan animaation määrittelyssä näin:
<source lang="css">
@keyframes liike /* nimi */
{
from { top:0px; }
to { top:100px; }
}
</source>
===== Animation-delay =====
<code>animation-delay</code> viivyttää aimaation alkamista tietyn sekunttiarvon.
===== Animation-iteration-count =====
<code>animation-iteration-count</code> asettaa määrän kuinka monta kertaa animaatio näytetään.
==== @keyframes ====
<code>@keyframes</code> antaa tietyt liikepisteet joiden kautta mennään. Tämä ominaisuus ei ole tuettu INernetExplorerissa.
Tämä koodi siirtää kaikkia elementtejä luokassa <code>liike</code> sivun yläreunasta 100 pikseliä alas 20px/s.
<source lang="CSS">
.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; }
}
</source>
Useampi piste voidaan asettaa kun korvataan <code>from</code> ja <code>to</code> 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:
<source lang="CSS">
.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; }
}
</source>
{{kesken}}
[[Luokka:CSS]]
|