⚈ Kuopassa.net

Lisää kertomuksia netistä. 摆烂

Feidausefekti joihinkin juttuihin nettisivuilla ilman JavaScriptiä

CSS:n vaikutusvalta nettisivujen ulkoasun säätämisessä tuntuu kasvavan kasvamistaan. Olen viime kuukausien aikana löytänyt useita ulkoasujen tekemistä helpottavia CSS-kikkoja, joita monet modernit nettiselaimet tukevat. Tekstin varjostuksen ja laatikoiden varjostuksen sekä kulmien pyöristämisen lisäksi yksi toiminto, joka avaa monia mahdollisuuksia, on transition. Siirtymäefekti toimii ainakin tekstin värin, sen varjostuksen ja reunaviivojen kohdalla. En ole tutkinut sitä niin huolellisesti kuin olisi syytä.

Transitionilla voi määritellä haluttuun asiaan jonkun aikaviiveen sisällä tehtävän siirtymän. Esimerkiksi linkeissä :hover-efektiin pystyy laittamaan sekunnin pituisen ajan, jonka kuluessa linkin taustaväri vaihtuu joksikin toiseksi. Näin on tehty (vielä keskeneräisessä) autokoulujen hakemistossa. Autokoulut.infossa eräiden linkkien taustaväri on sininen ja kun hiiren kursori viedään linkin päälle, transition aktivoituu ja vaihtaa taustavärin violetiksi sekunnissa. Temppu on tehty näin:

a {
background: #4c6883;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
-ms-transition: background 1s;
transition: background 1s;
}

a:hover,
a:focus,
a:active {
background: #9733c3;
}

Tuossa on aika monta riviä. Siinä on Mozillaa, Safaria, Operaa, Microsoftia ja kaikkia varten asetettuja suosituksia. Huomioitavaa tuossa on, että nämä transitionit kohdistetaan linkin taustaväriin. Siksi sana background toistuu riviltä toiselle. Backgroundin sijaan siinä voisi olla vaikkapa color tai jotain muuta. Efektiin kuluvaa aikaa voinee venyttää. Esimerkissä efektin suoritusaika on yksi sekunti.

Tietoa kirjoittajasta