Over maskers

Een masker verbergt een deel van een hostelement op basis van vorm- of transparantieniveaus. Hostelementen kunnen afbeeldingen, divs, tekstcontainers en componenten zijn.

Elk element kan slechts één masker hebben, maar u kunt lagen met maskers gebruiken door het hostelement in een div te verpakken en een masker op de container-div toe te passen. U kunt ook een ander element nesten in het hostelement en een masker aan het onderliggende element toevoegen.

Maskertypen

Afbeeldingsmasker
Kleurovergangsmasker
Clippadmasker

Browsercompatibiliteit

Microsoft Edge versie 40 en ouder ondersteunen alleen rechthoekige clippadmaskers. Andere maskertypen en -vormen worden genegeerd.

Afbeeldingsmasker

Afbeeldingsmaskers gebruiken de transparante gebieden van een afbeelding om het hostelement te verbergen.

Een afbeeldingsmasker toevoegen:

Klik met de rechtermuisknop op het element dat u wilt maskeren.
Selecteer Afbeeldingsmasker toevoegen in het pop-upmenu.
Importeer of selecteer de afbeelding die u als masker wilt gebruiken.

U kunt het formaat en de positie van het masker aanpassen met de Selectie-tool of het deelvenster Eigenschappen.

Opmerking: Voor afbeeldingsmaskers kan positionering op basis van een percentage niet worden gebruikt.

Kleurovergangsmasker

Kleurovergangsmaskers verbergen het hostelement op basis van een kleurovergang van transparantieniveaus.

Google Web Designer ondersteunt beide typen kleurovergangen voor maskers:

Lineaire kleurovergang
Radiale kleurovergang

Een kleurovergangsmasker toevoegen:

Klik met de rechtermuisknop op het element dat u wilt maskeren.
Selecteer Kleurovergangsmasker toevoegen in het pop-upmenu.
Klik op de staal voor kleurovergangen in het deelvenster Eigenschappen om het kleurovergangstype, de kleuren, de ondoorzichtigheid en de hoek (alleen voor lineaire kleurovergangen) aan te passen.

Het kleurovergangsmasker heeft standaard hetzelfde formaat als het hostelement, maar u kunt de eigenschappen voor de positie en formaat van het masker aanpassen met de Selectie-tool of het deelvenster Eigenschappen.

Opmerking: Voor kleurovergangsmaskers kan positionering op basis van een percentage niet worden gebruikt.

Clippadmaskers

Clippadmaskers gebruiken een geometrische vorm om te definiëren welk deel van het hostelement moet worden weergegeven.

U kunt de maskervorm selecteren door op de Clippadmasker-tool in de werkbalk te klikken en dit ingedrukt te houden totdat een pop-upmenu wordt weergegeven:

Rechthoekig masker (standaard)
Ovaal masker
Polygoonmasker

Browsercompatibiliteit

Internet Explorer en Microsoft Edge ondersteunen alleen clippadmaskers in rechthoekige vormen waarbij de positie en het formaat worden opgegeven in pixels. Op percentage gebaseerde maskers en andere maskervormen, waaronder afgeronde hoeken voor rechthoekige maskers, worden genegeerd.
Firefox en Safari geven rechthoekige maskers met afgeronde hoeken mogelijk niet goed weer voor grote hoekradiuswaarden (in vergelijking met de maskerafmetingen).
Safari ondersteunt geen clippadmaskers voor vormen die zijn getekend met de Rechthoek-tool. Als tijdelijke oplossing gebruikt u een div-element in plaats van een rechthoek en plaatst u het masker op het div-element.
In Chrome en Opera worden clippadmaskers niet goed weergegeven als het hostelement een 3D-getransformeerd onderliggend element bevat.
Rechthoekige maskers met afgeronde hoeken die zijn ingesteld met een op een percentage gebaseerde radius, kunnen in verschillende browsers enigszins anders worden weergegeven.

Een clippadmasker toevoegen:

