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


Slik oppretter du CSS-only Sticky Footer

Normalt trenger vi JavaScript for å utføre rulleffekter relatert til ulike brukerhandlinger på nettsider. Skriptet gjør jobben med å spore hvor langt opp eller ned rulling tar en side, og utløser en handling når en terskelhøyde er nådd.

Det er ikke særlig dårlig å bruke JavaScript for å rulle effekter. Faktisk er det mer kompliserte saker som er umulige å løse uten JavaScript . Men det er CSS hacks som kan erstatte disse skript til tider.

Dette innlegget kommer til å vise deg hvordan du lager bunntekster som viser effekter på sideskroll ved hjelp av CSS. Vi skal bruke to brukstilfeller for å demonstrere dette: en for hele siden (se demo) og en for individuelle sideelementer, for eksempel artikler.

Helside

Vi må opprette en bunntekst som vises under bunnen av siden mens brukeren ruller ned. Også når de ruller siden tilbake, må bunnteksten være skjult under siden igjen.

For å oppnå dette målet må vi først lage en bunntekst med fast posisjon nederst på skjermen.

1. Lag en fast bunntekst

La oss legge til litt innhold og en bunntekst til siden først. Jeg bruker HTML-kodene

og
for semantikk. Derimot,
fungerer også.

I min demo er det et flaggermusbilde som vises inne i bunnteksten for en ikke så spøkende effekt, men du kan velge hvilket som helst annet bilde du liker.

Fortsett å bla til du ser bunnteksten

Lorem ipsum dolor sit amet ...

kropp {font-family: Crimson Text; skriftstørrelse: 13pt; margin: 0; } bunntekst {bredde: 100%; høyde: 200px; posisjon: fast; bunn: 0; bakgrunnsfarge: # DD5632; }
2. Skjul fotfoten

Bruk z-index:-1 regelen til bunnteksten for å plassere den bak alle andre elementer på siden.

Farge begge og merker hvitt for å dekke bunnteksten .

 kropp, html {bakgrunnsfarge: #fff; } bunntekst {bredde: 100%; høyde: 200px; posisjon: fast; bunn: 0; bakgrunnsfarge: # DD5632; z-indeks: -1; } 
3. Juster bunnmarginen

Angi margin-bottom av tag som er høyde for bunnteksten (i mitt eksempel 200px).

På denne måten vil det være nok plass på bunnen for at bunnteksten skal være synlig når brukeren ruller nedover siden.

 kropp {høyde: 1000px; margin: 0; margin-bunn: 200px; } 

Det er det. Foten avslører effekten for en hel nettside er ferdig. Ta en titt på Codepen-demoen nedenfor.

Individuelle sideelementer

Denne teknikken kan brukes til et enkelt HTML-element (med en bunntekst) som er lang nok til en skikkelig sideskroll-effekt. Metoden er litt hacky, som det for øyeblikket ikke fungerer i Chrome og IE, men det har en anstendig nedgang.

1. Lag en lang artikkel

La oss først lage en lang artikkel med en bunntekst. For å fremme semantisk kode valgte jeg

og
.

Artikkel 1

Lorem ipsum dolor sit amet ...

Nedenfor kan du se grunnleggende styling av artikkelen og bunnteksten.

 artikkel {bredde: 500px; background-color: # FEF9F3; polstring: 20px 40px; } artikkel> bunntekst {høyde: 100px; bakgrunnsfarge: # FE0178; } kropp {font-family: aormorant garamond; } 

Min artikkel ser for øyeblikket ut som dette. Selvfølgelig kan du også bruke andre grunnleggende stilregler.

2. Gjør foten klistret

Den forrige bunnteksten ble løst, denne kommer til å være klebrig . Påfør position:sticky regel til bunnteksten, så den beveger seg innenfor grensen til artikkelen, men beholder fortsatt sin posisjon på skjermen mens brukeren ruller opp og ned.

 artikkel> bunntekst {høyde: 100px; bakgrunnsfarge: # FE0178; posisjon: -webkit-klebrig; stilling: klebrig bunn: 80px; } 

bottom:80px regelen løser posisjonen til bunnteksten 80px over bunnen av artikkelen .

Du kan justere verdien til din smak, siden den bestemmer punktet der fotfeltet begynner å vises eller forsvinne mens brukeren ruller ned eller oppover.

Gi samme verdi for bunnlinjen til artikkelen, slik at det er nok plass på bunnen for å avsløre den fulle bunnteksten.

 artikkel {bredde: 500px; background-color: # FEF9F3; polstring: 20px 40px; margin-bunn: 80px; } 
3. Legg til en delvis gjennomsiktig bakgrunn

Nå trenger vi en åpning neste bunnen av artikkelen der vi kan se den klissete bunnteksten som ruller ned og ned.

For å oppnå dette, må du erstatte background-color til artikkelen med et linjært gradientbakgrunnsbilde, som fra toppen av artikkelen til toppen av bunnteksten er farget med bakgrunnsfargen til artikkelen, og den gjenværende delen til bunnen er gjort gjennomsiktig .

 artikkel {bredde: 500px; polstring: 20px 40px; bakgrunnsbilde: lineær gradient (til bunn, # FEF9F3 kalk (100% - 120px), gjennomsiktig 0); margin-bunn: 80px; } 

Beregningen calc(100%-120px) CSS-funksjonen beregner hele høyden av artikkelen minus bunnteksten . I mitt eksempel er det 120px (100px for høyde og pluss 20px for polstring).

4. Sett fotfot tilbake

Til slutt, la oss plassere bunnteksten bak artikkelen ved hjelp av z-index: -1 CSS-regelen.

 artikkel> bunntekst {høyde: 100px; bakgrunnsfarge: # FE0178; posisjon: -webkit-klebrig; stilling: klebrig bunn: 80px; z-indeks: -1; } 

Og det er det, det enkelte sideelementet med på-scroll-avslørende effekten er gjort. Sjekk ut kodepennen nedenfor. Du kan også finne begge brukstilfeller på vår Github-side.

Skeuomorphic PSD til flat design med Skeuomorphism.it

Skeuomorphic PSD til flat design med Skeuomorphism.it

Så skeuomorphism er ute og flatt design er i, som er gamle nyheter, men hei, trender kan være ekte svingete og designere er nåde for å prøve å holde tritt. Hvis du har skeuomorphic design som du vil bli flatt, her er et verktøy som skal være en stor hjelp.Skeuomorphism.it er en gratis Photoshop-utvidelse, av Roy Barber som forvandler skeuomorphism-design til flat design med bare ett enkelt klikk. Hvis d

(Tekniske og design tips)

Slik bestemmer du på den beste måten å registrere dine ideer

Slik bestemmer du på den beste måten å registrere dine ideer

Ideer, ideer, ideer. Kreative fagfolk er fulle av dem. Det er mange ideer vi har hver dag som vi vet at vi kanskje aldri kommer til å følge med på, men vi vil gjerne registrere dem på en eller annen måte bare i tilfelle.Hver designer har sin egen, spesielle måte å holde styr på deres designideer. Men hv

(Tekniske og design tips)