no.hideout-lastation.com
Paradis For Designere Og Utviklere


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!

Holiday Email Marketing: 6 tips for å få det riktig

Holiday Email Marketing: 6 tips for å få det riktig

Siden e-post fortsatt er en av de ledende metodene for å nå ut til et stort flertall av forbrukere, har de fleste forbrukere til og med tilpasset seg til å se etter tilbud og kampanjer mens de sjekker e-posten deres. En nylig undersøkelse av Consumer Views of Email Marketing ved Bluehornet fra Digital River, har utgitt 2015-utgaven av undersøkelsen, som inkluderer nesten 2000 forbrukerinnsikt om hvordan de oppfatter og engasjerer eller ignorerer markedsføringsemails .Under

(Tekniske og design tips)

Best Time Lapse Apps for smarttelefonen

Best Time Lapse Apps for smarttelefonen

Skytingstidsløp Videoer er den beste måten å fange den fascinerende skjønnheten av sakte bevegelige ting rundt oss at våre øyne (eller tålmodighet) ikke kan holde tritt med. Takket være lav bildefrekvens og høy videohastighet kan du lage episke videoer av blomstrende blomster, solnedgang, bevegelige skyer og mange andre vakre scener.Interess

(Tekniske og design tips)