Wie man einen Ordner-"Schlitz"-Effekt mit CSS erstellt

Wenn man etwas – sagen wir ein normales Blatt Papier – in einen Manila-Ordner legt, kann ein Teil dieses Dings ein wenig aus dem Ordner herausschauen. Ähnlich verhält es sich mit einer Brieftasche und Kreditkarten. Die Karten ragen ein kleines bisschen heraus, damit man einen schnellen Blick darauf werfen kann, welche Karten man dabei hat.

Ich nenne diese Art von Dingen "Schlitz". Ein Schlitz ist dort, wo wir die Illusion einer Öffnung erzeugen, durch die wir ein visuelles Element hervorlugen lassen können. Und das können wir in CSS machen!

Der entscheidende Teil des Designs ist der Schatten, der den visuellen Hinweis darauf gibt, dass es einen Schlitz gibt. Dann gibt es die Abdeckung für den Schlitz, die den Raum für das dargestellte Element bietet, aus dem es hervorlugen kann.

Hier ist, was wir gemeinsam erstellen werden

Beginnen wir mit der Erstellung des Schattens

Vielleicht überrascht es Sie, dass der Schatten im Beispiel nicht mit einem tatsächlichen CSS-Schatten erstellt wird, wie z.B. box-shadow oder einem drop-shadow()-Filter. Stattdessen ist der Schatten ein eigenes Element, dunkel und unscharf. Dies ist wichtig, um das Design sowohl im Standard- als auch im animierten Zustand besser anpassbar zu machen.

Die Abdeckung ist das andere Element im Design. Die Abdeckung ist das, was ich als das Element bezeichne, das den Schatten überlagert. Hier ist eine Abbildung, die zeigt, wie Schatten und Abdeckung zusammenkommen.

Der Schatten besteht aus einem kleinen, aufrechten Rechteck mit einem Farbverlauf-Hintergrund. Der Farbverlauf ist in der Mitte dunkler. Wenn das Element also unscharf gemacht wird, entsteht ein Schatten, der in der Mitte dunkler ist; daher ist er dimensionaler.

Nun wird die linke Hälfte des nachgebildeten Schattens von einem Rechteck darüber verdeckt, das genau die gleiche Farbe wie der Hintergrund seines Containers hat.

Sowohl die Abdeckung als auch der Schatten werden dann geringfügig nach links verschoben, so dass es so aussieht, als wären sie geschichtet.

Arbeiten an der Abdeckung

Damit die Abdeckung mit dem Hintergrund des Designs harmoniert, wird ihre Hintergrundfarbe von ihrem enthaltenden Element übernommen. Alternativ können Sie auch versuchen, die Abdeckung mit Standards wie CSS-Masken und Blend-Modi an ihren Hintergrund anzupassen, je nach Ihren Designentscheidungen und Anforderungen.

Um einige Grundlagen zur Anwendung dieser Standards zu erfahren, können Sie sich auf diese Artikel beziehen: Sarah Drasners Artikel „Masking vs. Clipping: Wann man was verwenden sollte“ bietet eine ausgezeichnete Einführung in Masken. Ich habe auch in diesem Artikel über CSS-Blend-Modi geschrieben, wo Sie Ihr Wissen zu diesem Thema auffrischen können.

Im Quellcode meines Beispiels werden Sie feststellen, dass ich die Elemente innerhalb des <main>-Elements mit CSS Grid ausgerichtet und gestapelt habe, einem Layout-Standard, den ich oft in meinen Demos verwende. Wenn Sie ein ähnliches Design nachbilden, verwenden Sie eine Layout-Methode, die am besten zu Ihrer Anwendung passt, um die verschiedenen Teile des Designs auszurichten. In diesem Fall habe ich auf dem <main>-Element ein einspaltiges Grid eingerichtet, das es mir ermöglicht, die Abdeckung, den Schatten und das Bild mittig auszurichten.

Was CSS Grid mir auch ermöglicht, ist, alle drei dieser divs so einzustellen, dass sie im <main>-Container volle Breite haben.

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

Dadurch stapeln sich alle Elemente übereinander. Normalerweise arbeiten wir hart daran, zu vermeiden, dass Elemente durch andere Elemente in einem Grid überdeckt werden. Aber dieses Beispiel basiert darauf. Ich habe dem .slit-cover eine Breite von 50% gegeben, was natürlich das darunter liegende Bild freilegt. Von dort aus habe ich eine transform angewendet, die es um 50% in die negative Richtung verschiebt, *plus* den kleinen Betrag, den ich den Schatten zuvor verschoben habe (25px), um sicherzustellen, dass dieser auch sichtbar ist.

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

Und da haben wir es! Ein ziemlich natürlich aussehender Schlitz, der etwas imitiert, das aus einem Ordner, einer Brieftasche oder was auch immer hervorlugt.

Es gibt noch mehr Möglichkeiten, dies zu tun! Zum einen kann Flexbox Elemente nebeneinander aufreihen und mittig ausrichten. Es gibt viele Möglichkeiten, Dinge nebeneinander anzuordnen. Und vielleicht haben Sie eine Möglichkeit, die box-shadow-Eigenschaft, den drop-shadow()-Filter oder sogar SVG-Filter zu verwenden, um den gleichen Schatteneffekt zu erzielen, der die Illusion wirklich verkauft.

Und Sie können dies völlig abwandeln, um Ihren eigenen Look and Feel zu erhalten. Versuchen Sie zum Beispiel, die Position von Schatten und Bild zu vertauschen. Oder spielen Sie mit den Farbkombinationen und ändern Sie den Wert des blur()-Filters. Die Form der Abdeckung und des Schattens kann ebenfalls angepasst werden – ich wette, Sie können einen gekrümmten Schatten anstelle eines geraden erstellen und ihn mit uns in den Kommentaren teilen!