The nauji stiliai, pristatyti CSS3 suteikė interneto profesionalams galimybę į savo puslapius įtraukti į „Photoshop“ panašius efektus. Vienas vaizdo efektas, kurį galite pridėti naudodami CSS3 yra padaryti tinklalapius interaktyviais kuriant išblukusias sritis, į kurias atkreipiamas dėmesys, kai svetainės lankytojas ką nors daro, pavyzdžiui, užveskite pelės žymeklį virš šio elemento. Šis efektas naudoja neskaidrumas ir perėjimas.
Pakeiskite nepermatomumą ant pelės žymeklio
Vienas interaktyvus elementas yra pakeisti vaizdo neskaidrumą, kai klientas užveda pelės žymeklį virš šio elemento. Šiame pavyzdyje (HTML rodomas žemiau) mes naudojame vaizdą su klasės atributu greydout.
Jei norite, kad jis būtų pilkas, pridėkite šias stiliaus taisykles prie savo CSS stiliaus lapo:
.greydout {
-webkit-neskaidrumas: 0,25;
-moz-neskaidrumas: 0,25;
neskaidrumas: 0,25;
}
Šie neskaidrumo nustatymai reiškia 25 proc. Tai reiškia, kad vaizdas bus rodomas kaip 1/4 jo įprasto skaidrumo. Visiškai nepermatomas be skaidrumo būtų 100 proc., O 0 proc. - visiškai skaidrus.
Jei norite, kad vaizdas būtų aiškus (arba tiksliau, kad jis taptų visiškai nepermatomas), kai pelė užveda pelės žymeklį, pridėtumėte:
.greydout: užveskite pelės žymeklį {
-webkit-neskaidrumas: 1;
-moz-neskaidrumas: 1;
neskaidrumas: 1;
}
Daugiau neskaidrumo koregavimų
Pastebėsite, kad šiuose pavyzdžiuose mes naudojame tiekėjo prefiksus turinčias taisyklės versijas, kad užtikrintume atgalinį senesnių šių naršyklių versijų suderinamumą. Nors tai yra gera praktika, neskaidrumo taisyklę gerai palaiko naršyklės, ir saugu atsisakyti tų pardavėjo priešdėlių eilučių.
Vis dėlto nėra jokios priežasties neįtraukti šių priešdėlių, jei norite užtikrinti senesnių naršyklių versijų palaikymą. Tiesiog nepamirškite laikytis priimtos geriausios praktikos, kai deklaracija baigiama įprasta, be prefiksų stiliaus versija.
Diegiant svetainėje šis neskaidrumo koregavimas yra staigus pokytis. Pirma, jis pilkas, o tada ne, be tų dviejų tarpinių būsenų. Tai tarsi šviesos jungiklis - įjungimas arba išjungimas. Tai gali būti tai, ko norite, bet galbūt norėsite eksperimentuoti ir su laipsniškesniais pokyčiais.
Norėdami pridėti gražų efektą ir palaipsniui išblukti, pridėkite perėjimas nuosavybė:
.greydout
klasė: .greydout {
-webkit-neskaidrumas: 0,25;
-moz-neskaidrumas: 0,25;
neskaidrumas: 0,25;
-webkit-perėjimas: visi 3 palengvėja;
-moz-perėjimas: visi 3 palengvėja;
-ms-perėjimas: visi 3 palengvėja;
-perėjimas: visi 3 palengvėja;
perėjimas: visi 3 palengvėja;
}