Sådan får du den baggrundseffekt, der styres af papiret med CSS3

En meget populær baggrundseffekt for websider er det college-styrede, tre-hullede stempelpapir, som studerende lagerfører hvert år ved starten af ​​et nyt skoleår. Nå, der er en måde at genskabe den baggrundseffekt uden at bruge billeder og med bare ren CSS3-kodning.

I denne korte demonstration vil jeg koncentrere mig om de blotte knogler ved at få en baggrundsforet papireffekt samt inkludere en del af området som indhold redigerbart for dine brugere ved hjælp af CSS lineær gradient som baggrundsbillede. Der er snesevis af ressourcer til at emulere den styrede og foret papireffekt med ren CSS; Jeg må dog give æren for min inspiration til den anonyme gæst på PasteBin, der indsendte redaktørens bogmærke-kode bare for et par måneder tilbage.

HTML

Kun fem linjer med HTML-kode udgør det væsentlige, der inkluderer sektionselementet med en klasse, der er lig med papir, og inden for sektionen er to artikelelementer. Den første artikel inkluderer papirhovedet, og den anden artikel er et indholdsredigerbart rum:

 Begynd at skrive dit indholdsredigerbare indhold her! 

CSS

Jeg starter med at give baggrundstilen ved hjælp af linjegradient, og jeg har også angivet alle leverandørpræfikser:

 krop { 
 baggrund: -webkit-lineær gradient (top, rgb (136, 199, 201) 58%, rgb (202, 232, 235) 100%); 
 baggrund: -moz-lineær gradient (top, rgb (136, 199.201) 58%, rgb (202, 232, 235) 100%); 
 baggrund: -ms-lineær gradient (top, rgb (136, 199, 201) 58%, rgb (202, 232, 235) 100%); 
 baggrund: -o-lineær gradient (top, rgb (136, 199, 201) 58%, rgb (202, 232, 235) 100%); 
 baggrund: lineær gradient (top, rgb (136, 199, 201) 58%, rgb (202, 232, 235) 100%); 
 polstring: 3%; 
 højde: 94%; 
 } 
Lineær gradient i baggrunden giver os denne dejlige top-down gradient som vist i figur B :

Dernæst er papirformatet, der inkluderer font, bredde og højde, margen indstillet til nul, auto, polstring og en relativ position. Vi indstiller også linjehøjde, kant og en anden baggrunds lineær gradient bruges til at skabe de lyseblå vandrette linjer. Papirstilen indeholder også en baggrundsstørrelse og en kantradius for de tre pixel afrundede hjørner på siden.

 .papir { 
 font: normal 12px / 1, 5 "Lucida Grande", arial, sans-serif; 
 bredde: 50%; 
 højde: 80%; 
 margin: 0 auto; 
 polstring: 6px 5px 4px 42px; 
 position: relativ; 
 farve: # 444; 
 linjehøjde: 20px; 
 kant: 1px solid # d2d2d2; 
 baggrund: #fff; 
 baggrund: -webkit-gradient (lineær, 0 0, 0 100%, fra (# d9eaf3), farve-stop (4%, #fff)) 0 4px; 
 baggrund: -webkit-lineær gradient (top, # d9eaf3 0%, #fff 8%) 0 4px; 
 baggrund: -moz-lineær gradient (top, # d9eaf3 0%, #fff 8%) 0 4px; 
 baggrund: -ms-lineær gradient (top, # d9eaf3 0%, #fff 8%) 0 4px; 
 baggrund: -o-lineær gradient (top, # d9eaf3 0%, #fff 8%) 0 4px; 
 baggrund: lineær gradient (top, # d9eaf3 0%, #fff 8%) 0 4px; 
 -webkit-baggrund-størrelse: 100% 20px; 
 -moz-baggrund-størrelse: 100% 20px; 
 -ms-baggrund-størrelse: 100% 20px; 
 -o-baggrund-størrelse: 100% 20px; 
 baggrundstørrelse: 100% 20px; 
 -webkit-border-radius: 3px; 
 -moz-border-radius: 3px; 
 grænseradius: 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); 
 kasseskygge: 0 1px 2px rgba (0, 0, 0, 0, 07); 
 bredde: 816px; 
 højde: 1056px; 
 } 
Den styrede papireffekt vises i figur C nedenfor:

Dernæst har vi papiret før, der indstiller venstre margen og dobbelt lodret linje på venstre side med indholdet og en absolut position med en pixelbredde på 4. Toppen er indstillet til nul, venstre til 30 pixels, solid kant til 1 pixel, og linjen er indstillet til gennemsigtig med en farve # efe4w4, som vist nedenfor.

 .papir :: før { 
 indhold: ''; 
 position: absolut; 
 bredde: 4px; 
 top: 0; 
 venstre: 30px; 
 bund: 0; 
 kant: 1px fast; 
 kantfarve: gennemsigtig # efe4e4; 
 } 
Den lodrette dobbeltforede venstre margen vises i figur D nedenfor:

Tekstområdet stiler indstiller displayet til at blokere med en bredde på 94 procent, margen 0 og auto, som effektivt centrerer det definerede område; andre egenskaber inkluderer polstring, højde og en gennemsigtig baggrund.

 tekstarea { 
 display: blokering; 
 bredde: 94%; 
 margin: 0 auto; 
 polstring: 3, 8% 3%; 
 grænse: ingen; 
 omrids: ingen; 
 højde: 94%; 
 baggrund: gennemsigtig; 
 linjehøjde: 20px; 
 } 

Dernæst er koden, der placerer overskriftsafsnittet på papiret øverst og er indstillet til en minimumshøjde på 124 pixels, baggrundsfarve på #FFF, en margin tilbage til negative 42 pixels og en margin-top på negative 4 pixels som vist nedenfor.

 .hoved { 
 baggrundsfarve: #FFF; 
 min-højde: 124px; 
 margin-left: -42px; 
 margin-top: -4px; 
 } 
Det færdige linealpapir med alle komponenter inklusive overskriftssektionen, der viser den øverste venstre side af papireffekten, vises i figur E nedenfor.

HTML- og CSS-filer, der bruges i denne demonstration, kan downloades. Har du brugt denne effekt? Jeg ville være nysgerrig efter at se, hvordan denne effekt er implementeret på live-websteder og applikationer. Del dine eksempler nedenfor.

© Copyright 2020 | mobilegn.com