Tee verkkosivun elementit Fade In ja Out CSS3: lla

CSS3-siirtymät luovat Nizzan haalistumisvaikutuksia

Web-suunnittelijat olivat jo pitkään halunneet hallita sivuja, jotka he olivat luoneet, kun CSS3 osui kohtaukseen. CSS3: ssa tuodut uudet tyylit antoivat web-ammattilaisille mahdollisuuden lisätä sivuilleen Photoshop-tyyppisiä vaikutuksia. Tämä sisälsi ominaisuuksia, kuten pudotusvarjoja ja hehkuja , pyöristettyjä kulmia ja paljon muuta. CSS3 esitteli myös animoituja vaikutuksia, joita voidaan käyttää luomaan hyvää vuorovaikutteisuutta sivustoissa.

Yksi erittäin mukava visuaalinen vaikutus, jonka voit lisätä elementteihin verkkosivustollasi CSS3: n avulla, on tehdä niistä haalistuminen sisään ja ulos käyttäen ominaisuuksien yhdistelmää opasiteetille ja siirtymiselle. Tämä on helppo ja hyvin tuettu tapa tehdä sivusi interaktiivisemmiksi luomalla haalistuneita alueita, jotka tulevat keskittymään, kun sivuston kävijä tekee jotain, kuten liikkumista kyseisen elementin yli.

Katsotaanpa, kuinka helppoa on lisätä tämä vuorovaikutteinen visuaalinen vaikutus eri elementteihin verkkosivuillasi ..

Muuta peittävyyttä hiirellä

Aloitamme tarkastelemalla kuvan peittävyyden muuttamista, kun asiakas liikkuu kyseisen elementin päälle. Tässä esimerkissä (HTML näkyy alla) käytän kuvaa, jonka gridout-luokan attribuutti on.

Sävyttämiseksi lisäämme CSS-tyylitaulukkoon seuraavat tyylisäännöt:

.greydout {
-webkit-opasiteetti: 0,25;
-moz-opasiteetti: 0,25;
opasiteetti: 0,25;
}

Nämä peittävyysasetukset ovat 25%. Tämä tarkoittaa sitä, että kuva näytetään 1/4 tavallisesta läpinäkyvyydestä. Täysin läpinäkyvä ilman läpinäkyvyyttä olisi 100%, kun taas 0% olisi täysin avointa.

Seuraavaksi, jotta kuva saadaan selvältä (tai tarkemmin, jotta se muuttuu täysin läpikuultavaksi), kun hiiri liukuu päälle, lisäät: hover pseudo-luokka:

.greydout: hover {
-webkit-opasiteetti: 1;
-moz-opasiteetti: 1;
opasiteetti: 1;
}

Huomaat, että näissä esimerkeissä käytän säännön myyjän ennalta määritettyjä versioita varmistaakseni taaksepäin yhteensopivuuden näiden selainten vanhempien versioiden kanssa. Vaikka tämä on hyvää käytäntöä, todellisuus on se, että selaimet tukevat nyt peittävyyden sääntöä, ja on melko turvallista pudottaa kyseisten valmistajien prefiksit. Silti ei ole mitään syytä olla sisällyttämättä näitä etuliitteitä, jos haluat varmistaa vanhempien selainversioiden tuen. Varmista, että noudatat hyväksyttyjä parhaita käytäntöjä ilmoituksen lopettamisesta tavanomaisella, ennalta määritellyllä tyylillä.

Jos otit tämän käyttöön sivustolla, näet, että tämä opasisuuntaus on hyvin äkillinen muutos. Ensin se on harmaa, ja silloin se ei ole, ilman väliaikaa näiden kahden välillä. Se on kuin valokytkin - päälle tai pois päältä. Tämä voi olla mitä haluat, mutta voit myös kokeilla muutosta, joka on asteittaisempaa.

Jos haluat lisätä todella mukavan vaikutuksen ja tehdä tämän haalistuvan asteittain, lisää siirtymäominaisuus .greydout-luokkaan:

.greydout {
-webkit-opasiteetti: 0,25;
-moz-opasiteetti: 0,25;
opasiteetti: 0,25;
-webkit-transition: kaikki 3s helposti;
-moz-siirtyminen: kaikki 3s helpottavat;
-ms-transition: kaikki 3s helppous;
-o-siirtyminen: kaikki 3s helpottavat;
siirtyminen: kaikki 3: n helppous;
}

Tämän koodin avulla muutos siirtyisi vähitellen pikemminkin kuin siirtyminen äkillisesti.

Jälleen kerran käytämme useita myyjän prefixed sääntöjä täällä. Siirtymä ei ole niin tuettu kuin opasiteetti, joten nämä etuliitteet ovat järkeviä.

Yksi asia muistaa, kun suunnittelet näitä vuorovaikutuksia, on se, että kosketusnäyttölaitteilla ei ole "hover" -tilu, joten nämä vaikutukset menetetään usein kenellekään, joka käyttää kosketusnäyttölaitetta kuten matkapuhelinta. Siirtyminen tapahtuu usein, mutta se tapahtuu niin nopeasti, että niitä ei todellakaan näe. Tämä on hienoa, jos lisäät tämän mukavaksi bonusvaikutukseksi, mutta vältä mitään muutoksia, joita tarvitset, jotta sisältöä ymmärrettäisiin.

Poistuminen on mahdollinen

