Interneto dizaineriai ilgai norėjo daugiau kontroliuoti puslapius, kuriuos jie kuria, kai CSS3 pasiekė sceną. CSS3 pristatyti nauji stiliai suteikė žiniatinklio profesionalams galimybę savo puslapiams pridėti Photoshop tipo efektų. Tai apima tokias savybes kaip šešėliai ir švytėjimas, suapvalinti kampai ir dar daugiau. CSS3 taip pat pristatė animacinius efektus, kurie gali būti naudojami norint sukurti tinkamą svetainių interaktyvumą.
Vienas labai gražus vizualinis efektas, kurį galite pridėti prie savo svetainės elementų naudodamas CSS3, yra tai, kad jie išnyks ir išnyks, naudojant netikslumų ir perėjimo savybių derinį. Tai yra lengvas ir tinkamai palaikomas būdas, kad jūsų puslapiai būtų labiau interaktyvūs, sukurdami išblukusias sritis, kuriose dėmesys sutelktas, kai svetainės lankytojas kažką daro, pvz., Navigaciją virš šio elemento.
Pažiūrėkime, kaip lengva pridėti šį sąveikaujantį vaizdinį efektą į įvairius elementus jūsų tinklalapiuose.
Keisti neskaidrumą, kai navigate
Mes pradėsime nuo to, kaip pakeisti vaizdo nepermatomumą, kai klientas pradeda judėti virš šio elemento. Šiame pavyzdyje (HTML yra parodyta žemiau) mes naudojame vaizdą su klasės atributu
greydout.
Jei norite, kad tekstas būtų pilkas, pridetume šias stiliaus taisykles su mūsų CSS stilių: .greydout {-webkit-opacity: 0.25;-moz-opacity: 0.25;neskaidrumas: 0,25;}
Šie neskaidrumo nustatymai verčia 25%. Tai reiškia, kad vaizdas bus rodomas kaip 1/4 jo įprasto skaidrumo. Visiškai nepermatomas be skaidrumo būtų 100%, o 0% būtų visiškai skaidrus. Kitas, kad, kai pelė bus užveskite virš jo, atrodo aiškus (arba tiksliau, tampa visiškai nepermatomas) pridedate : užveskite pelępseudo-klasė: .greydout: hover {-webkit-opacity: 1;-moz-opacity: 1;neskaidrumas: 1;}
Jūs pastebėsite, kad šiais pavyzdžiais mes naudojame iš anksto pateiktą versijos gamintoją, kad būtų užtikrintas ankstesnių šių naršyklių versijų suderinamumas. Nors tai yra gera praktika, realybė yra ta, kad naršyklių dabar gerai palaiko neskaidrumo taisyklę, ir yra gana saugu atsisakyti tų tiekėjų prefiksuotos linijos. Vis dėlto nėra priežasties neįtraukti šių prefiksų, jei norite užtikrinti paramą senesnėms naršyklės versijoms. Tiesiog būtinai laikykitės priimtos geriausios deklaracijos pabaigos praktikos, naudodamiesi įprasta, nepritaikyta stiliaus versija. Jei jį įdėtumėte į svetainę, pamatytumėte, kad šis neskaidrumo koregavimas yra labai staigus. Pirma, tai pilka, o tada nėra, be tarpinių tų dviejų. Tai kaip šviesos įjungimas - įjungimas arba išjungimas. Tai gali būti tai, ko norite, bet taip pat galite pabandyti pasikeisti, kuris yra labiau palaipsnis. Norėdami pridėti tikrai gražų efektą ir padaryti tai išnyks palaipsniui, jūs norite pridėti perėjimas
nuosavybė į .greydoutklasė: .greydout {-webkit-opacity: 0.25;-moz-opacity: 0.25;neskaidrumas: 0,25;-webkit-transition: visi 3s lengvai;-moz-transition: visi 3s lengvumas;-ms-transition: visi 3s lengvai;-o-perėjimas: visi 3s lengvai;perėjimas: visi 3s lengvai;}
