Buat efek kolase di browser dengan CSS

Sep 11, 2025

Bagaimana caranya

Jika Anda pernah berharap Anda dapat mereplikasi efek tradisional Pembuat Kolase Di anda Tata letak situs web , Ini tutorial untuk Anda.

Tutorial desain web akan melihat tiga properti CSS: Topeng-gambar. , Clip-Path. dan bentuk-luar . Bahkan jika Anda telah menggunakannya, jangan khawatir. Saya akan menunjukkan contoh-contoh yang akan membantu Anda membuat efek yang mungkin belum Anda lihat di banyak situs web.

Mencari jenis tutorial yang berbeda? Lihat Cara Membuat Kolase Foto di Photoshop . Dan untuk panduan praktis, lihat pilihan atas kami Pembangun Situs Web dan hosting web. layanan.

18 Contoh Animasi CSS Teratas

Inspirasi terbesar saya dalam hal menggunakan properti yang disebutkan adalah kolase tradisional. Saya bertanya-tanya apakah mungkin untuk membuatnya di browser web, tanpa menggunakan editor atau perangkat lunak grafis. Dengan keajaiban CSS, itu benar-benar bisa dilakukan! Bonus lain untuk membuatnya dengan kode adalah membuatnya dapat diskalakan, animasi dan interaktif. Sebelum Anda mulai, pastikan Anda memiliki berikut:

Anda akan perlu:

Browser web dan alat pengembang favorit Anda - Saya sarankan menggunakan Google Chrome karena mendukung semua fitur yang saya gunakan dalam tutorial ini
Editor kode
Aset seperti gambar atau file SVG - Anda dapat mengunduh yang kami gunakan dalam tutorial ini sini

Topeng gambar yang tumpang tindih teks

CSS masks example — Masker CSS memungkinkan Anda untuk membuat efek khusus - seperti mengaktifkan situs yang muncul secara selektif dan menghilang ketika pengguna menggulir ke atas dan ke bawah halaman (kontras gambar ini ke yang di atas)

Masking adalah fitur pertama yang ingin saya tunjukkan. Ini membantu membangun bentuk dan tata letak yang lebih kreatif di web dengan memberi tahu browser Anda yang elemen aset harus terlihat. Masking dapat dilakukan dalam tiga cara berbeda: menggunakan gambar raster (yaitu dalam format PNG dengan bagian transparan); Gradien CSS; atau elemen SVG. Perhatikan bahwa tidak seperti gambar raster khas, SVG dapat ditingkatkan atau ditransformasikan tanpa kerugian yang signifikan dalam kualitas.

Apa yang saya suka tentang masking adalah kemampuannya untuk menerapkan sifat yang sama dengan Latar Belakang - Kita dapat mendefinisikan posisi, ukuran, dan pengulangan topeng, misalnya, menggunakan: Masker-REATER: Tidak diulang dan Ukuran masker: penutup .

Berkat masking CSS, kami dapat membuat efek yang lebih canggih di web. Salah satu dari mereka dapat ditemukan dalam contoh kami, di mana bagian dari gambar mencakup beberapa teks; Ketika pengguna menggulir ke atas dan ke bawah halaman Beberapa bagian dari teks ditampilkan / disembunyikan. Ini memberi kesan bahwa judul halaman terletak di belakang pegunungan. Untuk membuat efek ini, beberapa trik dibutuhkan dan aplikasi pintar dari masker CSS akan membantu kami mencapai itu.

Mari kita buat header dengan gambar latar belakang yang dipilih dan dua header di dalamnya. Salah satunya akan menjadi yang utama (tingkatan pertama menuju).

 & lt; header & gt;
        & lt; h3 & gt; ini & lt; / h3 & gt;
        & lt; h1 & gt; & lt; span & gt; petualangan saya & lt; / span & gt; & lt; / h1 & gt;
& lt; / header & gt;

