De nya stilar introducerade i CSS3 gav professionella på webben möjligheten att lägga till Photoshop-liknande effekter på sina sidor. En visuell effekt som du kan lägga till med CSS3 är att göra webbsidor interaktiva genom att skapa bleka områden som kommer i fokus när en besökare gör något, som att sväva över det elementet. Denna effekt använder en kombination av opacitet och övergång.
Ändra opacitet på svävaren
Ett interaktivt element är att ändra en bilds opacitet när en kund svävar över det elementet. I det här exemplet (HTML visas nedan) använder vi en bild med klassattributet greydout.
För att göra det nedtonat, lägg till följande stilregler i ditt CSS-formatmall:
.greydout {
-webkit-opacitet: 0,25;
-moz-opacitet: 0,25;
opacitet: 0,25;
}
Dessa opacitetsinställningar översätts till 25 procent. Detta innebär att bilden visas som 1/4 av sin normala transparens. Helt ogenomskinligt utan transparens skulle vara 100 procent, medan 0 procent skulle vara helt transparent.
Nästa, för att göra bilden klar (eller mer exakt, för att bli helt ogenomskinlig) när musen svävar över den, skulle du lägga till följande:
.greydout: sväva {
-webkit-opacitet: 1;
-moz-opacitet: 1;
opacitet: 1;
}
Justeringar av mer opacitet
Du kommer att märka att för dessa exempel använder vi de leverantörsprefixerade versionerna av regeln för att säkerställa bakåtkompatibilitet för äldre versioner av dessa webbläsare. Även om detta är en bra praxis, Opacitetsregeln stöds väl av webbläsare, och det är säkert att släppa de säljarprefixerade raderna.
Ändå finns det ingen anledning att inte ta med dessa prefix om du vill säkerställa stöd för äldre webbläsarversioner. Var noga med att följa den accepterade bästa praxis för att avsluta deklarationen med den normala, icke-prefixade versionen av stilen.
När den distribueras på en webbplats är denna opacitetsjustering en plötslig förändring. Först är det grått, och sedan inte, utan mellanliggande tillstånd mellan dessa två. Det är som en strömbrytare - på eller av. Det här kan vara vad du vill, men du kanske också vill experimentera med en mer gradvis förändring.
För att lägga till en fin effekt och göra denna blekning gradvis, lägg till övergång fast egendom:
.greydout
klass: .greydout {
-webkit-opacitet: 0,25;
-moz-opacitet: 0,25;
opacitet: 0,25;
-webkit-övergång: alla 3s lätthet;
-moz-övergång: alla 3s lätt;
-ms-övergång: alla 3s lätt;
-o-övergång: alla 3s lätthet;
övergång: alla 3s lätt;
}