Webbdesigners hade länge önskat mer kontroll över sidorna de skapade när CSS3 slog på scenen. De nya stilar som introducerades i CSS3 gav webbprofessorer möjlighet att lägga till Photoshop-liknande effekter på deras sidor. Detta inkluderade egenskaper som drop skuggor och glöd, avrundade hörn och mycket mer. CSS3 introducerade också animationsliknande effekter som kan användas för att skapa bra interaktivitet på webbplatser.
En mycket fin visuell effekt som du kan lägga till element på din webbplats med hjälp av CSS3 är att få dem att blekna in och ut med hjälp av en kombination av egenskaperna för opacitet och övergång. Detta är ett enkelt och välunderbyggt sätt att göra dina sidor mer 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 här elementet.
Låt oss ta en titt på hur enkelt det är att lägga till denna interaktiva visuella effekt på olika delar på dina webbsidor.
Ändra opacitet på Hover
Vi börjar med att titta på hur man ändrar opacitet av en bild när en kund svävar över det här elementet. För detta exempel (HTML visas nedan) använder vi en bild med klassattributet för
greydout.
För att göra det grått, lägger vi till följande stilregler till vårt CSS-stilark: .greydout {-webkit-opacitet: 0,25;-moz-opacitet: 0,25;opacitet: 0,25;}
Dessa opacitet inställningar översätter till 25%. Detta innebär att bilden kommer att visas som 1/4 av sin normala genomskinlighet. Helt ogenomskinlig utan öppenhet skulle vara 100% medan 0% skulle vara helt transparent. För att göra bilden klar (eller mer noggrant, för att bli helt ogenomskinlig) när musen svävar över den, skulle du lägga till :svävapseudoklass: .greydout: svep {-webkit-opacity: 1;-moz-opacitet: 1;opacitet: 1;}
Du kommer att märka att för dessa exempel använder vi säljarens prefixade versioner av regeln för att säkerställa bakåtkompatibilitet för äldre versioner av dessa webbläsare. Även om det här är en bra övning, är realiteten att opacitetsregeln nu väl stöds av webbläsare och det är ganska säkert att släppa dessa leverantörs prefixade linjer. Det finns dock ingen anledning att inte inkludera dessa prefix om du vill säkerställa stöd för äldre webbläsarversioner. Var noga med att följa den godtagna bästa praxis för att sluta deklarationen med den vanliga, oförbegränsade versionen av stilen. Om du installerade detta på en webbplats så skulle du se att den här opacitetsjusteringen är en mycket abrupt förändring. För det första är det grått och då är det inte utan några mellanliggande stater mellan dessa två. Det är som en ljusbrytare - på eller av. Det kan vara vad du vill, men du kanske också vill experimentera med en förändring som är mer gradvis. För att lägga till en riktigt fin effekt och göra detta blekna gradvis, vill du lägga till övergång
egendom till .greydoutklass: .greydout {-webkit-opacitet: 0,25;-moz-opacitet: 0,25;opacitet: 0,25;-webkit-övergång: alla 3s enkelt;-moz-övergång: alla 3s lätt;-ms-övergång: alla 3s lätt;-o-övergång: alla 3s lättnad;övergång: alla 3s lätt;}
