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!

Å håndtere online innholds tyveri (personlig erfaring)

(Personlig erfaring fra Darren Stevens) Online innholdstyveri er dessverre en vanlig hendelse i disse dager. Så snart et nettsted blir populært, er det bare et spørsmål om tid før noen reproduserer det og prøver å tjene penger. Man trenger bare tilgang til et RSS-feed og en Google AdSense-konto for å tjene penger på andres arbeid, og dessverre skjer dette altfor ofte.Verre, d

(Tekniske og design tips)

Avansert boks Styling med CSS Grid

CSS Grid Layout Module kan ikke bare løse en mammut av et layout problem, men også noen gode gamle mulish problemer vi har håndtert i lang tid, for eksempel styling en boks etikett .Mens det er en relativt enkel metode for å stile etiketten når den vises etter avmerkingsboksen, er det ikke så lett når etiketten vises før den .Kryssbo

(Tekniske og design tips)