Erstellen Sie Collage-Effekte in den Browser mit CSS

Sep 14, 2025

wie man

Wenn Sie jemals wünschten, Sie könnten die Auswirkungen eines Traditionellen replizieren Collage Maker. in deiner Website-Layouts. Dies ist das Tutorial für Sie.

Das Webdesign-Tutorial wird drei CSS-Eigenschaften ansehen: Maskenbild , Clip-Pfad und Form-Outrend . Auch wenn Sie sie benutzt haben, machen Sie sich keine Sorgen. Ich zeige Beispiele, die Ihnen helfen, Effekte zu erstellen, die Sie wahrscheinlich nicht auf vielen Websites gesehen haben.

Auf der Suche nach einer anderen Art von Tutorial? Sehen So erstellen Sie eine Fotocollage in Photoshop . Und für praktische Guides sehen Sie unsere Pick-of the-Top Webseitenersteller und Web-Hosting Bedienung.

18 TOP CSS-Animationsbeispiele

Meine größte Inspiration in Bezug auf die Verwendung der genannten Eigenschaften ist traditionelle Collagen. Ich habe mich gefragt, ob es möglich war, sie in einem Webbrowser zu erstellen, ohne alle Grafikeditoren oder Software zu verwenden. Mit der Magie von CSS ist es völlig machbar! Ein weiterer Bonus, um sie mit Code zu erstellen, ist, dass sie skalierbar, animiert und interaktiv sind. Stellen Sie vor dem Start sicher, dass Sie Folgendes haben:

Du wirst brauchen:

Ihr Lieblings-Webbrowser und Entwickler-Tools - ich empfehle Google Chrome, da er alle Funktionen, die ich in diesem Tutorial verwende, unterstützt
Ein Code-Editor
Vermögenswerte wie Bilder oder SVG-Dateien - Sie können die, die wir in diesem Tutorial verwenden, herunterladen können Hier

Mask-Bilder, die Text überlappen

CSS masks example — Mit CSS-Masken können Sie spezielle Effekte erstellen - wie das Aktivieren eines Site-Überschriften auf selektiv erscheinen und verschwinden, wenn der Benutzer die Seite nach oben und unten scrollt (Kontrast dieses Bild auf den oben).

Maskierung ist die erste Funktion, die ich Ihnen zeigen möchte. Es hilft, in der Web weitere kreative Formen und Layouts aufzubauen, indem Sie Ihrem Browser mitteilt, in dem die Anlageelemente sichtbar sein sollen. Maskierung kann auf drei verschiedene Arten erfolgen: Verwenden eines Rasterbildes (das sich im PNG-Format mit transparenten Teilen befindet); CSS-Gradienten; oder SVG-Elemente. Beachten Sie, dass SVG im Gegensatz zu einem typischen Rasterbild ohne einen erheblichen Qualitätsverlust skaliert oder umgewandelt werden kann.

Was ich an der Maskierung besonders mag, ist die Fähigkeit, die gleichen Eigenschaften wie für anzuwenden Hintergrund - Wir können beispielsweise die Position, Größe und Wiederholung der Maske definieren, zum Beispiel mit: Mask-Repeat: No-Repeat und Maskengröße: Abdeckung .

Dank der CSS-Maskierung können wir anspruchsvollere Auswirkungen auf das Web erstellen. Einer von ihnen kann in unserem Beispiel gefunden werden, wo Teile eines Bildes einen Text abdecken; Wenn ein Benutzer nach oben und unten scrollt, werden die Seite einige Teile des Textes angezeigt / ausgeblendet. Dies gibt den Eindruck, dass sich der Seitentitel hinter den Bergen befindet. Um diesen Effekt zu erstellen, werden einige Tricks benötigt, und die clevere Anwendung von CSS-Masken hilft uns, dies zu erreichen.

Lassen Sie uns einen Header mit einem ausgewählten Hintergrundbild und zwei Kopfzeilen innen erstellen. Einer von ihnen wird der primäre (erste Niveau der Überschrift) sein.

 & lt; Header & GT;
        & lt; h3 & gt; das ist & lt; / h3 & gt;
        SPAN & GT; My Adventure & lt; / span & gt; & lt; / h1 & gt;
& lt; / header & gt;

