Hvordan få bakgrunnseffekten med styrt papir med CSS3

En veldig populær bakgrunnseffekt for websider er det college-styrte, tre-hulls-stansede papiret som studenter lager opp hvert år ved starten av et nytt skoleår. Vel, det er en måte å gjenskape den bakgrunnseffekten uten å bruke bilder og med bare ren CSS3-koding.

I denne korte demonstrasjonen vil jeg konsentrere meg om de nakne beinene for å få en bakgrunnsforet papireffekt, så vel som å inkludere en del av området som kan redigeres innhold for brukerne dine, ved å bruke CSS lineær gradient som bakgrunnsbilde. Det er mange ressurser for å etterligne den styrte og foret papireffekten med ren CSS; Jeg må imidlertid gi æren for inspirasjonen min til den anonyme gjesten på PasteBin som la ut redaktørens bokstavkode bare noen måneder tilbake.

HTML

Bare fem linjer med HTML-kode utgjør det vesentlige som inkluderer seksjonselementet med en klasse som tilsvarer papir, og innenfor seksjonen er to artikkelelementer. Den første artikkelen inneholder papirhodet, og den andre artikkelen er et redigerbart rom:

 Begynn å skrive inn innholdsredigerbart innhold her! 

CSS

Jeg begynner med å gi bakgrunnsstilen ved å bruke linjegradient, og jeg har listet opp alle leverandørprefikser også:

 kropp { 
 bakgrunn: -webkit-lineær gradient (topp, rgb (136, 199, 201) 58%, rgb (202, 232, 235) 100%); 
 bakgrunn: -moz-lineær gradient (topp, rgb (136, 199, 201) 58%, rgb (202, 232, 235) 100%); 
 bakgrunn: -ms-lineær gradient (topp, rgb (136, 199, 201) 58%, rgb (202, 232, 235) 100%); 
 bakgrunn: -o-lineær gradient (topp, rgb (136, 199, 201) 58%, rgb (202, 232, 235) 100%); 
 bakgrunn: lineær gradient (topp, rgb (136, 199, 201) 58%, rgb (202, 232, 235) 100%); 
 polstring: 3%; 
 høyde: 94%; 
 } 
Lineær-gradienten i bakgrunnen gir oss denne fine topp-down-gradienten som vist i figur B :

Neste er papirstilen som inkluderer skrift, bredde og høyde, margin satt til null, auto, polstring og en relativ posisjon. Vi angir også linjehøyde, kantlinje og en annen bakgrunnen lineær gradient brukes til å lage de lyseblå horisontale linjene. Papirstilen inneholder også en bakgrunnsstørrelse og en kantradius for de tre pixel avrundede hjørnene på siden.

 .papir { 
 font: normal 12px / 1, 5 "Lucida Grande", arial, sans-serif; 
 bredde: 50%; 
 høyde: 80%; 
 margin: 0 auto; 
 polstring: 6px 5px 4px 42px; 
 stilling: relativ; 
 farge: # 444; 
 linjehøyde: 20px; 
 grense: 1px solid # d2d2d2; 
 bakgrunn: #fff; 
 bakgrunn: -webkit-gradient (lineær, 0 0, 0 100%, fra (# d9eaf3), fargestopp (4%, #fff)) 0 4px; 
 bakgrunn: -webkit-lineær gradient (topp, # d9eaf3 0%, #fff 8%) 0 4px; 
 bakgrunn: -moz-lineær gradient (topp, # d9eaf3 0%, #fff 8%) 0 4px; 
 bakgrunn: -ms-lineær gradient (topp, # d9eaf3 0%, #fff 8%) 0 4px; 
 bakgrunn: -o-lineær gradient (topp, # d9eaf3 0%, #fff 8%) 0 4px; 
 bakgrunn: lineær gradient (topp, # d9eaf3 0%, #fff 8%) 0 4px; 
 -webkit-bakgrunnsstørrelse: 100% 20px; 
 -moz-bakgrunnsstørrelse: 100% 20px; 
 -ms-bakgrunn-størrelse: 100% 20px; 
 -o bakgrunnsstørrelse: 100% 20px; 
 bakgrunnsstørrelse: 100% 20px; 
 -webkit-border-radius: 3px; 
 -moz-border-radius: 3px; 
 border-radius: 3px; 
 -webkit-box-skygge: 0 1px 2px rgba (0, 0, 0, 0.07); 
 -moz-box-skygge: 0 1px 2px rgba (0, 0, 0, 0.07); 
 boksskygge: 0 1px 2px rgba (0, 0, 0, 0, 07); 
 bredde: 816px; 
 høyde: 1056px; 
 } 
Den styrte papireffekten vises i figur C nedenfor:

Deretter har vi papiret før, som setter venstre marg og dobbel vertikal linje på venstre side med innholdet og en absolutt posisjon med en pikselbredde på 4. Toppen er satt til null, venstre til 30 piksler, solid kant til 1 piksel, og linjen er satt til gjennomsiktig med en farge # efe4w4, som vist nedenfor.

 .papir :: før { 
 innhold: ''; 
 stilling: absolutt; 
 bredde: 4px; 
 topp: 0; 
 venstre: 30px; 
 nederst: 0; 
 kant: 1px solid; 
 kantfarge: gjennomsiktig # efe4e4; 
 } 
Den vertikale dobbeltforede venstre marg vises i figur D nedenfor:

Tekstområdet stiler angir at skjermen skal blokkeres med en bredde på 94 prosent, margen 0 og auto, som effektivt sentrerer det definerte området; andre egenskaper inkluderer polstring, høyde og en gjennomsiktig bakgrunn.

 textarea { 
 skjerm: blokkering; 
 bredde: 94%; 
 margin: 0 auto; 
 polstring: 3, 8% 3%; 
 grense: ingen; 
 disposisjon: ingen; 
 høyde: 94%; 
 bakgrunn: gjennomsiktig; 
 linjehøyde: 20px; 
 } 

Neste er koden som plasserer overskriftsdelen av papiret øverst, og er satt til en minimumshøyde på 124 piksler, bakgrunnsfarge på #FFF, en margin igjen til negative 42 piksler og en margin topp på negative 4 piksler som Vist under.

 .hode { 
 bakgrunnsfarge: #FFF; 
 min-høyde: 124px; 
 margin-left: -42px; 
 margin-topp: -4px; 
 } 
Det fullførte linjerte papiret med alle komponentene inkludert overskriftsdelen som viser øvre venstre side av papireffekten vises i figur E nedenfor.

HTML- og CSS-filene som brukes i denne demonstrasjonen er tilgjengelige for nedlasting. Har du brukt denne effekten? Jeg ville være nysgjerrig på å se hvordan denne effekten har blitt implementert på live nettsteder og applikasjoner. Del eksemplene nedenfor.

© Copyright 2021 | pepebotifarra.com