Ero sivun ”CSS3” versioiden välillä

Poistettu sisältö Lisätty sisältö
Stryn (keskustelu | muokkaukset)
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}}
{{tynkä}}
 
[[Luokka:CSS]]
Noudettu kohteesta ”https://fi.wikibooks.org/wiki/CSS3