Share
I denne opplæringen lærer vi å lage en fleksibel (responsiv) foldet papireffekt ved hjelp av CSS3-funksjoner som bakgrunnsgradienter og bokseskygger, noe som kan gi en kjekk bakgrunn til innholdsområdet på nettstedet ditt.
Accentsconagua
La oss starte med å lage en veldig enkel HTML-side. Vi bruker HTML5 fordi ... hvorfor ville du ikke?!
Fleksibel foldet papireffekt <
I hodet sørger vi for at vi bruker HTML5-doktypen, vi setter opp tittelen vår, vi kaller i stilarkene, vi bruker også visningsport-metakoden, slik at effekten vår vil være responsiv på mobil- og nettbrett. Endelig er det en polyfil for å få html5 elementer gjenkjent i eldre nettlesere, og det er også en løsning for CSS3 gradientene for IE som vi trenger senere i opplæringen.
Fleksibel foldet papireffekt
Oppnådd med en blanding av CSS3-gradienter og bokseskygger.
Kjæresten er dum og sitter, og er en avgjørende forfatter. Etiam sollicitudin sapien quis augue pellentesque pulvinar. Morbi ikke ligula eu justo posuere tincidunt sit amet id nulla. Foreløpig leser lacus, tristique på dictum ac, porta at magna. Phasellus er ikke noe, men det er ikke noe tidsmessig. Aliquam auctor posuere lacinia. Praesent eu risus dolor, en mollis leo. Alquam pharetra, risus vel rutrum volutpat.Aliquam auktor posuere lacinia. Praesent eu risus dolor, en mollis leo. Alquam pharetra, risus vel rutrum volutpat.
Aliquam auctor posuere lacinia. Praesent eu risus dolor, en mollis leo. Alquam pharetra, risus vel rutrum volutpat.
Nå, i hoveddelen av siden har vi en div-container som pakker inn siden og en annen som pakker inn "papiret". Innenfor denne div legger vi til en Merk hver gang vi vil ha en foldet seksjon i papiret. Det er to typer av disse seksjonene, så senere i CSS vil vi kunne skille mellom dem ved hjelp av "odd" og "even" nth-child selectors. På denne måten forblir vår HTML så semantisk som mulig uten overflødige klassenavn.
I disse avsnittene har jeg lagt til noe innhold; titler og noen plassholdertekst. Dette er en ganske vanlig vanlig sidestruktur, men vi har alt vi trenger for å lage den brettede papireffekten ved å gå videre til CSS.
I CSS skal vi lage effekten helt fra begynnelsen, uten bilder, bare for moro skyld.
* -moz-boks-størrelse: border-box; -webkit-boks-størrelse: border-box; boks-størrelse: border-box; kropp bakgrunn: # 777; # page-wrap margin: 0 auto; maksimal bredde: 980px; bredde: 100%; .paper margin: 30px auto; bakgrunn: # f5f4f0; maksimal bredde: 960px; bredde: 90%; -webkit-boks-skygge: 0 0 2px rgba (0, 0, 0, 0,7); -moz-boks-skygge: 0 0 2px rgba (0, 0, 0, 0,7); boks-skygge: 0 0 2px rgba (0, 0, 0, 0,7); h1 font: bold 50px "Georgia", serif; tekst-align: center; tekstskygge: 0 1px 0 #fff; margin-bunn: 20px; h2 font: fet 25px "georgia", serif; tekst-align: center;
Dette er de grunnleggende stilene for siden. Vi erklærer en fast maksimal bredde og en prosentandel for den faktiske bredden for å gjøre hele "papir" -elementet fleksibelt. Topptekstene er kun for eksempelet, og det er opp til dine kunstneriske ferdigheter for å endre dem i henhold til ditt design.
seksjon bredde: 100%; min høyde: 100px; stilling: relativ; polstring: 30px;
Her sørger vi for at hver seksjon strekker seg 100% over det overordnede elementet. Vi definerer en min-høyde, på den måten hvis du vil legge til tomme fold-seksjoner som vi har i eksemplet, vil de ikke være 0px høye. Vi erklærer da forholdet relativt, og vi legger til litt polstring, enda en gang for dette designet.
Merk: Det er veldig viktig å erklære stilling: relativ; i denne seksjonen; Vi trenger det for å plassere skyggeelementene som virkelig selger effekten.
.papirseksjon: nth-barn (jevn) bakgrunn: -moz-lineær-gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); bakgrunn: -webkit-gradient (lineær, venstre topp, høyre bunn, fargestopp (0%, # e9eae5), fargestopp (100%, rgba (244, 245, 240, 0))); bakgrunn: -webkit-lineær gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); bakgrunn: -o-lineær gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); bakgrunn: -ms-lineær gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); bakgrunn: lineær gradient (135deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e9eae5', endColorstr = "# 00f4f5f0", GradientType = 1);
Denne gangen er vi bare styling hvert jevnt delelement, så det betyr andre, fjerde, sjette osv. Vi bruker en gradient for å gi inntrykk av at en skygge blir kastet på papiret i 3D-rom. Denne gradienten er en av de viktigste delene av dette designet, og det er viktig å velge en farge som komplimenterer papiret.
I dette tilfellet var papiret # f5f4f0, og den grå av gradienten (som svinger diagonalt fra øverst til venstre til nederst til høyre) er # e9eae5 for helt gjennomsiktig.
Du kan bruke et antall verktøy for å generere gradienter for deg, for eksempel:
Med det gjort, la oss legge til noen skygger under papiret.
.papirseksjon: nth-barn (oddetall): før z-indeks: -1; posisjon: absolutt; innhold: ""; bunn: 0px; igjen: 10px; bredde: 50%; topp: 20px; bakgrunn: rgba (0, 0, 0, 0,7); -webkit-boks-skygge: -10px 20px 15px rgba (0, 0, 0, 0,5); -moz-boks-skygge: -10px 20px 15px rgba (0, 0, 0, 0,5); boks-skygge: -10px 20px 15px rgba (0, 0, 0, 0,5); -webkit-transform: roter (5deg); -moz-transform: roter (5deg); -o-transformer: roter (5deg); -ms-transformer: roter (5deg); transformer: roter (5deg); .bakseksjon: nth-barn (oddetall): etter z-indeks: -1; posisjon: absolutt; innhold: ""; bunn: 0px; høyre: 10px; venstre: auto; bredde: 50%; topp: 20px; bakgrunn: rgba (0, 0, 0, 0,7); -webkit-boks-skygge: 10px 20px 15px rgba (0, 0, 0, 0,5); -moz-box-skygge: 10px 20px 15px rgba (0, 0, 0, 0,5); boks-skygge: 10px 20px 15px rgba (0, 0, 0, 0,5); -webkit-transform: roter (-5deg); -moz-transform: roter (-5deg); -o-transformer: roter (-5deg); -ms-transformer: roter (-5deg); transformere: roter (-5deg);
Nå vet jeg at dette kan virke skremmende for folk som ikke er vant til å bruke CSS3-transformasjoner eller pseudo-elementer, men dette er faktisk ganske rett frem.
Her legger vi bare til skyggene for hver merkelig nummerert seksjon. Vi starter med å skyve det ekstra elementet bak papiret med z-indeksen. Det er her at vi erklærer en absolutt posisjon, og derfor måtte vi deklarere stillingen til relativ i foreldreelementet tidligere.
I utgangspunktet lager vi to svarte bokser som tar opp halvparten av bredden av vår foldseksjon (bredde: 50%;) vi gir dem boksskygger og deretter roterer dem med en mengde på 5 °. Disse ekstraelementene er for det meste skjulte, men er plassert på en slik måte at de gir illusjonen om dybde, som om papiret kom bort fra siden. Disse skyggene fremhever effekten skapt av gradienten tidligere.
Vi må nå gjenta en lignende prosess for våre jevnt nummererte seksjoner.
.papirseksjon: nth-barn (jevn): før z-indeks: -1; posisjon: absolutt; innhold: ""; bunn: 20px; igjen: 10px; bredde: 50%; topp: 0; bakgrunn: rgba (0, 0, 0, 0,7); -webkit-boks-skygge: -10px -25px 15px rgba (0, 0, 0, 0,5); -moz-boks-skygge: -10px -25px 15px rgba (0, 0, 0, 0,5); boks-skygge: -10px -25px 15px rgba (0, 0, 0, 0,5); -webkit-transform: roter (-5deg); -moz-transform: roter (-5deg); -o-transformer: roter (-5deg); -ms-transformer: roter (-5deg); transformere: roter (-5deg); .bakseksjon: nth-barn (jevn): etter z-indeks: -1; posisjon: absolutt; innhold: ""; bunn: 20px; høyre: 10px; venstre: auto; bredde: 50%; topp: 0; bakgrunn: rgba (0, 0, 0, 0,7); -webkit-boks-skygge: 10px -25px 15px rgba (0, 0, 0, 0,5); -moz-boks-skygge: 10px -25px 15px rgba (0, 0, 0, 0,5); boksskygge: 10px -25px 15px rgba (0, 0, 0, 0,5); -webkit-transform: roter (5deg); -moz-transform: roter (5deg); -o-transformer: roter (5deg); -ms-transformer: roter (5deg); transformer: roter (5deg);
Nøyaktig det samme som før, men for noen detaljer. Tydeligvis retter vi oss mot de like nummererte elementene og ikke de merkelige, og plasseringen er annerledes, slik at skyggen ligger øverst på boksen og roterer den andre veien, og dermed skaper en slags trekantet skygge nær punktet til hver " brette". Her:
Du har lagt merke til at vi har brukt prosentandeler for bredder og har satt opp et miljø for en responsiv design. Hvis du tar eksemplet som det er nå og endrer størrelsen på det, fungerer det ganske bra. Men det er ufullkommenheter. Disse kan løses med noen få rettelser som sparker inn på visse punkter.
@media bare skjerm og (maks bredde: 600px) h1 font-size: 25px; h2 font-size: smaller; .seksjon: nth-barn (jevn): etter høyre: 20px; .seksjon: nth-barn (merkelig): etter høyre: 20px; .bakseksjon: nth-barn (jevn): før venstre: 20px; .seksjon: nth-barn (merkelig): før venstre: 20px;
Så her har vi nettopp gjort våre overskrifter mindre (igjen bare for demoen) vi har også hatt å erstatte pseudo-elementene noensinne så lite fordi de viste på små visninger. Jeg valgte 600px som brytepunktet bare fordi det var da skyggene ble for store i mine øyne, igjen er dette helt åpent for at du kan endre i henhold til designen din.
Når vi bruker CSS3-gradienter, er nettleserkompatibilitet begrenset til moderne nettlesere og Internet Explorer 10. Våre gradienter har en backupfilteregenskap for å gi oss tilgang til IE9, slik at bare rabatter IE8 og tidligere. IE8 rekker faktisk opp på flere måter (våre CSS3 selectors, transformer regler og bokseskygger, så la oss bare glemme IE8!) Heldigvis er det en grasiøs nedbrytning og innholdet på siden er perfekt tilgjengelig:
Ikke glem at medieforespørsmålene dine også må inneholde bare søkeord, for å hindre at IE8 analyserer alt innholdet som standard.
Så der har du det! En fleksibel foldet papireffekt laget med CSS3-gradienter, bokseskygger og pseudoelementer. Jeg håper du har hatt denne opplæringen og forhåpentligvis lært noe nyttig av det. Gi meg beskjed i kommentarene jeg vil gjerne høre dine meninger.
