Det nye stilarter introduceret i CSS3 gav webfagfolk mulighed for at tilføje Photoshop-lignende effekter til deres sider. En visuel effekt, du kan tilføje ved hjælp af CSS3 er at gøre websider interaktive ved at oprette falmede områder, der kommer i fokus, når en besøgende på webstedet gør noget, som at svæve over dette element. Denne effekt bruger en kombination af Gennemsigtighed og overgang.
Skift opacitet ved svævning
Et interaktivt element er at ændre et billedes opacitet, når en kunde svæver over dette element. I dette eksempel (HTML vises nedenfor) bruger vi et billede med klasseattributten greydout.
For at gøre det nedtonet skal du tilføje følgende stilregler til dit CSS-stilark:
.greydout {
-webkit-opacitet: 0,25;
-moz-opacitet: 0,25;
uigennemsigtighed: 0,25;
}
Disse opacitetsindstillinger oversættes til 25 procent. Dette betyder, at billedet vises som 1/4 af dets normale gennemsigtighed. Fuldstændig uigennemsigtig uden gennemsigtighed ville være 100 procent, mens 0 procent ville være fuldstændig gennemsigtig.
For at gøre billedet klart (eller mere præcist for at blive fuldstændig uigennemsigtigt), når musen svæver over det, tilføj du derefter følgende:
.greydout: svæver {
-webkit-opacitet: 1;
-moz-opacitet: 1;
uigennemsigtighed: 1;
}
Flere justeringer af opacitet
Du vil bemærke, at vi i disse eksempler bruger de sælger-præfikserede versioner af reglen for at sikre bagudkompatibilitet for ældre versioner af disse browsere. Selvom dette er en god praksis, opacitetsreglen understøttes godt af browsere, og det er sikkert at droppe disse sælgerpræfikserede linjer.
Der er stadig ingen grund til ikke at medtage disse præfikser, hvis du vil sikre support til ældre browserversioner. Bare sørg for at følge den accepterede bedste praksis for at afslutte erklæringen med den normale, ikke-præfixede version af stilen.
Når den bruges på et websted, er denne opacitetsjustering en pludselig ændring. For det første er den grå, og så er den ikke, uden mellemliggende tilstande mellem disse to. Det er som en lyskontakt - til eller fra. Dette kan være hvad du vil, men du vil måske også eksperimentere med en mere gradvis ændring.
For at tilføje en flot effekt og gøre denne falmning gradvis skal du tilføje overgang ejendom:
.greydout
klasse: .greydout {
-webkit-opacitet: 0,25;
-moz-opacitet: 0,25;
uigennemsigtighed: 0,25;
-webkit-overgang: alle 3'er lette;
-moz-overgang: alle 3'er lette;
-ms-overgang: alle 3'er lette;
-o-overgang: alle 3'er lette;
overgang: alle 3'er lette;
}