CSS3

(Ohjattu sivulta Css3)

CSS3 on CSS:n uusin versio, johon on lisätty paljon ominaisuuksia. Osa sen ominaisuuksista korvaa Flashin ja Appletit. Uudet ominaisuudet löytyvät Wikipedian sivulta CSS. CSS3:n tuki on vielä useassa selaimessa pieni, etenkin Internet Explorerissa. CSS3:ssa jotkin ominaisuudet pitää asettaa eri selaimille erikseen, mikä voi joskus koitua hyvin vaivalloiseksi.

Sanasto muokkaa

  • Laatikko (box), mikä tahansa suorakulmion muotoinen elementti.

Selain tunnukset muokkaa

Tämä etuliite pitää monissa ominaisuuksissa laittaa ominaisuuden eteen.


Chrome @-webkit-
Firefox @-moz-
Opera @-o-
Safari @-webkit-

Esimerkit muokkaa

Animointi muokkaa

Animoinnissa elementin ominaisuuksia voidaan muuttaa tietyin väliajoin tai vain from ja to ominaisuuksin. Animointia ei tueta InternetExplorerissa.

Animation muokkaa

animation on CSS3:n ominaisuus jolla asetetaan animaation ominaisuuksia.

Alla olevassa esimerkissä kaikki luokkaan animaatio kuuluvat HTML elementit animoituvat animaation vaihto mukaan niin että yksi animaatiokierros kestää 5s.

.animaatio { animation:vaihto 5s infinite; }

Animaation nimi asetetaan animaation määrittelyssä näin:

@keyframes liike /* nimi */
 {
 from { top:0px;   }
 to   { top:100px; }
 }
Animation-delay muokkaa

animation-delay viivyttää aimaation alkamista tietyn sekunttiarvon.

Animation-iteration-count muokkaa

animation-iteration-count asettaa määrän kuinka monta kertaa animaatio näytetään.

Animation-delay muokkaa

animation-delay asettaa ajan miten pitkään aniimaation alkamista viivyttetään.

@keyframes muokkaa

@keyframes antaa tietyt liikepisteet joiden kautta mennään. Tämä ominaisuus ei ole tuettu Internet Explorerissa.

Tämä koodi siirtää kaikkia elementtejä luokassa liike sivun yläreunasta 100 pikseliä alas 20px/s.

.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; }
 }

Useampi piste voidaan asettaa kun korvataan from ja to 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; }

@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; }
 }

Värit, taustat, laatikot ja viivat muokkaa

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 muokkaa

Hyödyllinen ominaisuus joka asettaa miten tausta asetetaan. Mahdollisia arvoja on kolme:

  • border-box - Laittaa taustan koko elementtiin.
  • padding-box - Laittaa taustan koko elementtiin, paitsi reunaviivoihin.
  • content-box - Laittaa neliömuotoisentaustan tekstin taakse, mutta ei täytteeseen (padding).

Background-origin muokkaa

Hyödyllinen ominaisuus (tosin aika samanlainen kuin border-clip) joka asettaa minne elementtin kanssa erikokoinen tausta asetetaan. Mahdollisia arvoja on kolme:

  • border-box - Laittaa taustan elementtin yläreunaan. Reunaviivan alle jos on.
  • padding-box - Laittaa taustan täytteen (padding) yläreunaan.
  • content-box - Laittaa taustan tekstin taakse.

Background-size muokkaa

Asettaa taustan koon leveytenä ja korkeutena.

Esimerkiksi

background-size:75px 100px;

Border (kertausta) muokkaa

Asettaa reunaaviivan ominaisuudet:

border: paksuus tyyppi väri;

Esim.

border: 10px dotted #00ff00;
Muista nämä muokkaa
Yläviiva border-top
Vasenviiva border-left
Alaviiva border-bottom
Oikeaviiva border-right

border-radius muokkaa

Tekee reunan kulmasta pyöreän. Ja samalla asettaa kaaren säteen.

Elementistä voi tehdä myös ypträn, mutta teksti menee viivojen yli.

border-bottom-left-radius:100%;
Muista nämä muokkaa
Vasenyläviiva border-top-left-radius
Vasealanviiva border-bottem-left-radius
Oikeayläviiva border-top-right-radius
Oikea-alaviiva border-bottom-right-radius

border-image muokkaa

Asettaa kuvan jota käytetään viivana. Ei tuettu InternetExplorerissa.

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;
 }

Kuvana käytetty erästä Wikicomonssin kuvaa.

box-shadow muokkaa

Tekee laatikolle varjon.

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 */;
}

Jos perään kirjoitetaan inset, varjo tulee taakse.

Rotation muokkaa

Kiertää elementin. Ei tuettu millään selaimella. (Muuten hyvä)

div
{
rotation-point:50% 50%; /* akseli keskelle */
rotation:180deg;
}

opacity muokkaa

Asettaa läpinäkymättömyyden.

div
{
opacity: 0.5 /* puoliksi näkymätön */;
}


  Tämä sivu tai sen osa on keskeneräinen. Voit auttaa Wikikirjastoa täydentämällä sivua.