So erstellen Sie mit CSS einen „Slit“-Effekt für Ordner

Wenn Sie etwas – sagen wir ein normales Blatt Papier – in einen Manilla-Ordner stecken, kann ein Teil davon ein wenig aus dem Ordner herausschauen. Dasselbe gilt für eine Brieftasche und Kreditkarten. Die Karten ragen nur ein wenig heraus, sodass Sie schnell einen Blick darauf werfen können, welche Karten Sie bei sich tragen.

Ich nenne so etwas einen „Schlitz“. Bei einem Schlitz erzeugen wir die Illusion einer Öffnung, durch die wir ein visuelles Element herauskitzeln können. Und das können wir in CSS!

Der entscheidende Teil des Designs ist der Schatten, der den visuellen Hinweis auf einen Schlitz gibt. Dann gibt es noch die Abdeckung für den Schlitz, der den Platz bietet, damit das ausgestellte Element von unten durchschauen kann.

Hier ist, was wir zusammen machen werden:

Beginnen wir mit dem Erstellen des Schattens

Sie werden vielleicht überrascht sein, dass der Schatten im Beispiel nicht mit einem tatsächlichen CSS-Schatten erstellt wurde, wie z box-shadow oder eine drop-shadow() Filter. Stattdessen ist der Schatten ein eigenständiges Element, dunkel und verschwommen. Dies ist wichtig, um das Design anpassungsfähiger zu machen, sowohl im Standard- als auch im animierten Zustand.

Das Cover ist das andere Element im Design. Die Abdeckung nenne ich das Element, das den Schatten überlappt. Hier ist eine Abbildung, die darstellt, wie der Schatten und die Abdeckung zusammenkommen.

Der Schatten besteht aus einem kleinen aufrechten Rechteck mit einem Hintergrund mit Farbverlauf. Der Farbverlauf ist in der Mitte dunkler. Wenn also das Element unscharf ist, erzeugt es einen Schatten, der in der Mitte dunkler ist; daher dimensionaler.

Jetzt ist die linke Hälfte des neu erstellten Schattens oben mit einem Rechteck bedeckt, das genau so gefärbt ist wie der Hintergrund seines Containers.

Sowohl die Abdeckung als auch der Schatten werden dann ganz leicht nach links verschoben, sodass sie geschichtet erscheinen

Arbeiten am Cover

Damit sich das Cover in den Hintergrund des Designs einfügt, wird seine Hintergrundfarbe von seinem enthaltenden Element geerbt. Alternativ können Sie auch versuchen, das Cover mit Standards wie z. B. mit dem Hintergrund zu verschmelzen CSS-Masken und Mischmodi, abhängig von Ihren Designentscheidungen und Anforderungen.

Um einige Grundlagen zu lernen, wie diese Standards angewendet werden können, können Sie sich auf diese Artikel beziehen: Sarah Drasner's „Maskierung vs. Clipping: Wann man beides verwendet“ bietet eine hervorragende Grundierung auf Masken. Ich habe auch über CSS-Mischmodi geschrieben In diesem Artikel wo Sie das Thema auffrischen können.

Im Quellcode meines Beispiels werden Sie feststellen, dass ich die Elemente innerhalb der ausgerichtet und gestapelt habe

Element mit CSS Grid, einem Layout-Standard, den ich oft in meinen Demos verwende. Wenn Sie ein ähnliches Design neu erstellen, verwenden Sie eine Layoutmethode, die für Ihre Anwendung am besten geeignet ist, um die verschiedenen Teile des Designs auszurichten. In diesem Fall habe ich ein einspaltiges Raster auf dem eingerichtet

Element, mit dem ich das Cover, den Schatten und das Bild zentrieren kann.

Mit CSS Grid kann ich auch alle drei festlegen divs so sind sie alle in voller Breite in der

Container:

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

Dadurch wird alles übereinander gestapelt. Normalerweise arbeiten wir hart daran, Elemente nicht mit anderen Elementen in einem Raster zu überdecken. Aber dieses Beispiel stützt sich darauf. Ich habe die gegeben .slit-cover bei einer Breite von 50 %, wodurch das Bild darunter natürlich sichtbar wird. Von dort setze ich a transform darauf, das es zu 50 % in die negative Richtung bewegt, erfahren Der kleine Betrag, um den ich den Schatten früher verschoben habe (25px), um sicherzustellen, dass dies ebenfalls aufgedeckt wird.

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

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

Es gibt mehr Möglichkeiten, dies zu tun! Zum einen kann Flexbox Elemente dazu bringen, sich in einer Reihe auszurichten und so in der Mitte auszurichten. Es gibt viele Möglichkeiten, Dinge nebeneinander zu stellen. Und vielleicht haben Sie eine Möglichkeit, die zu verwenden box-shadow Eigentum, drop-shadow() filtern oder sogar SVG-Filter um die gleiche Art von Schatteneffekt zu erzielen, der die Illusion wirklich verkauft.

Und Sie können sich darauf einlassen, um Ihr eigenes Aussehen und Gefühl zu erhalten. Versuchen Sie beispielsweise, die Position von Schatten und Bild zu vertauschen. Oder spielen Sie mit den Farbkombinationen und ändern Sie die blur() Filter Wert. Die Form des Covers und des Schattens kann ebenfalls angepasst werden – ich wette, Sie können einen gekrümmten Schatten anstelle eines geraden erstellen und ihn in den Kommentaren mit uns teilen!