Teks judul akan disimpan di & lt; span & gt; menandai. Itu bukan hal yang umum tetapi, dalam hal ini, kami menerapkan masking untuk menuju, bukan ke wadah.

 header {
    Lebar: 100VW;
    Tinggi: 80VH;
    TOP: 0;
    kiri: otomatis;
    Latar belakang: URL (../ gambar / landscape.jpg) Pusat Top tidak berulang;
    ukuran latar belakang: penutup;
}
h1 {
    Topeng: URL (../ gambar / mask.svg # maskid);
    -WebKit-mask: URL (../ gambar / landscape-mask.png)
pusat atas tidak berulang;
    Topeng-size: penutup;
    -webkit-mask-size: penutup;
    Lebar: 100VW;
    Tinggi: 80VH;
    Warna: #fff;
    Ukuran font: 100px;
    Posisi: Relatif;
}
h1 span {
    Posisi: Tetap;
    Tampilan: blok inline;
    Teks-Align: Center;
    Font-Family: 'Libre Baskerville', Serif;
    Lebar: 100VW;
    TOP: 80px;
    Font-Style: Italic;
}

Potong gambar menggunakan kliping CSS

CSS clipping example — Jalur kliping memungkinkan Anda untuk memotong gambar tanaman dalam contoh ini

Mari kita jelajahi contoh lain dan cari tahu lebih lanjut tentang kliping CSS. Singkatnya, kliping mendefinisikan area gambar mana yang harus terlihat. Kliping mirip dengan memotong kertas. Batas bentuk disebut jalur klip: apa pun di luar jalur akan disembunyikan, sementara apa pun di dalam jalur akan terlihat. Dengan jalur klip Anda dapat menghapus latar belakang dari gambar Anda, alih-alih menggunakan file PNG berat. Untuk ini kita perlu sudah menyiapkan bentuk untuk memotong.

Tujuan dalam latihan ini adalah untuk memotong tanaman dari gambar, menghilangkan latar belakang. Kami dapat menyalin kode SVG dari file kami dan menempelkannya ke dokumen HTML. Jalur klip harus ditempatkan di dalam & lt; defs & gt; & lt; / defs & gt; Tag.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "clip-plant" & gt;
     & lt; path d = "m293.2,524.8c0,3,3,0 ... [dan lebih banyak angka]" & gt;
     & lt; / clippation & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "tanaman" & gt; & lt; / div & gt;

Nanti kita dapat dengan mudah referensi jalur yang ditentukan dalam kode SVG dengan menambahkan a URL fungsi.

 .plant {
    Tinggi: 700px;
    Latar Belakang-Gambar: URL (../ gambar / plant.jpg);
    ukuran latar belakang: penutup;
    Posisi: Relatif;
    Latar Belakang-REATER: Tidak berulang;
    -WebKit-Clip-Path: URL ("# Clip-Plant");
    Clip-Path: URL ("# Clip-Plant");}

Berpikir di luar kotak

clipping in CSS example — Kamu bisa gunakan **bentuk-dalam.** dan **bentuk-luar** Untuk membuat semua jenis bentuk

Siapa bilang wadah teks selalu harus persegi panjang? Konten dapat dipotong ke segala macam bentuk yang berbeda dengan mendaftar bentuk-luar dan bentuk-dalam. Properti yang memungkinkan Anda untuk membungkus konten Anda di sekitar jalur khusus di CSS.

Jadi, bagaimana cara kerjanya? Cukup melamar bentuk-luar ke gambar atau wadah melayang yang diberikan. Penting untuk dicatat bahwa mengapung Properti dan dimensi elemen - baik ketinggian atau lebar - harus didefinisikan jika tidak, itu tidak berhasil. Anda dapat menggunakan URL () fungsi, yang memungkinkan bentuk-luar Properti untuk menentukan bentuk elemen berdasarkan jalur dari file SVG.

 .a-huruf {
    Latar Belakang-Gambar: URL ('../ Gambar / Gold-BG.jpg');
    Ukuran latar belakang: 1000px;
    -webkit-mask-image: URL ('../ gambar / a-letter2.svg');
    -WebKit-Mask-Composite: Source-Out;
    -WebKit-mask-ulangan: tidak berulang;
    -WebKit-mask-size: 300px;
    Lebar: 100%;
    Tinggi: 60VH;
    Posisi: Relatif;
    TOP: 0px;
    latar belakang-lampiran: tetap;
    float: kiri;
    Tampilan: blok inline;
    Lebar: 310px;
    Bentuk-margin: 23px;
    bentuk-luar: URL ('../ gambar / mask.svg');
}

Itu bentuk-luar Properti tidak mengubah apa pun tentang elemen selain area float-nya. Ini berarti bahwa setiap batas dan gambar latar belakang tidak akan beradaptasi dengan bentuk yang dibuat pada elemen. Ini adalah alasan mengapa kita juga perlu menerapkan Topeng-gambar. Properti - untuk memotong latar belakang elemen agar sesuai dengan bentuk yang ditentukan.

Satu hal penting yang perlu diperhatikan adalah bahwa bentuk-luar Fitur hanya berfungsi dengan file yang diaktifkan CORS. Cors adalah singkatan dari berbagi sumber daya lintas sumber.

Dalam kasus khusus ini cara terbaik untuk melihatnya adalah dengan menggunakan localhost, jika tidak maka tidak akan berfungsi jika Anda hanya membukanya di browser Anda.

Ketika bereksperimen, harap ingat bahwa tidak semua fitur yang disebutkan didukung oleh semua browser, jadi ada baiknya memeriksa mereka sini . Contoh terbaru tidak berfungsi di Firefox, Opera dan IE tetapi mudah-mudahan itu akan segera tersedia untuk semua browser. Dan jika Anda memiliki banyak dokumen untuk disimpan untuk proyek Anda, jaga agar tetap aman penyimpanan awan .

Baca lebih lajut:

Mulai dengan font variabel di CSS
Panduan komprehensif untuk menggunakan grid CSS
Bagaimana aturan CSS baru untuk dicoba sekarang

Buat efek kolase di browser dengan CSS

Anda akan perlu:

Topeng gambar yang tumpang tindih teks

Potong gambar menggunakan kliping CSS

Berpikir di luar kotak

Bagaimana caranya - Artikel Terpopuler

Tutorial Krita: Pelajari dasar-dasar perangkat lunak seni digital

Cara Mengubah WordPress ke dalam Builder Visual

Buat dan menghidupkan poligon SVG

19 Tips untuk Great Poser Art

Buat karakter Anda muncul dengan warna dan cahaya

mulai dengan WebGL menggunakan three.js

Bagaimana cara mencapai pencahayaan yang lebih baik dengan V-Ray

Buat efek api 3D

Kategori