Web dizajneri su dugo željeli više kontrole nad stranicama koje su stvorili kada je CSS3 pogodio scenu. Novi stilovi uvedeni u CSS3 dali su web profesionalcima mogućnost dodavanja Photoshop-sličnih efekata na njihove stranice. To je uključivalo značajke poput sjene i sjene, zaobljene kutove i još mnogo toga. CSS3 je također predstavio animirane efekte koji se mogu koristiti za stvaranje dobre interaktivnosti na web stranicama.
Jedan vrlo lijep vizualni efekt koji možete dodati elementima na vašoj web stranici pomoću CSS3 je da ih izbacite i izbacite kombinacijom svojstava za neprozirnost i prijelaz. Ovo je jednostavan i dobro podržan način da vaše stranice više interaktivno stvaraju blijeda područja koja dolaze u fokus kada posjetitelj web mjesta nešto čini, poput lebdeći iznad tog elementa.
Pogledajmo kako je lako dodati ovaj interaktivni vizualni efekt različitim elementima na svojim web stranicama.
Promijenite neprozirnost na lebdjeti
Započeti ćemo promatrati kako promijeniti neprozirnost slike kad klijent lebdi nad tim elementom. Za ovaj primjer (HTML prikazan dolje) koristimo sliku s atributom klase
greydout.
Kako bismo sive, dodali smo sljedeća pravila stila na naš CSS stilski list: .greydout {-webkit-opacity: 0.25;-moz-neprozirnost: 0,25;neprozirnost: 0,25;}
Te postavke neprozirnosti prevode se na 25%. To znači da će slika biti prikazana kao 1/4 normalne prozirnosti. Potpuno neprozirna bez transparentnosti bilo bi 100% dok bi 0% bilo potpuno transparentno. Zatim, da bi slika postala jasna (ili točnije, kako bi postala potpuno neprozirna) kada je miš lebdio iznad njega, dodali biste : hoverpseudo-klasa: .greydout: zadržite se {-webkit-opacity: 1;-moz-neprozirnost: 1;neprozirnost: 1;}
Primjetit ćete da za te primjere upotrebljavamo isporučene preporučene verzije pravila kako bismo osigurali kompatibilnost sa starijim verzijama tih preglednika. Iako je to dobra praksa, stvarnost je da pravilo o neprozirnosti sada dobro podržava preglednik i da je prilično sigurna da ispadne one predodređene linije dobavljača. Ipak, nema razloga da ne uključite ove prefikse ako želite osigurati podršku starijim verzijama preglednika. Samo budite sigurni da slijedite prihvaćenu najbolju praksu za okončanje deklaracije s uobičajenom, neprefixiranom verzijom stila. Ako ste ovo implementirali na web mjesto, vidjet ćete da je ta prilagodba neprozirnosti vrlo nagla promjena. Prvo, to je sivo i onda to nije, bez privremenih stanja između ta dva. To je poput prekidača svjetla - uključeno ili isključeno. To može biti ono što želite, ali možda želite i eksperimentirati s promjenom koja je postupnija. Da biste dodali jako lijep efekt i učinili da se ovo postupno izblijedi, želite dodati tranzicija
imovinu na .greydoutklasa: .greydout {-webkit-opacity: 0.25;-moz-neprozirnost: 0,25;neprozirnost: 0,25;-webkit-transition: sve 3s jednostavnost;-moz-prijelaz: sve 3s jednostavnost;-ms-transition: sve 3s jednostavnost;-o-prijelaz: sve 3s jednostavnost;tranzicija: sve 3s jednostavnost;}
