Efektit

Joskus verkkosivustolle halutaan erilaisia efektejä, jotka kertovat jotain sivun toiminnoista. Yleisiä tällaisia ovat hover-efekti (jotain tapahtuu, kun hiiri kulkee linkin yli), kun jokin on valittu/aktiivinen tai jos linkki on käyttämätön tai käytetty. Näitä kutsutaan nimellä pseudo-class. Se määritellään kaksoispisteellä.

a:hover {
    color: red;
}

Hover

hover-efektiä käytetään erilaisten linkkien ja nappien kanssa. Tyypillinen efekti on, että tekstin väri tai taustaväri vaihtuu, usein vaaleamman tai tummemman sävyiseksi kuin alkuperäinen väri. Samalla usein hiiren nuoli muuttuu osoittimeksi. Toisaalta hover voi lisätä vaikka alleviivauksen, lisätä reunukset tai saada aikaan vaikkapa animaatioita, joita harjoittelemme myöhemmin.

a:hover {
    color: red;
    text-decoration: underline;
    cursor: pointer;
}

Active

Jos pidät hiirtä pohjassa linkin tai napin kohdalla, on se silloin aktiivinen. Siihen voi asettaa oman efektin, joka on usein uusi sävymuunnos tekstissä tai taustassa.

a:active {
    color: pink;
    border: solid 1px pink;
    cursor: pointer;
}

Link ja visited

Selain antaa jokaiselle linkille automaattisesti väriksi sinisen, kun linkkiä ei ole käytetty. Kun sitä on käytetty, on väri violetti. Nämä voi halutessaan määritellä itse. link määrittää linkin, jossa ei ole käyty, ja visited linkin, jossa on käyty.

a:link {
    color: red;
}

a:visited {
    color: red;
}

Focus

Kun jokin lomakkeen kenttä on valittu, voidaan lisätä pseudo-class focus, mikä ilmaisee sitä, että juuri siihen kenttään on mahdollista kirjoittaa. Tyypillisesti silloin muuttuu kentän taustaväri tai reunojen väri tai paksuus.

input:focus {
    background-color: lightblue;
}

Demotehtävä

1. Luo uusi HTML-tiedosto, uusi CSS-tiedosto ja linkitä ne.
2. Lisää sivulle otsikko ja lyhyt teksti. Lisää tekstiin linkki jollekin toiselle sivulle. Määritä sen alkuperäinen väri vihreäksi ja sitten siniseksi, kun siellä on vierailtu.
3. Lisää sivulle nappi (<button>). Lisää sille hover-efekti, joka muuttaa sen taustavärin ja alleviivaa tekstin. Voit muotoilla nappia myös muilla tavoilla.
4. Lisää napille myös active-efekti, jolla sen taustaväri muuttuu aiempaa vaaleammaksi tai tummemmaksi, kun se on painettuna pohjaan.