Share
In diesem Lernprogramm erfahren Sie, wie Sie mit CSS3-Funktionen wie Hintergrundverläufen und Box-Shadows einen flexiblen (reaktionsfähigen) gefalteten Papiereffekt erstellen, der dem Inhaltsbereich Ihrer Website einen coolen Hintergrund verleiht.
Accentsconagua
Beginnen wir mit einer sehr einfachen HTML-Seite. Wir verwenden HTML5, weil… warum nicht??!
Flexibler gefalteter Papiereffekt <
Im Kopf stellen wir sicher, dass wir den HTML5-Doctype verwenden, wir setzen unseren Titel, wir rufen in unseren Stylesheets auf, wir verwenden auch das Viewport-Meta-Tag, damit unser Effekt auf Mobil- und Tablet-Geräten anspricht. Schließlich gibt es noch eine Polyfill, um HTML5-Elemente in älteren Browsern zu erkennen, und es gibt auch eine Korrektur für CSS3-Gradienten für IE, die wir später im Tutorial benötigen.
Flexibler gefalteter Papiereffekt
Erreicht mit einer Mischung aus CSS3-Gradienten und Box-Shadows.
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Etiam sollicitudin sapien quis augue pellentesque pulvinar. Morbi non ligula ist der beste Ort, an dem Sie sich entspannen können. Lectus lacus präsent, tristique bei dictum ac, porta bei magna. Phasellus est nunc, pulvinar non tempor a, condimentum vitae eros. Aliquam auctor posuere lacinia. Praesent eu risus dolor, ein Mollis Leo. Aliquam Pharetra, Risus vel rutrum volutpat.Aliquam auctor posuere lacinia. Praesent eu risus dolor, ein Mollis Leo. Aliquam Pharetra, Risus Vel Rutrum Volutpat.
Aliquam auctor posuere lacinia. Praesent eu risus dolor, ein Mollis Leo. Aliquam Pharetra, Risus Vel Rutrum Volutpat.
Jetzt haben wir im Hauptbereich der Seite einen div-Container, der die Seite einwickelt, und einen weiteren, der das "Papier" einwickelt. In diesem Div fügen wir ein Markieren Sie jedes Mal, wenn wir einen gefalteten Abschnitt in der Zeitung haben möchten. Es gibt zwei Arten dieser Abschnitte, so dass wir später im CSS in der Lage sind, sie mit den 'ungeraden' und 'geraden' n-ten Selektoren zu unterscheiden. Auf diese Weise bleibt unser HTML so semantisch wie möglich, ohne überflüssige Klassennamen.
In diesen Abschnitten habe ich einige Inhalte hinzugefügt. Titel und etwas Platzhaltertext. Dies ist eine ziemlich normale, einfache Seitenstruktur, aber wir haben alles, was wir brauchen, um den Effekt des gefalteten Papiers zu erzeugen, indem wir uns dem CSS zuwenden.
Im CSS erstellen wir den Effekt komplett aus dem Nichts, ohne Bilder, nur zum Spaß.
* -moz-box-dimensionierung: border-box; -webkit-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box; body background: # 777; # page-wrap margin: 0 auto; Max-Breite: 980px; Breite: 100%; .paper margin: 30px auto; Hintergrund: # f5f4f0; Max-Breite: 960px; Breite: 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); Box-Schatten: 0 0 2px rgba (0, 0, 0, 0,7); h1 font: fett 50px "Georgia", serif; Text ausrichten: Mitte; Text-Schatten: 0 1px 0 #fff; Rand unten: 20px; h2 font: fett 25px "Georgia", serif; Text ausrichten: Mitte;
Dies sind die grundlegenden Stile für die Seite. Wir geben eine feste maximale Breite und einen Prozentsatz für die tatsächliche Breite an, um das gesamte "Papier" -Element flexibel zu machen. Die Kopfzeilenstile dienen nur dem Beispiel. Es liegt an Ihren künstlerischen Fähigkeiten, sie entsprechend Ihrem Entwurf zu ändern.
Abschnitt Breite: 100%; min-Höhe: 100px; Position: relativ; Polsterung: 30px;
Hier stellen wir sicher, dass sich jeder Abschnitt zu 100% über das übergeordnete Element erstreckt. Wir definieren eine Mindesthöhe. Wenn Sie also leere Falzabschnitte wie im Beispiel hinzufügen möchten, werden sie nicht 0px groß. Wir erklären dann die Position relativ und fügen etwas Polsterung hinzu, nur für dieses Design.
Hinweis: Es ist sehr wichtig zu erklären Position: relativ; in diesem Abschnitt; Wir brauchen es, um die Schattenelemente zu platzieren, die den Effekt wirklich verkaufen.
.Papierteil: n-te Kind (gerade) Hintergrund: -moz-linearer Gradient (-45 Grad, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); Hintergrund: -webkit-Gradient (linear, links oben, rechts unten, Farbstopp (0%, # e9eae5), Farbstopp (100%, rgba (244, 245, 240, 0))); Hintergrund: -webkit-linearer Gradient (-45 Grad, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); Hintergrund: -o-linearer Gradient (-45 Grad, 0% E9eae5, rgba (244, 245, 240, 0) 100%); Hintergrund: -ms-linearer Gradient (-45 Grad, 0% E9eae5, rgba (244, 245, 240, 0) 100%); Hintergrund: linearer Gradient (135 °, 0% E9eae5, rgba (244, 245, 240, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e9eae5', endColorstr = "# 00f4f5f0", GradientType = 1);
Diesmal gestalten wir nur jedes gerade Schnittelement, dh das zweite, vierte, sechste Element usw. Wir verwenden einen Farbverlauf, um den Eindruck eines Schattenwurfs zu erzeugen, der im 3D-Raum auf das Papier geworfen wird. Dieser Farbverlauf ist einer der wichtigsten Bestandteile dieses Designs und es ist wichtig, eine Farbe zu wählen, die das Papier ergänzt.
In diesem Fall war das Papier # f5f4f0, und daher ist das Grau des Farbverlaufs (das diagonal von oben links nach rechts unten verschwindet) # e9eae5 bis vollständig transparent.
Sie können eine Reihe von Tools verwenden, um Ihre Farbverläufe für Sie zu generieren, zum Beispiel:
Nachdem dies erledigt ist, fügen wir nun einige Schatten unter dem Papier hinzu.
.Papierschnitt: n-te Kind (ungerade): vor z-Index: -1; Position: absolut; Inhalt: ""; unten: 0px; links: 10px; Breite: 50%; oben: 20px; Hintergrund: 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-Schatten: -10px 20px 15px rgba (0, 0, 0, 0,5); -webkit-transform: drehen (5deg); -Moz-Transformation: drehen (5 Grad); -o-transform: drehen (5deg); -ms-transform: drehen (5deg); umwandeln: drehen (5deg); .paper Abschnitt: n-te Kind (ungerade): after z-index: -1; Position: absolut; Inhalt: ""; unten: 0px; rechts: 10px; links: auto; Breite: 50%; oben: 20px; Hintergrund: 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-Schatten: 10px 20px 15px rgba (0, 0, 0, 0,5); -webkit-transform: drehen (-5deg); -Moz-Transformation: drehen (-5 Grad); -o-transform: drehen (-5deg); -ms-transform: drehen (-5deg); transform: drehen (-5deg);
Jetzt weiß ich, dass dies für Leute, die es nicht gewohnt sind, CSS3-Transformationen oder Pseudo-Elemente zu verwenden, abschreckend erscheinen mag, aber das ist eigentlich ganz einfach.
Hier fügen wir nur die Schatten für jeden ungeradzahligen Abschnitt hinzu. Wir beginnen damit, das zusätzliche Element mit dem Z-Index hinter das Papier zu schieben. Hier deklarieren wir eine absolute Position, weshalb wir die Position früher im übergeordneten Element als relativ deklarieren mussten.
Grundsätzlich stellen wir zwei schwarze Boxen her, die die Hälfte der Breite unseres Falzabschnitts einnehmen (Breite: 50%;). Wir geben ihnen dann Boxschatten und drehen sie dann um 5 °. Diese zusätzlichen Elemente sind größtenteils versteckt, aber so angeordnet, dass sie die Illusion von Tiefe vermitteln, als ob das Papier von der Seite wegkommen würde. Diese Schatten betonen den zuvor durch den Verlauf erzeugten Effekt.
Wir müssen jetzt einen ähnlichen Vorgang für unsere gleich nummerierten Abschnitte wiederholen.
.Papierschnitt: n-te Kind (gerade): vor z-Index: -1; Position: absolut; Inhalt: ""; unten: 20px; links: 10px; Breite: 50%; oben: 0; Hintergrund: rgba (0, 0, 0, 0,7); -webkit-box-shadow: -10px -25px15px rgba (0, 0, 0, 0,5); -moz-box-shadow: -10px -25px15px rgba (0, 0, 0, 0,5); Box-Schatten: -10px -25px15px rgba (0, 0, 0, 0,5); -webkit-transform: drehen (-5deg); -Moz-Transformation: drehen (-5 Grad); -o-transform: drehen (-5deg); -ms-transform: drehen (-5deg); transform: drehen (-5deg); .paper Abschnitt: n-te Kind (gerade): nach z-index: -1; Position: absolut; Inhalt: ""; unten: 20px; rechts: 10px; links: auto; Breite: 50%; oben: 0; Hintergrund: rgba (0, 0, 0, 0,7); -webkit-box-shadow: 10px -25px 15px rgba (0, 0, 0, 0,5); -moz-box-shadow: 10px -25px15px rgba (0, 0, 0, 0,5); Box-Schatten: 10px -25px15px rgba (0, 0, 0, 0,5); -webkit-transform: drehen (5deg); -Moz-Transformation: drehen (5 Grad); -o-transform: drehen (5deg); -ms-transform: drehen (5deg); umwandeln: drehen (5deg);
Genau wie zuvor, jedoch für einige Details. Offensichtlich zielen wir auf die geradzahligen Elemente und nicht auf die ungeraden, und die Positionierung ist anders, so dass sich der Schatten oben auf der Box befindet und in die andere Richtung gedreht wird, wodurch eine Art dreieckiger Schatten in der Nähe jedes Punktes entsteht. falten". Hier:
Sie haben festgestellt, dass wir Prozentsätze für Breiten verwendet haben und eine Umgebung für ein responsives Design eingerichtet haben. Wenn Sie das Beispiel so nehmen, wie es jetzt ist, und seine Größe verkleinern, funktioniert es ziemlich gut. Aber es gibt Unvollkommenheiten. Diese können mit ein paar Korrekturen behoben werden, die an bestimmten Stellen auftreten.
@media only screen und (max-width: 600px) h1 font-size: 25px; h2 font-size: kleiner; .paper Abschnitt: n-te Kind (gerade): nach recht: 20px; .paper Abschnitt: n-te Kind (ungerade): nach recht: 20px; .paper Abschnitt: n-te Kind (gerade): vor left: 20px; .paper Abschnitt: n-te Kind (ungerade): vor left: 20px;
Wir haben also hier nur die Überschriften kleiner gemacht (noch einmal nur für die Demo). Außerdem mussten wir die Pseudo-Elemente geringfügig ersetzen, da sie in kleinen Ansichtsfenstern angezeigt wurden. Ich habe 600px als Haltepunkt gewählt, weil die Schatten in meinen Augen zu groß wurden. Dies ist wiederum völlig offen für Sie, um sich entsprechend Ihrem Design zu ändern.
Da wir CSS3-Farbverläufe verwenden, ist die Browserkompatibilität auf moderne Browser und Internet Explorer 10 beschränkt. Unsere Farbverläufe verfügen über eine Sicherungsfiltereigenschaft, mit der wir auf IE9 zugreifen können, so dass IE8 und frühere Versionen nur eingeschränkt berücksichtigt werden. IE8 stolpert tatsächlich auf verschiedene Arten (unsere CSS3-Selektoren, transformieren Regeln und Box-Schatten, also lassen wir IE8 einfach komplett vergessen!) Glücklicherweise ist dies eine grazile Verschlechterung und der Inhalt der Seite ist perfekt zugänglich:
Vergessen Sie nicht, dass Ihre Medienabfragen auch das enthalten müssen nur Schlüsselwort, um zu verhindern, dass IE8 seinen gesamten Inhalt standardmäßig analysiert.
So haben Sie es! Ein flexibler Effekt für gefaltetes Papier, der mit CSS3-Farbverläufen, Box-Shadows und Pseudoelementen erstellt wird. Ich hoffe, Sie haben dieses Tutorial genossen und hoffentlich etwas Nützliches daraus gelernt. Lassen Sie mich in den Kommentaren wissen, ich würde gerne Ihre Meinungen hören.
