Slik bruker du CSS klipp og maskeegenskaper

De ofte brukte utklipps- og maskeringshandlingene som grafiske designere har brukt i årevis i programvare og programmer for redigering av bilder og bilder, som ble brukt på PNG-, PSD- eller SVG-filer, kan også brukes ved å bruke ren CSS, og dette innlegget vil undersøke historien til CSS-klippegenskapen sammen med en kort demonstrasjon av eiendommen i aksjon. Jeg vil også gjennomgå CSS -klippebanen og CSS -klippmaskeegenskapene . Hver beskrivelse vil inneholde syntaks for bruk sammen med gjeldende nettleserstøtte for å gi deg et bedre inntrykk av hva som kan implementeres i webutviklingsmiljøene og kundekravene. Deretter vil jeg pakke opp med flere ekstra ressurser for lesing og demonstrasjoner som fremhever klipp-, klipp-banen og klipp-maskeringsegenskapene.

Original spesifikasjon for CSS Clip

CSS2.1-spesifikasjonen for visuelle effekter inkluderer klippegenskapen, som kom ut for en tid tilbake, og var begrenset til en rektangulær form definert av forskyvninger fra kanten av esken med avstander for topp, høyre, bunn og venstre. I eksemplet med kodebiten nedenfor fungerer den eneste gyldige verdien for et absolutt plassert element med følgende syntaks:

 høyre (øverst, høyre, nederst, venstre). 
 Og eksemplet på CSS-kodebiten nedenfor: 
 img { 
 stilling: absolutt; 
 klipp: rett (40px, 520px, 400px, 80px); 
 } 
Legg merke til at bildeposisjonen er satt til absolutt; Merk også at både topp- og bunnverdiene er forskyvninger fra øverste kant og ikke henholdsvis fra øverste og nedre kant. Grand Canyon-eksemplet nedenfor viser "før" -bildet i figur B, og deretter etter at klippegenskapen er brukt i figur C :

Figur B

Før bilde uten klipping brukt

Figur C

Etter bilde med klipping påført
Rutenettlinjene nedenfor viser hvordan klippeffekten blir brukt i det originale bildet som vist i figur D nedenfor:

Figur D

Når du ser utklippet i handling, er det lettere å forstå logikken bak hvordan elementet blir klippet ut. Det vanskeligste konseptet å pakke hodet på er å få klippet til bunn og høyre der du vil at elementet skal klippes. Naturligvis ville du tenkt på å klippe høyre fra høyre kant og bunn fra underkant, men det er motsatt, du klemmer bunnen når det gjelder overkanten og høyre når den gjelder venstre kant som illustrert over . Hvis du kan tenke i form av en fallende foss, kan du ta tak i konseptet mye enklere, med en topp ned og deretter fra venstre til høyre-modell.

Grunnleggende nettleserstøtte for CSS-klippegenskapen er begrenset i IE6 og IE7; En løsning for IE krever imidlertid at du skiller verdiene med hvitt mellomrom i stedet for de kommaseparerte verdiene.

Clip-path-egenskap

W3C Scalable Vector Graphics (SVG) 1.1 (Second Edition) -spesifikasjonen sier at den kan inneholde ethvert HTML-element inkludert sti-elementer, tekstelementer, grunnleggende former eller brukselementer, og SVG-containerelementer også. Hvis et brukselement er et barn av et element, må det direkte referere til sti, tekst eller grunnleggende formelementer. Elementet kan også kombineres med flere grafiske elementer for å lage et sammenslått enkeltklippende område.

Syntaks for klippebane er representert nedenfor for former, URLer eller ingen:

 klipp-sti: | | ingen 

Grunnformene og grafiske elementene i SVG er listet opp nedenfor og kan brukes til å definere et bestemt klippområde for alle syntakseksempler vist nedenfor; x refererer til toppinnstillingen og y henviser til venstreinnstilling.

Rektangel

Definerer et rektangel med et opprinnelse uttrykt med x- og y-koordinater, og en størrelse uttrykt ved bredde og høyde i piksler. Valgfrie argumenter rx og ry definerer "avrundede hjørner" i horisontal og vertikal retning, syntaks vises under.

 rektangel (,,, ,, ) 

Sirkel

Definerer en sirkel var et midtpunkt uttrykt av cx og xy koordinater, og en radius r, syntaksen vises nedenfor.

 sirkel( 

ellipse

Definerer en sirkel med et midtpunkt uttrykt av cx og cy, og to radier rx og ry for de horisontale og vertikale radiusbanene, syntaksen vises nedenfor.

 ellipse ( 

polygon

Definerer en polygon basert på punktlisten uttrykt i piksler for x1, y1, x2, y2 og på xn, yn .

 polygon (,, ..., ) 

Grunnleggende nettleserstøtte for klipp-baneegenskapen inkluderer Chrome 1, Firefox 1.5, IE 9, Opera 9 og Safari 3.0.4.

Klippmaskeegenskap

W3C Masking-spesifikasjonen sier at den gir en andre metode for delvis eller fullstendig å skjule deler av visuelle elementer ved maskering. Spesifikasjonen beskriver også hvilke typer masker som inneholder seksten varianter av egenskapen for lagdelte masker og boks-bilder-masker, og de inkluderer: maske, maske-bilde, maske-repetisjon, maskeposisjon, maske-klipp, maske-opprinnelse, og masketype. Egenskaper med maske-boks-bildet gjør at et bilde kan deles inn i ni fliser med fire hjørner, fire kanter og en enkel midtdel. Hver flis kan skiver, skaleres og / eller strekkes til enhver kombinasjon av form eller størrelse som passer til det maskerte området. Det mest nyttige aspektet ved denne egenskapen lar deg endre grenser og kanter på elementer. Flere av egenskapene til boks-masken inkluderer maske-boks-bilde, maske-boks-bilde-kilde og mask-boks-bilde-skive.

Grunnleggende nettleserstøtte for klippmaskeegenskapen er for øyeblikket begrenset i Chrome 17+ og Safari 5.1+.

Videre lesing og eksempler

For flere eksempler og informasjon om implementering av SVG-klipping- og maskeringsegenskaper, kan du sjekke ut artikkelen, "Clipping and Masking", fra SVG Essentials-wiki av OReilly. For et annet flott eksempel på klipp-stien-egenskapen i aksjon, kan du se SVG clipPath-demoen av Sawyer Hollenshead. Flere eksempler som omfavner flere prinsipper for klipping, klippebane og maskeringsegenskaper blir brakt fram av Dirk Schulzes artikkel om CSS Masking fra HTML5 Rocks Tutorials.

© Copyright 2020 | mobilegn.com