Diese Woche haben wir ein weiteres lustiges und einfaches CSS-Projekt für Sie, mit dem Sie Ihre Code-Chops verbessern können. Dieses Mal erstellen wir die Illusion einer Seite mit einer umgelegten Ecke.
Mit der Kraft der Pseudo-Elemente erstellen wir einige CSS-Dreiecke, die wir dann in Position bringen können, um unsere Seitenfalte zu erstellen. Wenn wir alle fertig sind, können Sie einfach eine Klasse auf jedes div anwenden, um den Effekt hinzuzufügen.
Das Konzept
Demo: Klicken Sie hier, um zu starten.
Vor kurzem wollte ich einem einfachen Textcontainer etwas Charakter hinzufügen und beschloss, eine der Ecken zu falten. Mit Hilfe eines Bildes ist dies eine ziemlich einfache Aufgabe. Wenn wir jedoch versuchen, eine reine CSS-Route zu verwenden, ist dies mehr Zeit und Mühe.
Die Methode, die ich mir ausgedacht habe, ist sicherlich nicht innovativ, aber ich fand es interessant genug, sie hier zu teilen. Grundsätzlich brauchen wir neben einer rechteckigen Box zwei Dreiecke. Wir werden diese Dreiecke in die unten gezeigten Positionen bringen.
Sobald wir die Dreiecke platziert haben, können wir das obere Dreieck in dieselbe Farbe wie der Hintergrund ändern, und plötzlich haben wir unseren schönen kleinen Seitenfalteffekt. Ziemlich einfach!
Jetzt, da wir einen Plan haben, können wir unsere Formen mit CSS erstellen. Es gibt wirklich keine großartige integrierte Methode zum Erstellen von Dreiecken mit CSS, daher müssen wir uns an ein Grenzvoodoo wenden.
Das HTML
Erstellen Sie zunächst ein Div wie das unten gezeigte. Ich habe eine Überschrift mit einem Absatz eingefügt, eine Klasse für allgemeine Seitenstile, die wir möglicherweise an anderer Stelle wiederverwenden möchten, und schließlich eine Klasse, um den Seitenfalteffekt anzuwenden (tl steht für "oben links"), und wir erstellen eine weitere oben rechts falten später).
Das ist alles, was wir jetzt brauchen werden. Lass uns zu unserem CSS springen und dieses Ding gestylt bekommen!
Seite CSS
Für das CSS beginnen wir damit, das allgemeine Erscheinungsbild unserer kleinen Seite ohne den Fold-Effekt zu kodieren. Ich begann damit, dem Hintergrund eine schöne dunkle Farbe zu geben, und danach die eigentliche Seitenklasse zu gestalten. Geben Sie Breite, Höhe und Rand an und weisen Sie der Hintergrundfarbe Weiß zu.
Als optionalen Schritt habe ich einen sehr subtilen Hintergrundverlauf eingefügt. Wie immer ist dies ein gottloser Teil des Codes, wenn wir versuchen, mit so vielen Browsern wie möglich nett zu spielen. Wenn Sie das Gefühl haben, dass es sich nicht lohnt, geben Sie einfach den Farbverlauf ab.
Nachdem wir nun den grundlegenden Container gestaltet haben, ist es an der Zeit, den Text ein wenig besser zu machen. Für das h2 habe ich es schön groß gemacht und es ziemlich weit von der Spitze entfernt, so dass es der Seitenfaltung nicht im Weg steht. Ich habe auch die Google Web Font Lilita One verwendet. Das Einbetten dieses Codes ist so einfach wie das Kopieren und Einfügen des auf der Seite in diesem Link angegebenen Codes.
Um den Text zu beenden, habe ich dem Absatz ein paar Füllungen hinzugefügt, die Schriftart festgelegt und die Farbe ein paar Schattierungen von Schwarz abgesetzt, um sie von der Überschrift abzugrenzen.
Fortschrittskontrolle
An dieser Stelle sollten Sie eine nette kleine Seite haben, etwa die unten abgebildete. Es ist im Moment nicht viel zu sehen, aber es ist ein solider Anfang.
CSS-Dreiecke
Bevor wir fortfahren, müssen wir lernen, ein Dreieck mit CSS zu erstellen. Um diesen Vorgang zu beginnen, erstellen Sie ein leeres div und geben Sie ihm eine Klasse von Dreiecken. Stellen Sie nun sowohl die Höhe als auch die Breite auf Null ein, wenden Sie jedoch einen sehr dicken Rand an der unteren und linken Seite an (verwenden Sie zwei verschiedene Farben). Hier ist das Ergebnis, das Sie erhalten:
Wie Sie sehen, hat sich daraus ein Quadrat gebildet, das diagonal von der unteren linken Ecke zur rechten oberen Ecke geteilt wird. Jeder Rand entspricht einem der resultierenden Dreiecke. Nun sehen Sie, was passiert, wenn wir eine dieser Grenzen transparent machen:
Dort haben Sie es, ein mit reinem CSS erstelltes Dreieck. Wir können sogar die Richtung des Dreiecks anpassen, indem wir an verschiedenen Seiten Ränder anwenden:
Stellen Sie sicher, dass Sie den transparenten Rahmen in die Richtung setzen, in die die Hypotenuse zeigen soll. Wenn Sie möchten, dass es nach rechts zeigt, machen Sie den rechten Rand transparent. Das Gegenteil trifft für die anderen Grenzen zu. Wenn Sie möchten, dass die Hypotenuse nach unten zeigt, setzen Sie den oberen Rand. Wenn Sie es nach oben zeigen möchten, legen Sie den unteren Rand fest.
Schauen Sie sich dieses Tinkerbin an, um ein Beispiel für alle vier Optionen zu sehen.
Die Seite falten
Jetzt ist es an der Zeit, dieses Wissen zum Falten der Seite zu verwenden. Dazu müssen wir drei Schritte ausführen. Zuerst werden wir das? Foldtl? Klasse, die wir vorher eingerichtet haben. Als Nächstes fügen wir ein Dreieck mit dem Pseudoelement: vor hinzu.Zum Schluss fügen wir das zweite Dreieck mit dem Pseudoelement after hinzu.
Wie Sie sehen, haben wir für die Hauptklasse nur die relative Positionierung angewendet (dies hilft den absolut positionierten Dreiecken) und einen Boxschatten setzen. Als Randbemerkung ist dieses Projekt ohne Schatten viel einfacher, aber ich wollte sicherstellen, dass Sie wissen, dass es trotzdem funktionieren kann. Sie müssen nur sicherstellen, dass der Schatten so weit versetzt ist, dass er nicht an der Seite mit der Seitenfalte hervorsteht.
Nun ist es Zeit, unser erstes Dreieck zu erstellen. Rufen Sie das: vor dem Pseudo-Element auf, setzen Sie seinen Inhalt auf nichts, positionieren Sie ihn absolut auf den Ursprung, und verwenden Sie dann den oben erlernten Dreieckscode.
Wie Sie sehen, habe ich die Größe auf 70px und die Farbe auf #eee gesetzt, was etwas dunkler als die Seitenfarbe ist, da dies das Dreieck ist, das den Umklappeffekt erzeugt. Wieder muss der Schatten deutlich versetzt sein, um richtig auszusehen.
Schneiden Sie die Ecke aus
Zum Abschluss müssen wir unser zweites Dreieck positionieren, um die obere linke Ecke auszuschneiden. Dies verwendet fast die gleiche Syntax wie die letzte, nur die Farbe des Dreiecks entspricht der des Körpers und die Richtung wurde umgekehrt.
Es stellt sich heraus, dass dieser Schritt nicht unbedingt erforderlich ist. Weitere Informationen finden Sie im Abschnitt "Update".
Damit ist unser Seitenfalteffekt fertig! So sieht es aus:
Umdrehen
Nun, da wir unsere obere linke Seite gefaltet haben, ist es Zeit, sie umzudrehen und zu sehen, ob wir auf der anderen Seite dasselbe machen können. Die Syntax ist fast identisch, nur mit der absoluten Positionierung von rechts statt von links versetzt und Dreiecke umgedreht.
Eine Sache, die Sie hierher stolpern könnte, sind die Schatten, die Sie auch umdrehen müssen, da sonst die Illusion zerstört wird. Dieses Bild zeigt, was ich meine:
Sieh es in Aktion
Nun, da wir alle fertig sind, ist es an der Zeit, diesen bösen Jungen zu testen. Denken Sie daran, weil wir: before und: after, IE7 und vorher nicht gut spielen. Es gibt Korrekturen mit JavaScript, falls dies für Sie von großer Bedeutung ist.
Demo: Klicken Sie hier, um zu starten.
Aktualisieren
Hier ist die Sache, manchmal macht ein Projekt wie dieses in Ihrem Kopf Sinn, wenn Sie es programmieren, dann kommen Sie später zurück und stellen fest, dass Sie alles falsch gemacht haben! Genau das ist hier passiert. Gleich nachdem ich das veröffentlicht hatte, fiel mir auf, dass ich, nachdem mein Grenz-Trick sich in zwei Dreiecke aufgeteilt hatte, nicht wirklich den Schritt des Hinzufügens des Abschnitts "after" durchlaufen musste. Die Informationen oben sind immer noch großartig, um daraus zu lernen, also lass ich es in Ruhe, aber hier ist ein besserer Weg, um dies zu erreichen.
Alles, was wir tun müssen, ist, die Grenze, die wir transparent gemacht haben, auf die Hintergrundfarbe zu setzen. Das allein dient als unser zweites Dreieck, das uns erlaubt, den After-Abschnitt vollständig abzuschneiden.
Lebe und lerne Leute, lebe und lerne. Gehen Sie immer durch und stellen Sie sicher, dass Ihr Code so kurz wie möglich ist. Manchmal macht man dumme Fehler (ich bin sicher). Lassen Sie sich nicht entmutigen, sondern trösten Sie stattdessen die Tatsache, dass es fast immer eine bessere Möglichkeit gibt, etwas zu tun. Jedes Mal, wenn Sie einen finden, machen Sie sich zu einem besseren Kodierer.
Schauen Sie sich das aktualisierte Tinkerbin an, um diese neue und verbesserte Version zu sehen.
Fazit
Vielen Dank, dass Sie dieses Tutorial zur Erstellung eines Seiteneffekts mit CSS gelesen haben. Ich hoffe, Sie fanden die Informationen hilfreich und sind nun ziemlich bequem, sowohl die CSS-Dreiecke als auch die Pseudoelemente P: before und: after zu verwenden.
Hinterlassen Sie einen Kommentar und lassen Sie mich wissen, was Sie denken, und sehen Sie sich bald wieder weitere großartige CSS-Komplettlösungen an.