Webdesignere hadde lenge ønsket mer kontroll over sidene de skapte da CSS3 traff scenen. De nye stilene introdusert i CSS3 ga webprofessorer muligheten til å legge til Photoshop-lignende effekter på sidene sine. Dette inneholdt egenskaper som drop shadows og gløder, avrundede hjørner og mer. CSS3 introduserte også animasjonslignende effekter som kan brukes til å skape god interaktivitet på nettsteder.
En veldig fin visuell effekt du kan legge til elementene på nettstedet ditt ved hjelp av CSS3, er å få dem til å falme inn og ut ved hjelp av en kombinasjon av egenskapene for ugjennomtrengelighet og overgang. Dette er en enkel og godt støttet måte å gjøre sidene dine mer interaktive ved å skape falmede områder som kommer i fokus når en side besøkende gjør noe, som å sveve over det elementet.
La oss se på hvor enkelt det er å legge til denne interaksjonelle visuelle effekten på ulike elementer på websidene dine.
Endre Opacity on Hover
Vi vil begynne med å se på hvordan du kan endre opaciteten til et bilde når en kunde svinger over det elementet. For dette eksempelet (HTML er vist nedenfor) bruker vi et bilde med klassetributtet til
greydout.
For å gjøre det grått, legger vi til følgende stilregler til vårt CSS stilark: .greydout {-webkit-opacity: 0,25;-moz-opacity: 0,25;opasitet: 0,25;}
Disse opasitetsinnstillingene oversetter til 25%. Dette betyr at bildet vil bli vist som 1/4 av sin normale gjennomsiktighet. Helt ugjennomsiktig uten gjennomsiktighet ville være 100%, mens 0% ville være helt gjennomsiktig. For å få bildet til å bli klart (eller mer nøyaktig, for å bli helt ugjennomsiktig) når musen er svevet over den, vil du legge til :svevepseudoklasse: .greydout: hover {-webkit-opacity: 1;-moz-opacity: 1;opasitet: 1;}
Du vil merke at for disse eksemplene bruker vi leverandørens prefikserte versjoner av regelen for å sikre kompatibilitet bakover for eldre versjoner av disse nettleserne. Selv om dette er en god praksis, er virkeligheten at opacitetsregelen nå støttes godt av nettlesere, og det er ganske trygt å slette disse leverandørens prefikserte linjer. Likevel er det heller ikke grunn til ikke å inkludere disse prefiksene hvis du vil sikre støtte til eldre nettleserversjoner. Bare vær sikker på å følge den aksepterte beste praksisen med å avslutte erklæringen med den vanlige, ikke forhåndsdefinerte versjonen av stilen. Hvis du distribuerte dette på et nettsted, ville du se at denne opacitetsjusteringen er en veldig brå endring. Først er det grått, og da er det ikke, uten mellomliggende stater mellom de to. Det er som en lysknapp - på eller av. Dette kan være hva du vil, men du vil kanskje også eksperimentere med en endring som er gradvis. For å legge til en veldig fin effekt og gjør dette fading gradvis, vil du legge til overgang
eiendom til .greydoutklasse: .greydout {-webkit-opacity: 0,25;-moz-opacity: 0,25;opasitet: 0,25;-webkit-overgang: alle 3s enkelhet;-moz-overgang: alle 3s enkelt;-ms-overgang: alle 3s lett;-Overgang: alle 3s enkelhet;Overgang: alle 3s lett;}