Selecteer het element dat u wilt maskeren.
Selecteer de masker-tool voor de gewenste vorm.
Stel aanvullende opties in voor de maskervorm.
- Alleen rechthoekige maskers: Voor afgeronde hoeken stelt u de hoekradius in op de balk met toolopties bovenaan. Gebruik de knop Identiek houden om dezelfde radius te gebruiken voor alle vier de hoeken.
- Alleen polygoonmaskers: Selecteer de gewenste vorm in de balk met toolopties bovenaan. Gebruik de optie Vrije vorm om uw eigen vorm te tekenen. Als u de optie Normale polygoon selecteert, geeft u het gewenste aantal polygoonzijden op.
Teken het masker over het hostelement.
- Houd de Shift-toets ingedrukt tijdens het tekenen om het masker te beperken zodat het even breed als hoog is. De Shift-toets heeft geen invloed op maskers met vrije vormen of bepaalde vooraf ingestelde vormen die in plaats daarvan altijd worden getekend met zijden van gelijke lengte: Driehoek, Ruit, Vijfhoek, Zeshoek en Ster.
- Houd de Alt-toets ingedrukt om de eerste tekenpositie als middelpunt van het masker te gebruiken.

Opmerking: Nadat een polygoonmasker is getekend, kunt u elk hoekpunt verslepen om de vorm van het masker te wijzigen. U kunt het aantal zijden niet wijzigen.

Vormen van polygoonmaskers

	Vrije vorm (teken uw eigen vorm)
	Normale polygoon (stel het aantal zijden in; zijden worden even lang getekend)
	Driehoek
	Rechthoek
	Frame
	Ruit
	Vijfhoek
	Zeshoek
	Chevron naar rechts
	Chevron naar links
	Kruis
	Ster
	Pijl-rechts
	Pijl-links

Maskers selecteren

Op het werkvlak: Selecteer het hostelement en klik op het masker. Het masker heeft een groene omtrek.
Op de tijdlijn van de geavanceerde modus: Selecteer de maskerlaag onder de laag met het hostelement. Maskerlagen worden aangeduid met het symbool vóór de naam van de laag.

U kunt maskerlagen verbergen en vergrendelen op de tijdlijn van de geavanceerde modus zodat u gemakkelijker kunt werken met de hostelementen.

Meerdere maskers selecteren

Gebruik Ctrl+klik om meerdere maskerlagen op de tijdlijn van de geavanceerde modus te selecteren om ze tegelijk te verwijderen. U kunt niet meer dan één masker tegelijk bewerken.

U kunt een combinatie van elementen en maskers alleen verwijderen als de hostelementen voor de maskers in de selectie zijn opgenomen.

Maskers bewerken

U kunt maskers rechtstreeks bewerken op het werkvlak of via het deelvenster Eigenschappen. Css-eigenschappen voor maskers zijn niet beschikbaar in het deelvenster Css.

Maskers kunnen op de volgende manieren worden bewerkt:

Een masker knippen, kopiëren en plakken
Een masker verplaatsen
Het formaat van een masker aanpassen
Een masker draaien
De bron van een afbeeldingsmasker wijzigen
De kleurovergang van een kleurovergangsmasker wijzigen
De kromming van de hoeken van een rechthoekig masker wijzigen
De vorm van een polygoonmasker wijzigen

Een masker knippen, kopiëren en plakken

U kunt op een van de volgende manieren een masker knippen of kopiëren en in een ander element plakken (zelfs in een ander document):

