De nye stiler introdusert i CSS3 ga web-profesjonelle muligheten til å legge til Photoshop-lignende effekter på sidene. En visuell effekt du kan legge til ved hjelp av CSS3 er å gjøre websider interaktive ved å lage falmede områder som kommer i fokus når en besøkende gjør noe, som å sveve over det elementet. Denne effekten bruker en kombinasjon av opasitet og overgang.
Endre opasitet når du holder musepekeren
Ett interaktivt element er å endre opasiteten til et bilde når en kunde svever over det elementet. For dette eksemplet (HTML vises nedenfor) bruker vi et bilde med klasseattributtet greydout.
For å gjøre det nedtonet, legg til følgende stilregler i CSS-stilarket ditt:
.greydout {
-webkit-opacity: 0,25;
-moz-opasitet: 0,25;
opasitet: 0,25;
}
Disse opacitetsinnstillingene oversettes til 25 prosent. Dette betyr at bildet vises som 1/4 av normal gjennomsiktighet. Fullstendig ugjennomsiktig uten gjennomsiktighet ville være 100 prosent, mens 0 prosent ville være helt gjennomsiktig.
For å gjøre bildet tydelig (eller mer nøyaktig, for å bli helt ugjennomsiktig) når musen svever over det, vil du legge til følgende:
.greydout: sveve {
-webkit-opacity: 1;
-moz-opacitet: 1;
opasitet: 1;
}
Flere justeringer av opasitet
Du vil legge merke til at for disse eksemplene bruker vi leverandør-prefikset versjoner av regelen for å sikre bakoverkompatibilitet for eldre versjoner av disse nettleserne. Selv om dette er en god praksis, opasitetsregelen støttes godt av nettlesere, og det er trygt å droppe disse leverandørprefikset linjene.
Det er likevel ingen grunn til ikke å ta med disse prefiksene hvis du vil sikre støtte for eldre nettleserversjoner. Bare vær sikker på å følge den aksepterte beste fremgangsmåten for å avslutte erklæringen med den vanlige, ikke-prefiksede versjonen av stilen.
Når den distribueres på et nettsted, er denne opasitetsjusteringen en brå endring. Først er det grått, og så er det ikke, uten mellomliggende tilstander mellom disse to. Det er som en lysbryter - på eller av. Dette kan være det du vil, men det kan også være lurt å eksperimentere med en mer gradvis endring.
For å legge til en fin effekt og gjøre denne blekningen gradvis, legg til overgang eiendom:
.greydout
klasse: .greydout {
-webkit-opacity: 0,25;
-moz-opasitet: 0,25;
opasitet: 0,25;
-webkit-overgang: alle 3s lette;
-moz-overgang: alle 3s lette;
-ms-overgang: alle 3s lette;
-o-overgang: alle 3s lette;
overgang: alle 3s lette;
}