CSS ile tarayıcıda kolaj efektleri oluşturun

Sep 17, 2025

Nasıl Yapılır

Eğer hiç dilediyseniz, geleneksellerin etkilerini çoğaltabilirsiniz. Kolaj yapıcı senin içinde Web sitesi düzeni , bu senin için öğretici.

Web Tasarım Eğitimi üç CSS özelliklerine bakacak: maske görüntüsü , klip-yol ve biçimsiz . Onları kullansanız bile, endişelenme. Muhtemelen birçok web sitesinde görmediğiniz efektler oluşturmanıza yardımcı olacak örnekler göstereceğim.

Farklı bir eğitim türü mi arıyorsunuz? Görmek Photoshop'ta fotoğraf kolaj nasıl yapılır . Ve kullanışlı kılavuzlar için, üst seçimimizi görün Web Sitesi Oluşturucu ve ağ sağlayıcısı hizmet.

18 En İyi CSS Animasyon Örnekleri

Söz konusu özellikleri kullanma açısından en büyük ilham kaynağım geleneksel kolajlardır. Herhangi bir grafik editörü veya yazılımı kullanmadan, bir web tarayıcısında bunları oluşturmak mümkün olup olmadığını merak ediyordum. CSS'nin büyüsü ile tamamen yapılabilir! Kodla onları oluşturmanın bir başka bonusu, ölçeklenebilir, animasyonlu ve etkileşimli olmasıdır. Başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:

İhtiyacın olacak:

En sevdiğiniz web tarayıcısı ve geliştirici araçları - Google Chrome'u kullanmanızı öneririm, çünkü bu eğitimde kullandığım tüm özellikleri desteklediğinden
Bir kod editörü
Görüntüler veya SVG dosyaları gibi varlıklar - bu eğitimde kullandığımız olanları indirebilirsiniz. İşte

Metin üst üste binen görüntüleri maske

CSS masks example — CSS maskeleri, özel efektler oluşturmanıza olanak sağlar - bir site başlığının seçici olarak görünmesini ve kullanıcının sayfada yukarı ve aşağı kaydırıldığı için kaybolmasını sağlamak gibi (yukarıdaki bu görüntüye kontrast)

Maskeleme, size göstermek istediğim ilk özelliktir. Tarayıcınıza varlık öğelerinin görünmesi gerektiğini söyleyerek web'de daha yaratıcı şekil ve düzen oluşturmanıza yardımcı olur. Maskeleme üç farklı şekilde yapılabilir: bir raster görüntüsü kullanarak (yani saydam parçalarla PNG formatında); CSS gradyanları; veya SVG elemanları. Tipik bir raster görüntüsünün aksine, SVG'nin kaliteli bir kayıp olmadan ölçeklenebileceğini veya dönüştürülebileceğini unutmayın.

Özellikle maskelemeden hoşlandığım şey, aynı özellikleri yerine getirme yeteneğidir. arka fon - Örneğin, bir maskenin konumunu, boyutunu ve tekrarını tanımlayabiliriz: Maske-Tekrarlama: tekrar yok ve Maske boyutu: Kapak .

CSS maskeleme sayesinde web üzerinde daha sofistike efektler oluşturabiliriz. Bunlardan biri, bir görüntünün parçalarının bazı metni kapsadığı örneğimizde bulunabilir; Bir kullanıcı yukarı ve aşağı kaydırıldığında, metnin bazı bölümleri gösterilir / gizlenir. Bu, sayfa başlığının dağların arkasında bulunduğu izlenimini verir. Bu efekti oluşturmak için bazı püf noktaları gereklidir ve CSS maskelerinin akıllıca uygulaması bunu başarmamıza yardımcı olacaktır.

Seçili bir arka plan görüntüsüne ve içinde iki başlığa sahip bir başlık oluşturalım. Bunlardan biri birincil olan olacaktır (birinci başlık seviyesi).

 & lt; başlık ve gt;
        Bu, bu; / H3 ve GT;
        & lt; h1 & gt; benim maceram & lt; / h1 & gt;
& lt; / başlık ve gt;

