CSS3

Wikikirjastosta
Siirry navigaatioon Siirry hakuun

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 | muokkaa wikitekstiä]

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

Selain tunnukset[muokkaa | muokkaa wikitekstiä]

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


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

Esimerkit[muokkaa | muokkaa wikitekstiä]

Animointi[muokkaa | muokkaa wikitekstiä]

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

Animation[muokkaa | muokkaa wikitekstiä]

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 | muokkaa wikitekstiä]

animation-delay viivyttää aimaation alkamista tietyn sekunttiarvon.

Animation-iteration-count[muokkaa | muokkaa wikitekstiä]

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

Animation-delay[muokkaa | muokkaa wikitekstiä]

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

@keyframes[muokkaa | muokkaa wikitekstiä]

@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 | muokkaa wikitekstiä]

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 | muokkaa wikitekstiä]

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 | muokkaa wikitekstiä]

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 | muokkaa wikitekstiä]

Asettaa taustan koon leveytenä ja korkeutena.

Esimerkiksi

background-size:75px 100px;

Border (kertausta)[muokkaa | muokkaa wikitekstiä]

Asettaa reunaaviivan ominaisuudet:

border: paksuus tyyppi väri;

Esim.

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

border-radius[muokkaa | muokkaa wikitekstiä]

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 | muokkaa wikitekstiä]
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 | muokkaa wikitekstiä]

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 | muokkaa wikitekstiä]

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 | muokkaa wikitekstiä]

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

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

opacity[muokkaa | muokkaa wikitekstiä]

Asettaa läpinäkymättömyyden.

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


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