Slik lager du skarpe kanter med CSS

I dette innlegget skal vi se på hvordan vi kan lage en vinklet kanteneffekt (horisontalt) på en nettside. I utgangspunktet ser det ut som noe slikt:

Å ha en litt vinklet kant bør gjøre webutformingen ser mindre stiv og kjedelig ut. For å gjøre dette trikset, bruker vi pseudoelementene ::before og ::after og CSS3 Transform .

Bruke pseudoelementer

Denne teknikken bruker pseudoelementene ::before og ::after å vinkle elementkanter. I dette eksemplet vil vi justere den nederste kanten.

 .block {height: 400px; bredde: 100%; stilling: relativ; bakgrunn: lineær gradient (til høyre, rgba (241, 231, 103, 1) 0%, rgba (254, 182, 69, 1) 100%); } .block :: etter {innhold: ''; bredde: 100%; høyde: 100%; posisjon: absolutt; bakgrunn: arv; z-indeks: -1; bunn: 0; transformasjons-opprinnelse: venstre bunn; transformere: skewY (3deg); } 

La oss ta opp igjen.

transform-origin spesifiserer koordinatene til elementet vi vil transformere. I eksemplet ovenfor spesifiserte vi left bottom som vil sette startkoordinatene nederst til venstre på blokken.

transform: skewY(3deg); gjør ::after blokk skrå eller vinkel på 3 grader. Siden vi angitt startkoordinatet som nederst til venstre, øker bunnen til høyre på blokken 3 grader. Hvis vi bytter transform-origin til right bottom og nederste venstre hjørne vil bli hevet 3 grader i stedet.

Du kan legge til en solid farget bakgrunn eller gradient for å se resultatet.

Gjør det enklere med Sass Mixin

For å gjøre dette lettere, har jeg opprettet en Sass mixin for å legge til de vinklede kanter, minus hodepine fra å håndtere kompleksiteten til stilregler. Med følgende mixin kan du raskt angi sidens øverst til venstre, øverst til høyre, nederst til venstre eller nederst til høyre - for å skje.

 @mixin vinkelkanten ($ pos-top: null, $ vinkel-topp: null, $ pos-btm: null, $ vinkel-btm: null) {bredde: 100%; stilling: relativ; bakgrunn: lineær gradient (til høyre, rgba (241, 231, 103, 1) 0%, rgba (254, 182, 69, 1) 100%); & :: før, & :: etter {innhold: ''; bredde: 100%; høyde: 100%; posisjon: absolutt; bakgrunn: arv; z-indeks: -1; overgang: lette alle .5s; } @if $ post-top {& :: før {@if $ post-top == 'topleft' {topp: 0; transform-opprinnelse: høyre topp; transformere: skewY ($ angle-top); } @if $ post-top == 'topright' {topp: 0; transformasjons-opprinnelse: venstre topp; transformere: skewY (- $ angle-top); }}} @if $ pos-btm {& :: etter {@if $ pos-btm == 'bottomleft' {bunn: 0; transform-opprinnelse: høyre bunn; transformere: skewY (- $ angle-btm); } @if $ pos-btm == 'bottomright' {bunn: 0; transformasjons-opprinnelse: venstre bunn; transformere: skewY ($ angle-btm); }}}} 

Det er fire variabler i mixin. De to første variablene, $pos-top og $angle-top, angir topp startkoordinat og grad . De to sistnevnte variablene angir koordinaten og graden for bunnsiden .

Hvis du fyller opp alle fire variablene kan du vinkle begge sider - topp og bunn - av elementet.

Bruk Sass @include syntaks for å sette mixin til et element. Du kan se eksempler nedenfor:

For å legge til skrå kant øverst til venstre :

 .block {@include vinkelkanten (topleft, 3deg); } 

For å legge til skrå kant på bunn-høyre side:

 .block {@include vinkelkanten (bottomright, 3deg); } 

For å legge til skrå kant øverst til venstre og nederst til høyre :

 .block {@include vinkelkanten (topleft, 3deg, bottomright, 3deg); } 

Nedenfor er demoen med mixins påført. Endre valgboksen for å bytte til en annen stil.

Det er det!

Begynnerveiledningen til CSS Object Model (CSSOM)

Det skjer mye mellom den første HTTP-forespørselen og den endelige levering av en nettside. Dataoverføring og nettleserens reneringsrørledning krever mange forskjellige teknologier, en av dem er CSS Object Model, eller CSSOM .CSS-objektmodellen tar CSS-koden, og gjør hver velger til en trestruktur for lettere parsing. Kan

(Tekniske og design tips)

Hva er Windows Services og hvordan du bruker dem

Har du noen gang lurt på hvor mange Windows-funksjoner som fungerer samtidig, selv om de ikke har et uhåndterbart grensesnitt? Vel, dette er Windows Services som fungerer i bakgrunnen for å utføre jobben sin uten å komme seg i veien.Windows finner automatisk oppdateringer, kontrollerer systemstabilitet, oppdaterer tid basert på gjeldende tidssone, registrerer hendelser og beskytter systemet mot ondsinnede trusler . Alle

(Tekniske og design tips)