Başlığın metni içinde tutulacak & lt; span & gt; etiket. Bu ortak bir şey değil, ancak bu durumda, konteynere değil, başlığa maskeleme uygulayacağız.

 başlık {
    Genişlik: 100vw;
    Yükseklik: 80vh;
    Üst: 0;
    Sol: Otomatik;
    Arka plan: URL (../ Resimler / Landscape.JPG) Merkezi Üst YOEL;
    Arka plan boyutu: Kapak;
}
h1 {
    maske: URL (.. / Resim / mask.svg # maskid);
    -Webkit-maske: URL (../ görüntüler / manzara-mask.png)
merkezin üstü tekrar yok;
    Maske boyutu: Kapak;
    -WebKit-Mask-Boyut: Kapak;
    Genişlik: 100vw;
    Yükseklik: 80vh;
    Renk: #FFF;
    Yazı tipi boyutu: 100px;
    Konum: Göreceli;
}
h1 span {
    Konum: Sabit;
    Ekran: satır içi blok;
    Metin Hizası: Merkez;
    Yazı Tipi ailesi: 'Libre Baskerville', Serif;
    Genişlik: 100vw;
    Üst: 80px;
    Yazı tipi tarzı: italik;
}

CSS kırpma kullanarak görüntüleri kesin

CSS clipping example — Kırpma yolları bu örnekte bitki görüntüsünü kesmenizi sağlar

Başka bir örneği keşfedelim ve CSS kırpma hakkında daha fazla bilgi edelim. Kısacası, kırpma hangi görüntü alanının görünmesi gerektiğini tanımlar. Kırpma kağıdın parçalarını doğramaya benzer. Şekli sınırının klip yolu olarak adlandırılır: yolun dışındaki herhangi bir şey gizlenirken, yolun içindeki herhangi bir şey görülebilir. Bir klip yoluyla, ağır png dosyalarını kullanmak yerine resminizden arka planı kaldırabilirsiniz. Bunun için zaten kesintinin şeklini hazırlamamız gerekiyor.

Bu alıştırmada amaç, arka planı çıkararak bitkiyi görüntüden çıkarmaktır. SVG kodunu dosyamızdan kopyalayabilir ve bir HTML belgesine yapıştırabiliriz. Klip yolu içine yerleştirilmelidir & lt; defs & gt; & lt; / defs & gt; Etiketler.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; Clipappaty id = "klipsli bitki" & gt;
     & lt; path d = "m293.2,524.8c0,3.3,0 ... [ve daha fazla sayı]" & gt;
     & lt; / Clipappated & Gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div sınıf = "bitki" & gt;

Daha sonra, SVG kodunda tanımlanan yola kolayca referans verebiliriz. Url işlevi.

 .plant {
    Yükseklik: 700px;
    arka plan-resim: URL (../ Resimler / Plant.jpg);
    Arka plan boyutu: Kapak;
    Konum: Göreceli;
    Background-yineleme: Yok hayır;
    -Webkit-klip-yol: URL ("# klipsli bitki");
    klip-yol: URL ("# klipsli bitki");}

At gözlüklerini çıkar

clipping in CSS example — Kullanabilirsiniz **şekilsiz** ve **biçimsiz** her türlü şekil oluşturmak için

Hangi metin kaplarının her zaman dikdörtgen olması gerektiğini söyledi? İçerik, uygulayarak her türlü farklı şekillerde kesilebilir. biçimsiz ve şekilsiz İçeriğinizi CSS'de özel yollar etrafına sarmanızı sağlayan özellikler.

Peki nasıl çalışır? Basitçe başvurmak biçimsiz verilen yüzlü görüntüye veya konteynere. Bunu not etmek önemlidir. şamandıra Mülkiyet ve elemanın boyutları - yükseklik veya genişlik - aksi takdirde çalışılmamalıdır. Kullanabilirsiniz URL () Etkinleştiren işlev biçimsiz Bir SVG dosyasındaki yola göre bir öğe şeklini tanımlamak için özellik.

 .A-Letter {
    arka plan-resim: URL ('../ imgeler / gold-bg.jpg');
    Arka plan boyutu: 1000px;
    -Webkit-mask-image: URL ('../ imgeler / a-letter2.svg');
    -Webkit-mask-kompozit: Kaynak-çıkış;
    -Webkit-mask-yineleme: tekrar yok;
    -WebKit-Mask Boyutu: 300px;
    Genişlik:% 100;
    Yükseklik: 60vh;
    Konum: Göreceli;
    Üst: 0px;
    Arka plan eki: Sabit;
    Şamandıra: Sol;
    Ekran: satır içi blok;
    Genişlik: 310px;
    Şekil-marj: 23px;
    Şekil-dış: URL ('../ imgons / mask.svg');
}

biçimsiz Mülkiyet, şamandıra alanı dışındaki bir öğe hakkında hiçbir şey değiştirmez. Bu, herhangi bir sınırın ve arka plan görüntünün, eleman üzerinde oluşturulan şekle uyum sağlamadığı anlamına gelir. Bu, neden başvurmamızın nedeni budur. maske görüntüsü Özellik - tanımlanmış şekle eşleştirmek için öğenin arka planını kesmek için.

Dikkat edilmesi gereken önemli bir şey, biçimsiz Özellik yalnızca CORS özellikli dosyalarla çalışır. CORS, çapraz kökeni kaynak paylaşımını sağlar.

Bu özel durumda, onu görüntülemenin en iyi yolu yerelhost kullanmaktır, aksi takdirde sadece tarayıcınızda açarsanız işe yaramaz.

Deneme yaparken, lütfen belirtilen özelliklerin tümünün tüm tarayıcılar tarafından desteklenmemesini unutmayın, bu yüzden onları kontrol etmeye değer İşte . En son örnek Firefox, Opera ve IE'de çalışmıyor, ancak umarım tüm tarayıcılar için yakında temin edilebilir. Ve projenizi saklamak için birçok belge varsa, güvenli bir şekilde güvende tutun. Bulut depolama .

Daha fazla oku:

CSS'de değişken yazı tiplerine başlayın
CSS ızgarasını kullanmak için kapsamlı bir rehber
Şimdi yeni CSS ne zaman çalışıyor?

CSS ile tarayıcıda kolaj efektleri oluşturun

İhtiyacın olacak:

Metin üst üste binen görüntüleri maske

CSS kırpma kullanarak görüntüleri kesin

At gözlüklerini çıkar

Nasıl Yapılır - En Popüler Makaleler

Hayvanlar nasıl çizilir: 15 En İyi İpuçları

Değişken Yazı Tiplerini Kullanmanın 4 Adımları

Afinity Tasarımcısı: İhracat Kişi Nasıl Kullanılır

Gerçekçi bir dijital insan oluşturun

19. yüzyıl master gibi boyanır

Manga tarzı saçların hareket halindeki nasıl oluşturulacağı

UnderPainting'i ve bunun nasıl en iyi şekilde kullanılacağını keşfedin

WordPress Web Sitenizi Çok Dilde Nasıl Yapılır

Kategoriler