Kuopassa.net

Lisää kirjoituksia netistä.

Etsi blogista

Feidausefekti joihinkin juttuihin nettisivuilla ilman JavaScriptiä

Kirjoitettiin
Päivitettiin 7. kesäkuuta 2014 kello 23.55

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.

Saatat olla kiinnostunut näistä:
Tietoa kirjoittajasta

Tämä juttu mukaan laskettuna blogissa on julkaistu yhteensä 1292 kirjoitusta. Tämän sivun niin sanottu kestolinkki on tässä siltä varalta jos haluat linkittää siihen esimerkiksi blogista tai joltain foorumilta. Tagi tai tagit: .

Tsekkaa myös minkälaisia valokuvia teen: www.pjti.fi