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
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)