Op het werkvlak of in de tijdlijn van de geavanceerde modus:
- Klik met de rechtermuisknop op het masker en selecteer Knippen of Kopiëren.
- Klik met de rechtermuisknop op het element dat u wilt maskeren en selecteer Plakken of Masker vervangen.
In de tijdlijn van de geavanceerde modus:
- Sleep de maskerlaag naar een elementlaag om het masker over te zetten naar een ander hostelement (niet beschikbaar om een masker te vervangen).
- Houd de Alt-toets ingedrukt terwijl u een maskerlaag sleept om het masker naar een ander element te kopiëren (niet beschikbaar om een masker te vervangen).
Sneltoetsen:
- Knippen: Ctrl+X (Windows) of ⌘+X (Mac)
- Kopiëren: Ctrl+C (Windows) of ⌘+C (Mac)
- Plakken: Ctrl+V (Windows) of ⌘+V (Mac)
Menuopdrachten:
- Bewerken > Knippen
- Bewerken > Kopiëren
- Bewerken > Plakken of Masker vervangen

Eventuele maskeranimaties worden ook geplakt.

Beperkingen voor het kopiëren en plakken van maskers

U kunt slechts één masker selecteren om te knippen of te kopiëren en één element om het masker in te plakken.
Als u een masker plakt in een element dat al een masker heeft, wordt het bestaande masker vervangen.
Maskers kunnen niet worden geknipt, gekopieerd of geplakt in mediaregels.

Een masker verplaatsen

Selecteer het masker dat u wilt verplaatsen en gebruik een van de volgende methoden:

Bewerk de eigenschappen voor de boven- en linkerpositie in het deelvenster Eigenschappen. Deze waarden zijn relatief ten opzichte van de linkerbovenhoek van het hostelement.
Gebruik de pijltoetsen om het masker één pixel per keer te verplaatsen. Houd de Shift-toets ingedrukt terwijl u op een pijltoets drukt om het masker 10 pixels te verplaatsen.
Gebruik de Selectie-tool om het masker te verslepen met de muis. Houd de Shift-toets ingedrukt tijdens het slepen om het masker alleen langs één as te verplaatsen.

Maskers kunnen buiten de begrenzingen van hun hostelement worden geplaatst.

Opmerking: Voor afbeeldings- en kleurovergangsmaskers kan positionering op basis van een percentage niet worden gebruikt.

Het formaat van een masker aanpassen

Selecteer het masker waarvan u het formaat wilt aanpassen en dan:

Bewerk de eigenschappen voor breedte en hoogte in het deelvenster Eigenschappen.
Gebruik de Selectie-tool met de optie Transformeren aangezet in de balk met toolopties bovenaan.
- Houd de Shift-toets ingedrukt tijdens het slepen om de beeldverhouding te handhaven.
- Houd de Alt-toets (Windows) of Option-toets (Mac) ingedrukt tijdens het slepen om het formaat van het masker aan te passen zonder het middelpunt te wijzigen.

Een masker draaien

Maskers kunnen niet rechtstreeks worden gedraaid, maar u kunt hetzelfde effect bereiken door de volgende stappen uit te voeren voordat u het masker toevoegt:

Verpak het element dat u wilt maskeren.
Voeg het masker aan de container-div toe.
Draai de container-div. Het masker draait ook.
Draai het oorspronkelijke element in de tegenovergestelde richting.

De bron van een afbeeldingsmasker wijzigen

U kunt de afbeelding die wordt gebruikt voor een afbeeldingsmasker als volgt wijzigen:

Selecteer het masker.
Klik in het deelvenster Eigenschappen op de knop Afbeeldingsmasker instellen in het veld Bron.
Selecteer een afbeelding in de bibliotheek of klik op de knop Items importeren om een andere afbeelding te gebruiken.
Klik op OK.

De kleurovergang van een kleurovergangsmasker wijzigen

U kunt de kleurovergang voor een kleurovergangsmasker aanpassen.

