Wie man einen Ordner mit CSS „Schlitz' -Effekt wirkt

simuliert den Effekt von Papier, das leicht aus einem Ordner ausgesetzt ist, oder den visuellen Effekt einer Kreditkarte, die sich leicht von einer Brieftasche erstreckt, die als "Crack" -Effekt im Design bezeichnet wird. Mit CSS können wir diese visuelle Illusion geschickt erstellen und das Element aus einer Öffnung herausragen.

Der Schlüssel zum Design ist der Schatten, der visuelle Hinweise liefert, die einen Riss implizieren. Dann gibt es Elemente, die die Risse bedecken und Platz für Elemente bieten, die von unten spähen.

Zusammen werden wir einen Effekt wie folgt erstellen:

Erstellen Sie Shadow First

Sie können überrascht sein, dass die Schatten in den Beispielen nicht unter Verwendung der tatsächlichen CSS -Schatten (z. B. box-shadow oder drop-shadow() Filter) erstellt werden. Stattdessen ist der Schatten selbst ein unabhängiges Element, dunkler und verschwommen in der Farbe. Dies ist entscheidend, um das Design in den Standard- und Animationszuständen anpassungsfähiger zu machen.

Ein anderes Element ist das Overlay, das sich über den Schatten überlappt. Das folgende Bild zeigt, wie Schatten und Überlagerungen miteinander kombiniert werden.

Der Schatten besteht aus einem kleinen, aufrechten Rechteck mit einem Gradientenhintergrund. Der Gradient ist in der Mitte dunkler. Wenn das Element verschwommen ist, erzeugt es einen dunkleren Schatten in der Mitte;

Die linke Hälfte des reproduzierten Schattens ist jetzt von einem Rechteck oben bedeckt, das genau die gleiche Farbe wie die Hintergrundfarbe seines Behälters hat.

Die Überlagerung und Schatten bewegen Sie sich dann ein wenig nach links, damit es so aussieht, als ob es geschichtet ist.

Behandle die Abdeckung

Um das Overlay mit dem entworfenen Hintergrund zu mischen, erbt seine Hintergrundfarbe von seinen enthaltenen Elementen. Abhängig von Ihren Designentscheidungen und -anforderungen können Sie auch versuchen, Standards wie CSS -Masken und Mischmodi zu verwenden, um das Overlay mit seinem Hintergrund zu mischen.

Ein paar Grundlagen zur Anwendung dieser Standards können Sie auf den folgenden Artikel verweisen: "Maskieren vs. Clipping: Wann zu verwenden" von Sarah Drasner eine hervorragende Einführung in Masken. Ich habe in diesem Beitrag auch über den CSS -Hybridmodus geschrieben, in dem Sie verwandte Themen überprüfen können.

In dem Quellcode meines Beispiels werden Sie feststellen, dass ich Elemente in <main></main> Elementen mit CSS -Raster ausrichten und stapeln (den Layout -Standard, den ich häufig in meiner Demo verwende). Wenn Sie ein ähnliches Design erstellen, verwenden Sie die Layout -Methode, die Ihrer Anwendung am besten geeignet ist, um verschiedene Teile des Designs auszurichten. In diesem Fall habe ich ein einzelnes Spaltenraster auf dem <main></main> -Element eingerichtet, mit dem ich Overlay, Schatten und Bild zentrieren kann.

CSS -Gitter ermöglicht es mir auch, alle drei Divs so einzustellen, dass sie alle im <main></main> -Container in voller Breite sind:

main > div {
  grid-area: 1 / 1;
}

Dies macht alles zusammengestapelt. Oft versuchen wir zu vermeiden, Elemente mit anderen Elementen im Netz abzudecken. Dieses Beispiel hängt jedoch davon ab. Ich habe die Breite von .slit-cover bis 50%festgelegt, was natürlich das Bild unten zeigt. Von dort habe ich eine Transformation eingestellt, um sie 50% in negativer Richtung zu bewegen, plus Ich habe zuvor eine kleine Menge Schatten (25px) bewegt, um sicherzustellen, dass es ebenfalls angezeigt wurde.

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

Filter oder sogar den SVG -Filter verwenden, um denselben Schatteneffekt zu erzielen, was die Illusion wirklich verbessert. box-shadow drop-shadow() Sie können es anpassen, wenn Sie Ihr eigenes Aussehen und Gefühl bekommen möchten. Versuchen Sie beispielsweise, Schatten und Bildstandorte auszutauschen. Oder spielen Sie mit der Farbkombination und ändern Sie den Wert des

Das obige ist der detaillierte Inhalt vonWie man einen Ordner mit CSS „Schlitz' -Effekt wirkt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!