Ero sivun ”CSS3” versioiden välillä
Poistettu sisältö Lisätty sisältö
Korvattu vanhentunut source-tagi syntaxhighlight-tagilla |
|||
Rivi 37:
Alla olevassa esimerkissä kaikki luokkaan animaatio kuuluvat HTML elementit animoituvat animaation vaihto mukaan niin että yksi animaatiokierros kestää 5s.
<
.animaatio { animation:vaihto 5s infinite; }
</syntaxhighlight>
Animaation nimi asetetaan animaation määrittelyssä näin:
<
@keyframes liike /* nimi */
{
Rivi 49:
to { top:100px; }
}
</syntaxhighlight>
===== Animation-delay =====
Rivi 68:
Tämä koodi siirtää kaikkia elementtejä luokassa <code>liike</code> sivun yläreunasta 100 pikseliä alas 20px/s.
<
.liike{ animation: liike 5s infinite; }
Rivi 94:
to { top:100px; }
}
</syntaxhighlight>
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:
<
.muuttuu { animation:vaihto 5s infinite; width: 100px; height: 100px; }
Rivi 128:
100% { bacground: #00ff00; }
}
</syntaxhighlight>
=== Värit, taustat, laatikot ja viivat ===
Rivi 156:
Esimerkiksi
<
background-size:75px 100px;
</syntaxhighlight>
==== Border (kertausta) ====
Rivi 164:
Asettaa reunaaviivan ominaisuudet:
<
border: paksuus tyyppi väri;
</syntaxhighlight>
Esim.
<
border: 10px dotted #00ff00;
</syntaxhighlight>
===== Muista nämä =====
Rivi 196:
Elementistä voi tehdä myös ypträn, mutta teksti menee viivojen yli.
<
border-bottom-left-radius:100%;
</syntaxhighlight>
===== Muista nämä =====
Rivi 220:
Asettaa kuvan jota käytetään viivana. Ei tuettu InternetExplorerissa.
<
div
{
Rivi 228:
border-image:url(Regular apeirogon zig-zag.png) 5 5 round;
}
</syntaxhighlight>
Kuvana käytetty [[:File:Regular apeirogon zig-zag.png|erästä Wikicomonssin kuvaa.]]
Rivi 236:
Tekee laatikolle varjon.
<
div
{
Rivi 243:
box-shadow: 10px /* etäisyys laatikosta X */ 5px /* etäisyys laatikosta Y */ 5px /* etäisyys sumennukseen reunasta */ #888888 /* väri */;
}
</syntaxhighlight>
Jos perään kirjoitetaan <code>inset</code>, varjo tulee taakse.
Rivi 251:
Kiertää elementin. Ei tuettu millään selaimella. (Muuten hyvä)
<
div
{
Rivi 257:
rotation:180deg;
}
</syntaxhighlight>
==== opacity ====
Rivi 263:
Asettaa läpinäkymättömyyden.
<
div
{
opacity: 0.5 /* puoliksi näkymätön */;
}
</syntaxhighlight>
{{kesken}}
|