Ero sivun ”CSS3” versioiden välillä
Poistettu sisältö Lisätty sisältö
Animaatioista lisätty tietoa |
Tietoa lisätty |
||
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.
== Sanasto ==
* Laatikko (box), mikä tahansa suorakulmion muotoinen elementti.
== Selain tunnukset ==
Rivi 21 ⟶ 25:
|}
==
=== Animointi ===
Animoinnissa elementin ominaisuuksia voidaan muuttaa tietyin väliajoin tai vain <code>from</code> ja <code>to</code> ominaisuuksin. Animointia ei tueta InternetExplorerissa.
==== Animation ====
Rivi 54 ⟶ 58:
<code>animation-iteration-count</code> asettaa määrän kuinka monta kertaa animaatio näytetään.
===== Animation-delay =====
<code>animation-delay</code> asettaa ajan miten pitkään aniimaation alkamista viivyttetään.
==== @keyframes ====
Rivi 120 ⟶ 128:
100% { bacground: #00ff00; }
}
</source>
=== Värit, taustat, laatikot ja viivat ===
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 ====
Hyödyllinen ominaisuus joka asettaa miten tausta asetetaan. Mahdollisia arvoja on kolme:
*<code>border-box</code> - Laittaa taustan koko elementtiin.
*<code>padding-box</code> - Laittaa taustan koko elementtiin, paitsi reunaviivoihin.
*<code>content-box</code> - Laittaa neliömuotoisentaustan tekstin taakse, mutta ei täytteeseen (<code>padding</code>).
==== Background-origin ====
Hyödyllinen ominaisuus (tosin aika samanlainen kuin <code>border-clip</code>) joka asettaa minne elementtin kanssa erikokoinen tausta asetetaan. Mahdollisia arvoja on kolme:
*<code>border-box</code> - Laittaa taustan elementtin yläreunaan. Reunaviivan alle jos on.
*<code>padding-box</code> - Laittaa taustan täytteen (<code>padding</code>) yläreunaan.
*<code>content-box</code> - Laittaa taustan tekstin taakse.
==== Background-size ====
Asettaa taustan koon leveytenä ja korkeutena.
Esimerkiksi
<source lang="css">
background-size:75px 100px;
</source>
==== Border (kertausta) ====
Asettaa reunaaviivan ominaisuudet:
<source lang="css">
border: paksuus tyyppi väri;
</source>
Esim.
<source lang="css">
border: 10px dotted #00ff00;
</source>
===== Muista nänmä =====
{|- class="wikitable" style="font-family:courier, sans-serif"
!align="left"|Yläviiva
|<code>border-top</code>
|-
!align="left"|Vasenviiva
|<code>border-left</code>
|-
!align="left"|Alaviiva
|<code>border-bottom</code>
|-
!align="left"|Oikeaviiva
|<code>border-right</code>
|}
==== border-radius ====
Tekee reunan kulmasta pyöreän. Ja samalla asettaa kaaren säteen.
Elementistä voi tehdä myös ypträn, mutta teksti menee viivojen yli.
<source lang="css">
border-bottom-left-radius:100%;
</source>
===== Muista nänmä =====
{|- class="wikitable" style="font-family:courier, sans-serif"
!align="left"|Vasenyläviiva
|<code>border-top-left-radius</code>
|-
!align="left"|Vasealanviiva
|<code>border-bottem-left-radius</code>
|-
!align="left"|Oikeayläviiva
|<code>border-top-right-radius</code>
|-
!align="left"|Oikea-alaviiva
|<code>border-bottom-right-radius</code>
|}
==== border-image ====
Asettaa kuvan jota käytetään viivana. Ei tuettu InternetExplorerissa.
<source lang="css">
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;
}
</source>
Kuvana käytetty [[:File:Regular apeirogon zig-zag.png|erästä Wikicomonssin kuvaa.]]
==== box-shadow ====
Tekee laatikolle varjon.
<source lang="css">
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 */;
}
</source>
Jos perään kirjoitetaan <code>inset</code>, varjo tulee taakse.
==== Rotation ====
Kiertää elementin. Ei tuettu millään selaimella. (Muuten hyvä)
<source lang="css">
div
{
rotation-point:50% 50%; /* akseli keskelle */
rotation:180deg;
}
</source>
==== opacity ====
Asettaa läpinäkymättömyyden.
<source lang="css">
div
{
opacity: 0.5 /* puoliksi näkymätön */;
}
</source>
| |||