Der Text der Überschrift wird in der & lt; span & gt; Etikett. Es ist kein gängiger, aber in diesem Fall wenden wir in diesem Fall die Maskierung an die Überschrift, nicht an den Behälter.

 Kopfzeile {
    Breite: 100VW;
    Höhe: 80 vh;
    oben: 0;
    links: auto;
    Hintergrund: URL (../ Bilder / landess.jpg) Center TOP No-Repeat;
    Hintergrundgröße: Abdeckung;
}
h1 {
    Maske: URL (../ Bilder / Mask.svg # maskid);
    -webkit-Mask: URL (../ Bilder / Landschaftsmaske.png)
Zentrumspitze No-Repeat;
    Maskengröße: Abdeckung;
    -Webkit-Masken-Größe: Abdeckung;
    Breite: 100VW;
    Höhe: 80 vh;
    Farbe: #FFF;
    Schriftgröße: 100px;
    Position: relativ;
}
h1 span {
    Position: Fixiert;
    Anzeige: Inline-Block;
    Text-ALIGN: CENTER;
    Schriftfamilie: "Libre Baskerville", Serif;
    Breite: 100VW;
    oben: 80px;
    Schriftart: Italic;
}

Schneiden Sie Bilder mit CSS-Clipping aus

CSS clipping example — Beschneidungspfade ermöglichen es Ihnen, das Anlagenbild in diesem Beispiel auszuschneiden

Lassen Sie uns ein anderes Beispiel erkunden und erfahren Sie mehr über CSS-Clipping. Kurz gesagt, das Clipping definiert, welche Bildfläche sichtbar sein sollte. Das Clipping ähnelt dem Hacken von Papier. Die Grenze der Form wird als Clippfad bezeichnet: Alles außerhalb des Pfads wird ausgeblendet, während etwas im Pfad sichtbar ist. Mit einem Clip-Pfad können Sie Hintergrund von Ihrem Bild entfernen, anstatt schwere PNG-Dateien zu verwenden. Dafür müssen wir bereits die Form für den Ausschnitt vorbereitet haben.

Das Ziel in dieser Übung ist es, die Pflanze aus dem Bild auszuschließen, den Hintergrund zu entfernen. Wir können SVG-Code aus unserer Datei kopieren und in ein HTML-Dokument einfügen. Der Clippfad muss in eingesetzt werden & lt; defs & gt; & lt; / defs & gt; Stichworte.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; Clippath ID = "Clip-Anlage" & GT;
     & lt; Pfad d = "M293.2 524,8 c0,3,3,0 ... [und mehr Zahlen]" & Gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "pflanze" & gt; & lt; / div & gt;

Später können wir den im SVG-Code definierten Pfad durch Hinzufügen eines URL. Funktion.

 .lant {
    Höhe: 700px;
    Hintergrundbild: URL (../ Bilder / pflanzen.jpg);
    Hintergrundgröße: Abdeckung;
    Position: relativ;
    Hintergrund-Wiederholung: No-Repeat;
    -webkit-Clip-Pfad: URL ("# Clip-Anlage");
    Clip-Pfad: URL ("# Clip-Anlage");}

Querdenken

clipping in CSS example — Sie können benutzen **innenförmig** und **Form-Outrend** Um alle Arten von Formen zu erstellen

Wer hat gesagt, dass Textbehälter immer rechteckig sein müssen? Inhalt kann durch Bewerben in alle möglichen verschiedenen Formen geschnitten werden Form-Outrend und innenförmig Eigenschaften, mit denen Sie Ihren Inhalt um benutzerdefinierte Pfade in CSS eingeben können.

Wie funktioniert es? Einfach anwenden Form-Outrend zu dem gegebenen schwebenden Bild oder Behälter. Es ist wichtig zu beachten, dass das schweben Eigenschaft und Abmessungen des Elements - entweder Höhe oder Breite - müssen definiert werden, andernfalls funktioniert es nicht. Du kannst den ... benutzen URL () Funktion, die es ermöglicht Form-Outrend Eigenschaft, um eine Elementform zu definieren, die auf dem Pfad aus einer SVG-Datei basiert.

 .a-Buchstabe {
    Background-Image: URL ('../ Bilder / Gold-BG.JPG');
    Hintergrundgröße: 1000px;
    -Webkit-Mask-Image: URL ('../ Bilder / A-Buchstabe2.SVG');
    -webkit-Mask-Composite: Source-out;
    -Webkit-Mask-Repeat: No-Repeat;
    -webkit-Mask-Größe: 300px;
    Breite: 100%;
    Höhe: 60VH;
    Position: relativ;
    oben: 0px;
    Hintergrundbefestigung: fixiert;
    Float: links;
    Anzeige: Inline-Block;
    Breite: 310px;
    Shape-Marge: 23px;
    Form-Außen: URL ('../ Bilder / mask.svg');
}

Das Form-Outrend Das Eigentum ändert nichts über ein anderes Element als das Float-Bereich. Dies bedeutet, dass Borders und Hintergrundbilder nicht an die auf dem Element erstellte Form anpassen. Dies ist der Grund, warum wir auch das anwenden müssen Maskenbild Eigenschaft - Um den Hintergrund des Elements auszuschneiden, um die definierte Form anzupassen.

Eine wichtige Sache ist, dass das Form-Outrend Funktion funktioniert nur mit Cors-fähigen Dateien. CORS steht für Ressourcenteilung von Cross Origin.

In diesem speziellen Fall ist der beste Weg, um es zu sehen, dass es localHost verwendet wird, andernfalls funktioniert es nicht, wenn Sie es einfach in Ihrem Browser öffnen.

Bitte beachten Sie beim Experimentieren, dass nicht alle der genannten Funktionen von allen Browsern unterstützt werden, sodass es sich lohnt, sie zu überprüfen Hier . Das neueste Beispiel funktioniert nicht in Firefox, Opera und dh, aber hoffentlich wird es bald für alle Browser verfügbar sein. Und wenn Sie viele Dokumente zur Lagerung Ihres Projekts haben, halten Sie sie in sicherer Cloud-Speicherung. .

Weiterlesen:

Beginnen Sie mit variablen Schriftarten in CSS
Eine umfassende Anleitung zur Verwendung von CSS-Raster
Wie neue CSS-Regeln jetzt versuchen

Erstellen Sie Collage-Effekte in den Browser mit CSS

Du wirst brauchen:

Mask-Bilder, die Text überlappen

Schneiden Sie Bilder mit CSS-Clipping aus

Querdenken

wie man - Die beliebtesten Artikel

How to avoid an Amazon Prime Day 2020 fail

Affinity Designer: So verwenden Sie Effekte und Stile

Verwenden Sie chart.js, um Daten in interaktive Diagramme zu drehen

Eine Einführung in CSS-Eigenschaften

Machen Sie Gras in unreal Motor

Wie zeichnet man mit Affinitätsfoto für iPad

Erstellen Sie ein niedriges Poly-Tapeten in C4D

10 Top Houdini Tutorials

Kategorien