Share
In deze tutorial leren we om een flexibel (responsief) gevouwen papiereffect te creëren met CSS3-functies zoals achtergrondgradiënten en doosschaduwen, die een cool ogende achtergrond kunnen geven aan het inhoudsgebied van uw website.
Accentsconagua
Laten we beginnen met het maken van een eenvoudige HTML-pagina. We gebruiken HTML5 omdat ... waarom zou jij niet?!
Flexibel gevouwen papiereffect <
In de kop zorgen we ervoor dat we het HTML5-doctype gebruiken, we stellen onze titel in, we roepen onze stylesheets in, we gebruiken ook de viewport-metatag, zodat ons effect reageert op mobiele apparaten en tablets. Ten slotte is er een polyfill om html5-elementen herkend te krijgen in oudere browsers, en er is ook een oplossing voor CSS3-gradiënten voor IE die we later in de tutorial nodig zullen hebben.
Flexibel gevouwen papiereffect
Bereikt met een mix van CSS3-gradiënten en doosschaduwen.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin sapien quis augue pellentesque pulvinar. Morbi non ligula eu justo posuere tincidunt sit amet id nulla. Praesent lectus lacus, tristique bij dictum ac, porta bij magna. Phasellus est nunc, pulvinar non tempor a, condimentum vitae eros. Aliquam auctor posuere lacinia. Praesent eu risus dolor, een mollis leo. Aliquam pharetra, risus vel rutrum volutpat.Aliquam auctor posuere lacinia. Praesent eu risus dolor, een mollis leo. Aliquam pharetra, risus vel rutrum volutpat.
Aliquam auctor posuere lacinia. Praesent eu risus dolor, een mollis leo. Aliquam pharetra, risus vel rutrum volutpat.
Nu hebben we in het hoofdgedeelte van de pagina een div-container die de pagina omwikkelt en een andere die het "papier" omwikkelt. Binnen deze div voegen we een toe label elke keer dat we een gevouwen sectie in het papier willen. Er zijn twee soorten van deze secties, dus later in de CSS kunnen we onderscheid maken tussen hen met behulp van de 'oneven' en 'even' n-de-kind selectors. Op deze manier blijft onze HTML zo semantisch mogelijk zonder overbodige klassenamen.
In deze secties heb ik wat inhoud toegevoegd; titels en een aantal tijdelijke tekst. Dit is een vrij normale paginastructuur, maar we hebben alles wat we nodig hebben om het gevouwen papiereffect te creëren door verder te gaan naar de CSS.
In de CSS gaan we het effect volledig vanuit het niets creëren, zonder afbeeldingen, gewoon voor de lol.
* -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; body background: # 777; # page-wrap margin: 0 auto; maximale breedte: 980 px; breedte: 100%; .paper margin: 30px auto; achtergrond: # f5f4f0; maximale breedte: 960 px; breedte: 90%; -webkit-box-shadow: 0 0 2px rgba (0, 0, 0, 0.7); -moz-box-shadow: 0 0 2px rgba (0, 0, 0, 0.7); vakschaduw: 0 0 2px rgba (0, 0, 0, 0.7); h1 font: bold 50px "Georgia", serif; text-align: center; text-shadow: 0 1px 0 #fff; margin-bottom: 20px; h2 font: bold 25px "Georgia", serif; text-align: center;
Dit zijn de basisstijlen voor de pagina. We verklaren een vaste maximale breedte en een percentage voor de werkelijke breedte om het hele "papieren" element flexibel te maken. De kopstijlen zijn natuurlijk alleen voor het voorbeeld, het is aan je artistieke vaardigheden om ze te veranderen op basis van je ontwerp.
sectie breedte: 100%; minimale hoogte: 100 px; positie: relatief; opvulling: 30px;
Hier zorgen we ervoor dat elke sectie 100% over het bovenliggende element strekt. We definiëren een minimale hoogte, op die manier, als u lege vouwsecties wilt toevoegen zoals in het voorbeeld, zullen ze niet 0px hoog zijn. Vervolgens verklaren we de relatieve positie en voegen we een beetje opvulling toe, wederom alleen voor dit ontwerp.
Notitie: Het is heel belangrijk om te verklaren positie: relatief; in deze sectie; we hebben het nodig om de schaduwelementen te plaatsen die het effect echt verkopen.
.papiersectie: n-de-kind (even) achtergrond: -moz-lineaire gradiënt (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); achtergrond: -webkit-gradiënt (lineair, linker boven, rechter onder, kleur-stop (0%, # e9eae5), kleur-stop (100%, rgba (244, 245, 240, 0))); achtergrond: -webkit-lineair-gradiënt (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); achtergrond: -o-lineaire gradiënt (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); achtergrond: -ms-lineaire gradiënt (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); achtergrond: lineaire gradiënt (135 graden, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e9eae5', endColorstr = "# 00f4f5f0", GradientType = 1);
Deze keer stylen we alleen elk even sectie-element, dus dat betekent het tweede, vierde, zesde enz. We passen een verloop toe om de indruk te wekken dat er een schaduw op het papier in de 3D-ruimte wordt geworpen. Dit verloop is een van de meest essentiële onderdelen van dit ontwerp en het is belangrijk om een kleur te kiezen die het papier complimenteert.
In dit geval was het papier # f5f4f0 en dus is het grijs van het verloop (dat diagonaal overloopt van linksboven naar rechtsonder) # e9eae5 volledig transparant.
U kunt een aantal hulpmiddelen gebruiken om uw verlopen voor u te genereren, bijvoorbeeld:
Als dat klaar is, laten we nu wat schaduwen toevoegen onder het papier.
.papiersectie: nth-child (oneven): before z-index: -1; positie: absoluut; inhoud: ""; onderkant: 0px; links: 10px; breedte: 50%; top: 20px; achtergrond: 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); -webkit-transform: roteer (5deg); -moz-transform: roteer (5 graden); -o-transform: roteer (5 graden); -ms-transformatie: roteren (5 graden); transformeren: roteren (5 graden); .paper sectie: nth-child (oneven): after z-index: -1; positie: absoluut; inhoud: ""; onderkant: 0px; rechts: 10px; links: auto; breedte: 50%; top: 20px; achtergrond: 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); vakschaduw: 10px 20px 15px rgba (0, 0, 0, 0,5); -webkit-transform: roteren (-5deg); -moz-transform: roteer (-5deg); -o-transform: roteer (-5deg); -ms-transform: roteer (-5deg); transformeren: roteren (-5deg);
Nu weet ik dat dit misschien intimiderend lijkt voor mensen die niet gewend zijn om CSS3-transformaties of pseudo-elementen te gebruiken, maar dit is eigenlijk vrij eenvoudig.
Hier voegen we alleen de schaduwen toe voor elke oneven genummerde sectie. We beginnen met het duwen van het extra element achter het papier met de z-index. Het is hier dat we een absolute positie aangeven. Daarom moesten we eerder de positie ten opzichte van het bovenliggende element aangeven.
Kortom, we maken twee zwarte dozen die de helft van de breedte van onze vouwsectie innemen (breedte: 50%;) we geven ze doosschaduwen en roteren ze daarna met een hoeveelheid van 5 °. Deze extra elementen zijn meestal verborgen, maar zijn zo geplaatst dat ze de illusie van diepte geven, alsof het papier uit de buurt van de pagina komt. Deze schaduwen accentueren het effect dat eerder door het verloop is gemaakt.
We moeten nu een soortgelijk proces herhalen voor onze gelijk genummerde secties.
.papiersectie: nth-child (even): before z-index: -1; positie: absoluut; inhoud: ""; onder: 20px; links: 10px; breedte: 50%; boven: 0; achtergrond: 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: roteren (-5deg); -moz-transform: roteer (-5deg); -o-transform: roteer (-5deg); -ms-transform: roteer (-5deg); transformeren: roteren (-5deg); .paper sectie: nth-child (even): after z-index: -1; positie: absoluut; inhoud: ""; onder: 20px; rechts: 10px; links: auto; breedte: 50%; boven: 0; achtergrond: 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); vakschaduw: 10px -25px 15px rgba (0, 0, 0, 0,5); -webkit-transform: roteer (5deg); -moz-transform: roteer (5 graden); -o-transform: roteer (5 graden); -ms-transformatie: roteren (5 graden); transformeren: roteren (5 graden);
Precies hetzelfde als eerder, maar voor een paar details. Uiteraard richten we ons op de even genummerde elementen en niet op de oneven, en de positionering is anders, dus de schaduw bevindt zich bovenaan de doos en draait de andere kant op, waardoor er een soort driehoekige schaduw ontstaat nabij het punt van elke " vouwen". Hier:
U hebt gemerkt dat we percentages hebben gebruikt voor breedten en een omgeving hebben opgezet voor een responsief ontwerp. Als je het voorbeeld neemt zoals het nu is en het aanpast, werkt het best goed. Maar er zijn onvolkomenheden. Deze kunnen worden opgelost met een paar correcties die op bepaalde punten worden geactiveerd.
@media alleen scherm en (max. breedte: 600px) h1 font-size: 25px; h2 font-size: smaller; .paper sectie: nth-child (even): after right: 20px; .paper sectie: nth-child (oneven): after right: 20px; .paper sectie: nth-child (even): before left: 20px; .paper sectie: nth-child (oneven): before left: 20px;
Dus hier hebben we zojuist onze kopjes kleiner gemaakt (wederom alleen voor de demo), we hebben ook de pseudo-elementen enigszins moeten vervangen omdat ze bij kleine viewports werden getoond. Ik koos 600px als het breekpunt puur omdat toen de schaduwen te groot werden in mijn ogen, opnieuw is dit volledig open voor jou om te veranderen volgens jouw ontwerp.
Omdat we CSS3-gradiënten gebruiken, is de browsercompatibiliteit beperkt tot moderne browsers en Internet Explorer 10. Onze verlopen hebben een reservefiltereigenschap om ons toegang te geven tot IE9, zodat alleen IE8 en eerdere kortingen worden geboden. IE8 loopt eigenlijk op verschillende manieren omhoog (onze CSS3-selectors, transformatieregels en doosschaduwen, dus laten we IE8 helemaal vergeten!) Gelukkig is het een sierlijke degradatie en is de inhoud van de pagina perfect toegankelijk:
Vergeet niet dat uw mediaquery's ook de enkel en alleen zoekwoord, om te voorkomen dat IE8 standaard al hun inhoud parseert.
Dus daar heb je het! Een flexibel gevouwen papiereffect gemaakt met CSS3-verlopen, doosschaduwen en pseudo-elementen. Ik hoop dat je deze tutorial leuk vond en hopelijk er iets nuttigs van geleerd hebt. Laat het me weten in de comments, ik zou graag je mening horen.
