uudet tyylit esiteltiin CSS3: ssa antoi verkkoammattilaisille mahdollisuuden lisätä Photoshopin kaltaisia tehosteita sivuilleen. Yksi visuaalinen tehoste, jonka voit lisätä käyttämällä CSS3 on tehdä verkkosivuista vuorovaikutteisia luomalla haalistuneita alueita, jotka tulevat esiin, kun sivuston kävijä tekee jotain, kuten leijuvan kyseisen elementin päälle. Tämä vaikutus käyttää yhdistelmää peittävyys ja siirtyminen.
Vaihda peittävyyden peittävyyttä
Yksi interaktiivinen elementti on muuttaa kuvan peittävyyttä, kun asiakas leijuu kyseisen elementin päälle. Tässä esimerkissä (HTML on esitetty alla) käytämme kuvaa luokan attribuutilla harmaata.
Lisää se harmaaksi lisäämällä seuraavat tyylisäännöt CSS-tyylitaulukkoon:
.greydout {
-webkit-opasiteetti: 0,25;
-moz-opasiteetti: 0,25;
opasiteetti: 0,25;
}
Nämä peittävyysasetukset ovat 25 prosenttia. Tämä tarkoittaa, että kuva näytetään 1/4 sen normaalista läpinäkyvyydestä. Täysin läpinäkymätön ilman läpinäkyvyyttä olisi 100 prosenttia, kun taas 0 prosenttia olisi täysin läpinäkyvä.
Seuraavaksi, jotta kuva olisi selkeä (tai tarkemmin sanottuna, jotta siitä tulee täysin läpinäkymätön), kun hiiri leijuu sen päälle, lisäät seuraavat:
.greydout: vie hiiri {
-webkit-opasiteetti: 1;
-moz-opasiteetti: 1;
opasiteetti: 1;
}
Lisää opasiteetin säätöjä
Huomaat, että näissä esimerkeissä käytämme säännön toimittajan etuliitteisiä versioita taaksepäin yhteensopivuuden takaamiseksi näiden selainten vanhemmille versioille. Vaikka tämä on hyvä käytäntö, selaimet tukevat läpinäkyvyyssääntöä, ja on turvallista pudottaa nämä toimittajan etuliitetyt rivit.
Silti ei ole mitään syytä olla sisällyttämättä näitä etuliitteitä, jos haluat varmistaa tuen vanhemmille selainversioille. Noudata vain hyväksyttyä parasta käytäntöä lopettaa julistus tyylin normaalilla, etuliittämättömällä versiolla.
Kun laitetta käytetään sivustossa, tämä peittävyyden säätö on äkillinen muutos. Ensinnäkin se on harmaa ja sitten ei, ilman näiden kahden välisiä tiloja. 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.
Lisää mukava vaikutus ja tee tämä haalistuminen asteittain lisäämällä siirtyminen omaisuus:
.greydout
luokka: .greydout {
-webkit-opasiteetti: 0,25;
-moz-opasiteetti: 0,25;
opasiteetti: 0,25;
-webkit-siirtyminen: kaikki kolme helppoa;
-moz-siirtymä: kaikki kolme helppoa;
-ms-siirtyminen: kaikki 3: t helposti;
-o-siirtymä: kaikki 3: t helposti;
siirtyminen: kaikki kolme helppoa;
}