Webdesignere havde længe ønsket mere kontrol over de sider, de skabte, da CSS3 ramte scenen. De nye stilarter, der blev introduceret i CSS3, gav webprofessionalerne mulighed for at tilføje Photoshop-lignende effekter til deres sider. Dette omfattede egenskaber som drop shadows og glows, afrundede hjørner og meget mere. CSS3 introducerede også animationslignende effekter, som kan bruges til at skabe god interaktivitet på websteder.
En meget flot visuel effekt, du kan føje til elementer på dit websted ved hjælp af CSS3, er at få dem til at falme ind og ud ved hjælp af en kombination af egenskaberne for opacitet og overgang. Dette er en nem og velunderbygget måde at gøre dine sider mere interaktive ved at skabe falmede områder, der kommer i fokus, når en besøgende på webstedet gør noget, som at svæve over det element.
Lad os se på, hvor nemt det er at tilføje denne interaktive visuelle effekt til forskellige elementer på dine websider.
Skift uigennemsigtighed på Hover
Vi vil begynde med at se på, hvordan du ændrer opacitet af et billede, når en kunde svæver over det pågældende element. For dette eksempel (HTML er vist nedenfor) bruger vi et billede med klassen attributten af
greydout.
For at gøre det gråtonet, tilføjer vi følgende stilregler til vores CSS stilark: .greydout {-webkit-opacitet: 0,25;-moz-opacitet: 0,25;opacitet: 0,25;}
Disse opacitet indstillinger oversættes til 25%. Dette betyder, at billedet vil blive vist som 1/4 af sin normale gennemsigtighed. Fuldt uigennemsigtig uden gennemsigtighed ville være 100%, mens 0% ville være helt gennemsigtig. For at gøre billedet klart (eller mere præcist for at blive helt uigennemtrængeligt), når musen svæves over det, vil du tilføje : hoverpseudoklasse: .greydout: hover {-webkit-opacity: 1;-moz-opacity: 1;opacitet: 1;}
Du vil bemærke, at vi for disse eksempler bruger de forudgående versioner af reglen for sælger for at sikre kompatibilitet bagud for ældre versioner af disse browsere. Selv om dette er en god praksis, er virkeligheden, at opacitetsreglen nu er godt understøttet af browsere, og det er ret sikkert at slippe disse sælger præfikserede linjer. Alligevel er der heller ikke grund til ikke at inkludere disse præfikser, hvis du vil sikre støtte til ældre browserversioner. Bare vær sikker på at følge den accepterede bedste praksis for at afslutte erklæringen med den normale, ikke-præfikset version af stilen. Hvis du implementerede dette på et websted, ville du se, at denne opacitetstilpasning er en meget abrupt ændring. For det første er det gråt, og så er det ikke, uden mellemliggende stater mellem de to. Det er som en lyskontakt - til eller fra. Det kan være, hvad du vil, men du vil måske også eksperimentere med en ændring, der er mere gradvis. For at tilføje en rigtig flot effekt og gøre dette fade gradvist, vil du tilføje overgang
ejendom til .greydoutklasse: .greydout {-webkit-opacitet: 0,25;-moz-opacitet: 0,25;opacitet: 0,25;-webkit-overgang: alle 3s let;-moz-overgang: alle 3s let;-ms-overgang: alle 3s let;-o-overgang: alle 3s let;overgang: alle 3s let;}