Selecteer het masker.
Klik in het deelvenster Eigenschappen op de staal voor kleurovergangen.
De kleurovergang bewerken:
- Type kleurovergang: Selecteer de knop Lineaire kleurovergang of Radiale kleurovergang .
- Overgangsafstand: Sleep een transparantiemarkering langs de bovenkant van de kleurovergangsbalk om de overgangsafstand te wijzigen.
- Transparantie: Transparantiemarkeringen stellen het ondoorzichtigheidsniveau in op een bepaald punt langs de kleurovergang. 100% geeft aan dat het hostelement volledig zichtbaar is en 0% geeft aan dat het hostelement volledig verborgen is. Klik op een transparantiemarkering om het bijbehorende ondoorzichtigheidsniveau te bewerken in het percentageveld aan de rechterkant.
- Extra transparantiemarkeringen: Als u meer transparantiemarkeringen wilt toevoegen, klikt u op de kleurovergangsbalk. Als u een transparantiemarkering wilt verwijderen, sleept u deze omlaag.
- Hoek: Voor lineaire kleurovergangen kunt u de hoek aanpassen.
- Standaard: Klik op de knop Standaard kleurovergang om de kleurovergang te resetten naar de standaardinstellingen (een lineaire kleurovergang van 0% tot 100% bij 90 graden).

De kromming van de hoeken van een rechthoekig masker wijzigen

U kunt de hoeken van een rechthoekig masker wijzigen zodat ze vierkant of afgerond zijn, en de krommingsradius van afgeronde hoeken aanpassen.

Selecteer het masker.
Pas in het deelvenster Eigenschappen de hoekradius aan in pixels of als percentage. Als u de radius instelt op 0, wordt de hoek vierkant.
Als de knop Identiek houden actief is, wordt dezelfde waarde toegepast op alle vier de hoeken. Deactiveer de knop om elke hoek afzonderlijk te configureren.

De vorm van een polygoonmasker wijzigen

U kunt de vorm van een polygoonmasker op het werkvlak aanpassen:

Selecteer het masker.
Selecteer de tool Polygoonmasker op de werkbalk. Er worden handgrepen weergegeven bij elk hoekpunt.
Sleep elk hoekpunt naar de gewenste plek.
- Houd de Shift-toets ingedrukt tijdens het slepen om het hoekpunt langs slechts één as te verplaatsen (verticaal of horizontaal).

Opmerking: U kunt het aantal zijden van een bestaand polygoonmasker niet wijzigen.

Animaties toevoegen aan maskers

U kunt animaties toevoegen aan het formaat en de positie van het masker. U kunt ook zichtbaarheidsbereiken gebruiken om te bepalen wanneer een masker verschijnt of verdwijnt. De maskeranimatie is onafhankelijk van de animatie voor het hostelement.

Voor rechthoekige maskers kunt u een animatie aan afgeronde hoeken toevoegen. Voor polygoonclippadmaskers kunt u ook animaties toevoegen aan de vorm van het masker (hoewel niet het aantal zijden) door de hoekpunten opnieuw te positioneren bij een sleutelframe.

Maskers kunnen niet bij meerdere frames worden bewerkt. Selecteer één sleutelframe tegelijk om de maskeranimatie te bewerken.

Opmerking: Als u bij lagere snelheden animaties toevoegt aan afbeeldingsmaskers, kan een trillend effect merkbaar zijn omdat fractionele pixelwaarden tussen sleutelframes worden afgerond.

Browsercompatibiliteit

Animaties voor clippadmaskers worden niet afgespeeld in Safari als uw document <canvas>-elementen bevat, zoals voor de component Overgangsgalerij, Afbeeldingseffect of Deeltjeseffecten.

Maskers in responsieve indelingen

Met mediaregels kunt u maskereigenschappen en animaties overschrijven voor specifieke formaatbereiken voor viewports. Voor afbeeldingsmaskers kunt u ook de bron overschrijven om een andere afbeelding te gebruiken. Voor kleurovergangsmaskers kunt u de kleurovergang wijzigen.

Opmerking: Als u de overschrijving voor een eigenschap voor een positie of formaat verwijdert, worden zowel de eigenschappen voor de positie (boven en links) als beide eigenschappen voor het formaat (breedte en hoogte) automatisch gereset. Voor clippadmaskers worden alle eigenschappen voor de positie en het formaat gereset.

Was dit nuttig?

Hoe kunnen we dit verbeteren?