Webontwerpers wilden al lang meer controle over de pagina's die ze aan het maken waren toen CSS3 het toneel betrad. De nieuwe stijlen geïntroduceerd in CSS3 gaven webprofessionals de mogelijkheid om Photoshop-achtige effecten aan hun pagina's toe te voegen. Dit omvat eigenschappen zoals slagschaduwen en gloeilampen, afgeronde hoeken en meer. CSS3 heeft ook animatie-achtige effecten geïntroduceerd die kunnen worden gebruikt om leuke interactiviteit op sites te creëren.
Een heel mooi visueel effect dat u met CSS3 aan elementen in uw website kunt toevoegen, is om ze in en uit te laten faden met een combinatie van de eigenschappen voor dekking en overgang. Dit is een eenvoudige en goed ondersteunde manier om uw pagina's interactiever te maken door vervaagde gebieden te maken die in beeld komen wanneer een sitebezoeker iets doet, zoals over dat element zweven.
Laten we eens kijken hoe eenvoudig het is om dit interactieve visuele effect toe te voegen aan verschillende elementen op uw webpagina's.
Wijzig de dekking op zweeftekst
We gaan eerst kijken hoe de dekking van een afbeelding kan worden gewijzigd wanneer een klant over dat element zweeft. Voor dit voorbeeld (de HTML wordt hieronder weergegeven) gebruiken we een afbeelding met het klassenkenmerk van
greydout.
Om het grijs te maken, voegen we de volgende stijlregels toe aan ons CSS-stylesheet: .greydout {-webkit-dekking: 0,25;-moz-opacity: 0,25;dekking: 0,25;}
Deze dekkingsinstellingen vertalen naar 25%. Dit betekent dat de afbeelding wordt weergegeven als 1/4 van de normale transparantie. Volledig ondoorzichtig zonder transparantie zou 100% zijn, terwijl 0% volledig transparant zou zijn. Vervolgens, om de afbeelding duidelijker te maken (of beter gezegd, om volledig ondoorzichtig te worden) wanneer de muis eroverheen zweeft, zou je de afbeelding toevoegen : hoverpseudo-class: .greydout: hover {-webkit-dekking: 1;-moz-opacity: 1;dekking: 1;}
U zult opmerken dat wij voor deze voorbeelden de voorgedefinieerde versies van de regel gebruiken om achterwaartse compatibiliteit te garanderen voor oudere versies van deze browsers. Hoewel dit een goede gewoonte is, is de realiteit dat de dekkingsregel nu goed wordt ondersteund door browsers en dat het vrij veilig is om die vooraf ingestelde regels van de verkoper te verwijderen. Toch is er ook 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 beste werkwijze volgt om de aangifte te beëindigen met de normale, niet-vooraf gedefinieerde versie van de stijl. Als je dit op een site hebt geïmplementeerd, zou je zien dat deze ondoorzichtigheidsaanpassing een zeer abrupte verandering is. 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 kan zijn wat je wilt, maar je wilt misschien ook experimenteren met een verandering die geleidelijker is. Om een echt leuk effect toe te voegen en dit geleidelijk te laten vervagen, wil je het toevoegen overgang
eigendom van de .greydoutclass: .greydout {-webkit-dekking: 0,25;-moz-opacity: 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;}
