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!

Bruke og stilere HTML5 Meter [Guide]

Hvis du er kjent med HTML-fremdriftslinjen, som viser hvor mye av en aktivitet som er utført, vil du oppdage at måleelementet ligner det - begge viser en nåværende verdi ut av en maksimumsverdi . Men i motsetning til fremdriftslinjen, må målerlinjen ikke brukes til å vise fremgang.Den brukes til å vise en statisk verdi i et bestemt område, for eksempel kan du angi lagringsplassen som brukes i en diskplass, ved å vise hvor mye lagringsplass er fylt og hvor mye det ikke er.Dessuten

(Tekniske og design tips)

Android Fragmentation: Historien så langt

Android-fragmentering blir ofte tatt opp som Achilles 'hæl av operativsystemet . Kritikere peker ofte på fragmentering som nøkkelfaktor i hvorfor Apples IOS er det bedre mobile operativsystemet, til tross for at 81 prosent av verdens smartphones kjører på en versjon av Android eller en annen. Fak

(Tekniske og design tips)