Sinun ei tarvitse alkaa haalistuneesta kuvasta, voit käyttää siirtymiä ja läpikuultavuutta häivyttääksesi täysin epätarkasta kuvasta. Jos käytät samaa kuvaa, vain luokalla, jossa on outfadeout:

class = "withfadeout">

Aivan kuten aiemmin, muutat peittävyyttä käyttämällä: hover-valitsinta:

withwithout {
-webkit-transition: kaikki 2s helppous-out-out;
-moz-siirtyminen: kaikki 2s helppous-out-out;
-ms-siirtyminen: kaikki 2s helppous-out-out;
-o-siirtyminen: kaikki 2s helppous-out-out;
siirtyminen: kaikki 2s helppous-out-out;
}
.withfadeout: hypätä {
-webkit-opasiteetti: 0,25;
-moz-opasiteetti: 0,25;
opasiteetti: 0,25;
}

Tässä esimerkissä kuva siirtyisi täysin läpinäkymätönstä jonkin verran läpinäkyvään - ensimmäisen esimerkkimme käänteeseen.

Going Beyond Kuvat

On erinomaista, että voit soveltaa näitä visuaalisia siirtymiä ja haalistua kuviksi, mutta et ole rajoitettu vain käyttämällä näitä CSS-efektejä käyttäviä kuvia. Voit helposti tehdä CSS-tyylisiä painikkeita, jotka haalistuvat, kun niitä napsautetaan ja pidetään. Sinä vain asettaisit opasiteetin käyttämällä aktiivista pseudo-luokkaa ja siirrät siirtymän luokalle, joka määrittelee painikkeen. Napsauta ja pidä painettuna tätä painiketta, niin näet mitä tapahtuu.

On mahdollista tehdä olennaisesti mikä tahansa visuaalinen elementti haalistua, kun sitä liukuu päälle tai napsautetaan. Tässä esimerkissä muutan divin peittävyyttä ja tekstin väriä, kun hiiri on sen yläpuolella. Tässä on CSS:

#myDiv {
leveys: 280px;
taustaväri: # 557A47;
väri: #dfdfdf;
pehmuste: 10px;
-webkit-transition: kaikki 4s helpottavat ulos 0s;
-moz-transition: kaikki 4s helpottavat ulos 0s;
-ms-transition: kaikki 4s helpottavat ulos 0s;
-o-siirtyminen: kaikki 4s helpottavat ulos 0s;
siirtyminen: kaikki 4s helpottavat ulos 0s;
}
#myDiv: hover {
-webkit-opasiteetti: 0,25;
-moz-opasiteetti: 0,25;
opasiteetti: 0,25;
väri: # 000;
}

Navigointivalikot voivat hyötyä haalistuvista taustaväreistä

Tässä yksinkertaisessa navigointivalikossa taustaväri himmenee hitaasti sisään ja ulos, kun hiiren valikon kohteita. Tässä on HTML:

Ja tässä on CSS:

ul # sampleNav {list-style: none; }
ul # sampleNav li {
näyttö: inline;
float: vasen;
pehmuste: 5px 15px;
marginaali: 0 5px;
-webkit-transition: kaikki 2s lineaarinen;
-moz-siirtyminen: kaikki 2s lineaariset;
-ms-transition: kaikki 2s lineaarinen;
-o-siirtyminen: kaikki 2s lineaariset;
siirtyminen: kaikki 2s lineaarinen;
}
ul # sampleNav li a {teksti-sisustus: ei yhtään; }
ul # sampleNav li: hover {
taustaväri: # DAF197;
}

Selaintuki

Koska olen koskettanut muutama kerta, näillä tyylillä on erittäin hyvä selaintuki, joten voit vapaasti käyttää niitä ilman pelkoa. Ainoa poikkeus tästä on Internet Explorerin vanhemmat versiot, mutta Microsoftin äskettäin tekemä päätös lopettaa kaikkien IE: n kaikkien versioiden tuki alle 11, nämä vanhemmat selaimet ovat yhä vähemmän ongelma - ja realistisesti, jos vanhempi selain ei katso tämä haalistumisvaihe, joka ei saisi olla suuri ongelma. Niin kauan kuin rajoitat tällaisia ​​tehosteita nautinnollisiin vuorovaikutuksiin, äläkä luota niihin ajaa toimintoja tai paljasta avainsisältöä, vanhemmat selaimet, jotka eivät tue vaikutuksia, saavat vähemmän nautinnollista kokemusta, mutta selaimilla olevat käyttäjät eivät edes tietää eron, varsinkin jos he voivat käyttää sivustoa normaalisti ja saada tarvitsemansa tiedot.

Extra Fun, Vaihda kaksi kuvaa

Tässä on esimerkki siitä, miten yksi kuva hajoaa toiseen. Käytä HTML:

Ja CSS, joka tekee yhden täysin läpinäkyvän, kun toinen on täysin läpinäkyvä ja sitten siirtyminen vaihtaa kaksi:

.swapMe img {-webkit-transition: kaikki 1s helppous-out-out; -moz-siirtyminen: kaikki 1s helppous-out-out; -ms-transition: kaikki 1s helppous-out-out; -o-siirtyminen: kaikki 1s helppous-out-out; siirtyminen: kaikki 1s helppous-out-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opasiteetti: 1; opasiteetti: 1; }. swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opasiteetti: 0; opasiteetti: 0; }