skabe en fleksibel, foldet papir virkning med css3,,,, i denne forelæsning lærer vi at skabe en fleksibel (responderende) foldet papir virkning ved hjælp af css3 karakteristika som baggrund stigninger og rubrik skygger, som kan give et sejt baggrund for indholdet af deres websted.,,,, trin 1: oprettelse af, < head >,, lad os starte med et meget grundlæggende html side.vi bruger html5, fordi...hvorfor ville du ikke?!, <!doctype html > < http: //lang = ", en" > < head > < meta - charset = "utf - 8" /> < afsnit > fleksible foldet papir virkning < /afsnit > < forbindelse rel = "stylesheet" type = "tekst /css" href = "css /nulstillet. css" /> < forbindelse rel = "stylesheet" type = "tekst /css" href = "css /stil. css" /> < meta - navn = "viewport" indhold = "bredde = anordning bredde, oprindelige omfang = 1, 0" > <!- hvis han] > < manuskript src = "http: //html5shiv. googlecode. kom /svn /bagagerum /html5. er" > < /manuskript > <![endif] - > < <!- hvis gte, dvs. 9] > < stil type = "tekst /css" >. gradient (filter: ingen;} < /stil > <![endif] - > < /head > i hovedet, vi er sikre på, at vi bruger html5 doctype, sætter vi vores titel, som vi i vores stylesheets, har vi også brug viewport meta - - så vores virkning vil være lydhøre over for mobile og tablet - udstyr.endelig er der en polyfill html5 elementer for at få anerkendt i ældre browsere, og der er også en løsning på css3 stigninger for irland, som vi får brug for senere i tutor.,, trin 2: oprettelse, < krop >,, < krop > < div. id = "s pakke" > < div klasse = "dokument" > < afsnit > < h1 > fleksible foldet papir virkning < /h1 > < den højtstående repræsentant /> < h2 > opnået med en blanding af css3 stigninger og rubrik skygger. < /h2 > < /afsnit > < afsnit > < p > lorem ipsum dolor sidde amet, consectetur adipiscing elit.etiam sollicitudin sapien quis augue pellentesque pulvinar.morbi ikke - ligula eu justo posuere tincidunt sidde amet id nulla.praesent lectus lacus, tristique på dictum ac porta i magna.phasellus est nunc, pulvinar ikke midlertidigt, condimentum vitae eros.aliquam auctor posuere lacinia.praesent eu risus dolor, en mollis leo.aliquam pharetra, risus vel rutrum volutpat. aliquam auctor posuere lacinia.praesent eu risus dolor, en mollis leo.aliquam pharetra, risus vel rutrum volutpat. < br /> < br /> aliquam auctor posuere lacinia.praesent eu risus dolor, en mollis leo.aliquam pharetra, risus vel rutrum volutpat. < /p > < /afsnit > < afsnit > < /afsnit > < afsnit > < /afsnit > < /div > <. /div > <!- ende side wrap - > < /organ > < /html > nu i den vigtigste del af side har vi en div beholder indpakning af side og en pakke "dokument".i denne div. vi giver, < afsnit >, tag, hver gang vi ønsker et foldet afsnit i avisen.der er to typer af disse afdelinger, senere i css vil vi være i stand til at skelne mellem dem med "underlig" og "endnu" n 'te barn udvælgere.den måde, vores html bliver som semantisk som muligt uden overflødige klasse navne. i disse afsnit, jeg har tilføjet nogle indhold; afsnit og en indikation af en art tekst.det er en temmelig normal almindelig side struktur, men vi har alt, vi behøver for at skabe de foldet papir virkning ved at flytte til css.,, trin 3: - den samlede side, i forskning, vi skal skabe, helt fra bunden, ingen billeder. bare for sjov., * {- - rubrik størrelsessortering: grænse boks. - webkit rubrik størrelsessortering: grænse boks; rubrik størrelsessortering: grænse boks} organ {baggrund:̉}&#side pakke (margen: 0 auto; max bredde: 980px; bredde: 100%}. papir (margen: 30px auto; baggrund:&#f5f4f0; max bredde: 960px; bredde: 90%; - webkit rubrik skygge: 0 0 2px rgba (0, 0 0, 7); - moz rubrik skygge: 0 0 2px rgba (0, 0 0, 7); rubrik skygge: 0 0 2px rgba (0, 0 0, 7)} h1 {skrifttype: dristige 50px »georgien«, serif; tekst tilpasse: center; tekst skygge: 0 1px 0&#fff; margen nederst: 20px;} h2 (font: dristige 25px »georgien«, serif; tekst tilpasse: center;}, er disse den grundlæggende former for side.vi erklærer en fast max bredde og procentsatsen for den faktiske bredde for at gøre det hele "dokument" element af fleksibilitet.overskriften stilarter er kun for eksempel, det er klart, at det er op til deres kunstneriske evner til at ændre dem i henhold til dit design.,, trin 4: - begge gange afsnit, afsnit (bredde: 100%; min højde: 100px. position: relativ; polstring: 30px;}, her skal vi sørge for, at hvert afsnit strækker sig 100% i moderselskabet element.vi definerer en min højde, så hvis du vil tilføje tomme gange dele, som vi har i det eksempel, de vil ikke være 0px høj.We then declare the position relative and we add a bit of padding, once again only for this design.,,Note:, It's very important to declare ,position: relative;, in this section; we need it to place the shadow elements which really sell the effect., , Step 4: Adding the Gradient, .paper section:nth-child(even) { background: -moz-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #e9eae5), color-stop(100%, rgba(244, 245, 240, 0))); background: -webkit-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%); background: -o-linear-gradient(-45deg, #e9eae5 0%, rgba(244, 245, 240, 0) 100%); background: -ms-linear-gradient (- 45deg,&#e9eae5 0%, rgba (244 245, 240, 0) 100%); baggrund: lineær gradient (135deg,&#e9eae5 0%, rgba (244 245, 240, 0) 100%); filter: progid: dximagetransform. microsoft. hældning (startcolorstr =&#e9eae5, endcolorstr =�f4f5f0, gradienttype = 1)), og denne gang er vi kun ser enhver selv afsnit element, så betyder det andet, fjerde, sjette osv. vi er anvendelse af en gradient giver indtryk af at kaste en skygge på papir i 3d plads.denne stigning er en af de væsentligste dele af denne konstruktions - og det er vigtigt at vælge en farve, der giver avisen., i dette tilfælde var&#f5f4f0 og så den grå af hældning (som forsvinder diagonalt fra øverst til venstre til det nederste højre) er&#e9eae5 til fuldstændig gennemsigtig, du kan bruge. antal redskaber til at skabe din stigninger for dig, for eksempel:,, colorzilla damian galarza er css3 gradient generator, gradientapp for os x,, løntrin 5: forøgelse af skyggerne, med det, lad os nu tilføje nogle skygger i avisen.,. papir afsnit: n - barn (sær): før {z-index: - 1. position: absolut; indhold: "" bunden: 0px; tilbage: 10px; bredde: 50%; top: 20px; baggrund: rgba (0, 0 0, 7);-webkit-box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5); box-shadow: -10px 20px 15px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } .paper section:nth-child(odd):after { z-index: -1; position: absolute; content: ""; bottom: 0px; right: 10px; left: auto; width: 50%; top: 20px; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5); box-shadow: 10px 20px 15px rgba(0, 0, 0, 0.5); -webkdet forvandler: roter (- 5deg); - - ændre: roter (- 5deg); - o-transform: roter (- 5deg); - ms omdanne: roter (- 5deg) og omdanne: roter (- 5deg)}, nu ved jeg, det kan virke afskrækkende på folk, der ikke er vant til at bruge css3 transformeringer eller pseudo - elementer, men det er faktisk ganske ligetil. her skal vi tilføje, at den skygger for hver ulige nummererede afsnit.vi begynder ved at skubbe den ekstra faktor bag papir med z-index.det er her, at vi erklærer en holdning af absolut, og det er derfor, vi havde brug for at erklære den holdning, at relativ i moderselskabets element tidligere. vi er to sorte bokse, der tager halvdelen af bredden af vores folder afsnit (bredde: 50%) er vi så giver kasse skygger og efter at roterende dem med et beløb på 5 °.disse ekstra elementer, for det meste er skjult, men er anbragt på en sådan måde, at de giver indtryk af dybde, som, hvis de var på vej væk fra den side.These shadows accentuate the effect created by the gradient earlier., , Step 6: Adding the Final Shadows,We now need to repeat a similar process for our evenly numbered sections., .paper section:nth-child(even):before { z-index: -1; position: absolute; content: ""; bottom: 20px; left: 10px; width: 50%; top: 0; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5); box-shadow: -10px -25px 15px rgba(0, 0, 0, 0.5); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .papir afsnit: n - barn (endnu): efter {z-index: - 1. position: absolut; indhold: "" bunden: 20px; ret: 10px; tilbage: auto; bredde: 50%; top: 0; baggrund: rgba (0, 0 0, 7); - webkit rubrik skygge. 10px - 25px 15px rgba (0, 0 0, 0, 5); - moz rubrik skygge: 10px - 25px 15px rgba (0, 0 0, 0, 5); rubrik skygge: 10px - 25px 15px rgba (0, 0 0, 0, 5); - webkit omdanne: roter (5deg); - - omdanne: roter (5deg); - o-transform: roter (5deg); - ms omdanne: roter (5deg) og omdanne: roter (5deg)}, præcis det samme som før, men for et par detaljer.det er klart, at vi er ude lige numre elementer og ikke den mærkelige og placering er forskellige, så skyggen ligger i toppen af kassen og vendte den anden vej, således at skabe en form for tresidet skygge i punkt af alle "folder".her:,, trin 7: at tilføje nogle medier, har du lagt mærke til, at vi har brugt procentsatser for bredder og har oprettet et miljø for a - responsive design.hvis du tager det eksempel, som den er nu, og resize det ned, det virker helt fint.men der er mangler.disse kan løses med et par korrektioner, at sparke på visse punkter, @ medier kun skærm og max bredde: 600px) (h1 (skriftstørrelse: 25px;} h2 (skriftstørrelse: mindre;}. papir, afsnit: n - barn (endnu): efter {ret: 20px;}. papir. - n 'te barn (sær): efter {ret: 20px;}. papir, afsnit: n - barn (endnu): før {tilbage: 20px;}. papir, afsnit: n - barn (sær): før {tilbage: 20px;}}, så vi har gjort vores positioner mindre (igen bare for') har vi også nødt til at erstatte pseudo - elementer, lige så let, fordi de var små viewports.jeg valgte 600px som vendepunktet, udelukkende fordi det er da skyggerne blev for stor i mine øjne, at dette igen er fuldstændig åben for, at du skifter i henhold til dit design.,, om forenelighed, som vi bruger css3 stigninger, browser kompatibilitet er begrænset til moderne browsere og internet explorer 10.vores stigninger har en backup - filter ejendom, til at give os adgang til ie9, således at kun rabatter ie8 og tidligere.ie8 faktisk rejser op på en række forskellige måder (vores css3 udvælgere, gøre regler og rubrik skygger, så lad os glemme alt om ie8 helt!gudskelov, det er en stilfuld nedbrydning og indholdet af den side er fuldt tilgængelige:,,, ie8, glem ikke, at deres medier, skal også indeholde det, kun nøgleord for at forhindre, at ie8 fra parsing alle deres indhold ved misligholdelse.,, konklusion, så der har du det!en fleksibel foldet papir virkning, der er skabt med css3 stigninger, rubrik skygger og pseudo - elementer.jeg håber du har nydt denne forelæsning, og forhåbentlig har lært noget nyttigt fra det.lad mig vide, om de bemærkninger, jeg ville elske at høre deres mening.
