De nieuwe stijlen geïntroduceerd in CSS3 gaf webprofessionals de mogelijkheid om Photoshop-achtige effecten aan hun pagina's toe te voegen. Eén visueel effect dat u kunt toevoegen met CSS3 is om webpagina's interactief te maken door vervaagde gebieden te creëren die in beeld komen wanneer een sitebezoeker iets doet, zoals de muisaanwijzer op dat element. Dit effect maakt gebruik van een combinatie van: ondoorzichtigheid en overgang.
Dekking wijzigen bij zweven
Een interactief element is om de dekking van een afbeelding te wijzigen wanneer een klant over dat element zweeft. Voor dit voorbeeld (de HTML wordt hieronder getoond), gebruiken we een afbeelding met het class attribuut van grijsborst.
Om het grijs te maken, voegt u de volgende stijlregels toe aan uw CSS-stylesheet:
.greydout {
-webkit-dekking: 0,25;
-moz-dekking: 0,25;
dekking: 0,25;
}
Deze dekkingsinstellingen vertalen zich naar 25 procent. Dit betekent dat de afbeelding wordt weergegeven als 1/4 van de normale transparantie. Volledig ondoorzichtig zonder transparantie zou 100 procent zijn, terwijl 0 procent volledig transparant zou zijn.
Vervolgens, om de afbeelding duidelijk te maken (of beter gezegd, om volledig ondoorzichtig te worden) wanneer de muis erover beweegt, zou je het volgende toevoegen:
.greydout: zweef {
-webkit-dekking: 1;
-moz-dekking: 1;
dekking: 1;
}
Meer dekkingsaanpassingen
U zult merken dat we voor deze voorbeelden de door de leverancier vooraf ingestelde versies van de regel gebruiken om achterwaartse compatibiliteit voor oudere versies van die browsers te garanderen. Hoewel dit een goede gewoonte is, de dekkingsregel wordt goed ondersteund door browsers, en het is veilig om die door de leverancier vooraf ingestelde regels te laten vallen.
Toch is er geen reden om deze voorvoegsels niet op te nemen als u zeker wilt zijn van ondersteuning voor oudere browserversies. Zorg ervoor dat u de geaccepteerde best practice volgt om de verklaring te beëindigen met de normale versie zonder prefix van de stijl.
Wanneer deze op een site wordt geïmplementeerd, is deze aanpassing van de dekking een abrupte verandering. Ten eerste is het grijs, en dan is het niet, zonder tussentijdse toestanden tussen die twee. Het is als een lichtschakelaar: aan of uit. Dit is misschien wat je wilt, maar je kunt ook experimenteren met een geleidelijkere verandering.
Om een leuk effect toe te voegen en dit geleidelijk te laten vervagen, voeg je de overgang eigendom:
.greydout
klasse:.greydout {
-webkit-dekking: 0,25;
-moz-dekking: 0,25;
dekking: 0,25;
-webkit-overgang: alle 3s gemak;
-moz-overgang: alle 3s gemak;
-ms-overgang: alle 3s gemak;
-o-overgang: alle 3s gemak;
overgang: alle 3s gemak;
}