Ero sivun ”CSS3” versioiden välillä

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