CSS ve SVG kırpma ve maskeleme teknikleri nasıl kullanılır?

SVG'ler web üzerinde çalışmak için harikadır ve kırpma ve maskeleme, web grafiklerinizin parçalarını göstermenin veya gizlemenin bazı ilginç yollarına izin verir. Bu teknikleri kullanmak aynı zamanda tasarımlarınızda daha fazla esneklik sağlar çünkü manuel olarak değişiklik yapmanız ve yeni görüntüler oluşturmanız gerekmez – bunların hepsi kodla yapılır. CSS kırpma ve maskeleme tekniklerinin bir kombinasyonunu kullanarak, web sitenizin grafikleri için birçok seçeneğe sahip olacaksınız.

Bazı şeyleri netleştirmeye yardımcı olmak için, maskeleme ve kırpma, görüntüleri CSS ile değiştirmenin iki farklı yoludur. Kırpma ile başlayalım.

Kırpma temelleri

Photoshop kullandıysanız, muhtemelen Kırpma Maskelerine zaten aşinasınızdır. Benzer bir yaklaşımdır. Kırpma, bir görüntünün veya öğenin üzerine daire veya üçgen gibi bir vektör şekli yerleştirmeyi içerir. Şeklin arkasındaki görüntünün herhangi bir kısmı görünür olacak, şeklin sınırları dışındaki her şey gizlenecektir.

Örneğin, bir orman görüntüsünün üstünde bir üçgen kırpma maskesi varsa, orman görüntüsünü üçgen şeklinde görürsünüz. Şeklin sınırı, amortismanlı clip özelliğiyle karıştırılmaması için klip yolu olarak adlandırılır. Klip clip-path özelliğini kullanarak klip yolunu oluşturursunuz.

Not: Bunu canlı sitenizde denemeyin

Unutmayın: Hiçbir şeyin bozulmadığından emin olmak için kodu asla doğrudan sitenizde değiştirmemelisiniz. Ücretsiz yerel geliştirme uygulamamız Local, bu öğreticiyi güvenle takip edebileceğiniz bir test ortamı oluşturmanıza yardımcı olacaktır.

Hareket halinde kırpma

Klipler her zaman vektör yollarıdır. Anlamak kafa karıştırıcı olabilir, ancak yolun dışındaki her şey gizlenecek, yolun içindeki her şey görünür olacak. Bunu daha iyi anlamak ve bunu kendiniz test etmek için CodePen'deki örneğe bakın.

Örnekten HTML yapısının bir pasajı:

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

Bu, kırpmanın gerçekleşmesini sağlayan CSS'dir:

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

HTML'de clipPath kimliğine nerede başvurulduğunu ve kırpmayı yapmak için clip-path URL'sini nasıl kullandığını görebilirsiniz.

kırpma aracı

Clippy, CSS klip yolları oluşturmak için harika bir araçtır. Özelleştirilebilen çok çeşitli başlangıç ​​şekilleri ve boyutları vardır.

Maskeleme temelleri

Maskeleme, bir görüntünün bir bölümünü veya sayfadaki başka bir öğeyi gizlemek için bir PNG görüntüsü, CSS gradyanı veya bir SVG öğesi kullanılarak yapılır. SVG grafiklerine odaklanacağız, ancak bunun diğer görüntü türleri veya stilleriyle yapılabileceğini unutmayın.

maske özelliği ve maske öğesi

Yalnızca görselleştirmeye yardımcı olacak bir tazeleme, maskelenen öğenin "orijinal" (maske uygulanmadan önce) görüntü olduğunu akılda tutmak önemlidir. Resmin tamamını görmek istemeyebilirsiniz, bu nedenle bazı kısımlarını gizlemek CSS mask özelliği ile yapılır. mask , birazdan inceleyeceğimiz bir grup bireysel özelliğin CSS kısaltmasıdır. SVG <mask> öğesi, maskeleme efektleri eklemek için bir SVG grafiği içinde kullanılır. Bu örnekte, maske bir dairedir ve uygulanan bir degrade de vardır.

SVG grafiğinde SVG maske öğesini kullanma

SVG <mask> için bir fikir edinmek için bir SVG grafiği ile maskeleyeceğiz.

İlk bakışta biraz karmaşık olabilir, ancak hepsi birlikte çalışarak alttaki görüntüyü maskeler. Arka plan olarak gerçek bir görüntümüz var, peki SVG nerede devreye giriyor? Kırpma örneklerinden farklı olarak, bu arka plan görüntüsü teknik olarak bir SVG öğesinin içindedir. Bu maskeyi resme uygulamak için CSS kullanacağız. Özellikler SVG mask öğesinden gelecek ve ona masked-element kimliğini vereceğiz.

Bunu çalışırken görmek için bu Codepen örneğine bakın. İşte maskeli SVG grafiğinin çalışma kodu:

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

Bu CSS ile maskenin nerede bulunacağını belirtiyoruz. #mask-this:

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

Daire şeklinde bir eğim fark ettiniz mi? Maske için daire şeklinin ayarlanmasının yanı sıra bir degrade uygulandı.

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

SVG metin maskeleme

Metin maskeleme, bir metin bloğu aracılığıyla bir görüntü göstermek gibi oldukça güzel şeyler yapabilir. İyi haber şu ki, bir SVG maskesinin içinde bir metin öğesi kullanılabilir. Gelecekte tarayıcı desteği arttıkça, bu, görüntüleri ve tipografiyi birleştirmenin gerçekten ilginç bir yolu olabilir.

İşte neler olduğuna dair temel bir açıklama. SVG maskesinin içinde bir SVG metin öğesi vardır. Beyaz için, maskelenmiş metnin etrafındaki oval alanı oluşturan RGB değerini belirledik. Oval alanın arkasındaki herhangi bir şey metnin içinden görünür ve bir kesiklik hissi verir.

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

Tam olarak anlamak için, kodu biraz oynamak ve denemek faydalı olacaktır. Bu Codepen'de renkleri değiştirmeyi, metni değiştirmeyi ve boyutları ayarlamayı deneyin.

maske-görüntü özelliği

Bir görüntü bildirilebilir ve mask-image bir URL değerine ayarlanabilir. mask-image , önceki örnekte gösterdiğim gibi bir PNG, SVG veya bir SVG mask öğesine referans olabilir.

Maskeleme, bir nesnenin veya öğenin bölümlerini kısmen veya tamamen gizlemek için kullanıldığından, önce maskelenecek öğe için bir dosyaya bir görüntü bağlantısı isteyeceksiniz. İşte o görüntünün neye benzediği. Maskenin hangi kısmı gösterdiğini ve gizlediğini çok belirgin hale getirmek için renklidir.

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Masked image">

Şimdiye kadar çok sayıda SVG kodu vardı, ancak bu örnek, bir SVG ile maskelenmiş bir raster görüntü olacağından biraz farklıdır.

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

mask-image özelliği, maske şeklinin bildirileceği yerdir. Bu durumda maske görüntüsü bir SVG grafiğidir. URL bağlantısının dahil edilmesi, maskenin nasıl oluşturulduğudur.

İşte Codepen'de.

Birden çok maske görüntüsünü birleştirme

Tam maskelemenin daha iyi olamayacağını düşündüğünüzde, birden fazla maske görüntüsü katmanı ayarlama seçeneği vardır. Tek yapmanız gereken, virgülle ayırarak iki (veya kendinizi hırslı hissediyorsanız daha fazla) URL değeri eklemek.

Basit maskeyi yukarıdan genişletmek için orijinal grafiğe bir ok eklenecektir. İşte iki maskenin nasıl birleştirildiği.

.combined-mask {
   mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

Tek yapmanız gereken iki değeri (virgülle) eklemek ve şimdi iki birleşik maske var, bu da maskeleme olanaklarını sonsuz hale getiriyor.

İşte Codepen'de.

mask-image basit bir degrade oluşturun

Tüm maskeler karmaşık bir şekil olmak zorunda değildir. Bazen maske olan belirli bir görüntü değil, degrade gibi basit bir maskedir. Bunu başarmanın hızlı bir yolunu arıyorsanız, mask-image özelliği uygulaması oldukça kolay bir seçenektir.

Bu örnekte, mask-image özelliği olarak bir degrade kümesine uygulanan bir sınıf vardı. Bu basit bildirimle, görüntü üzerinde bir degrade maskesi oluşturmak kolaydı.

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

Bunu Codepen'de görün.

maske tekrar özelliği

Bir maske oluşturduktan sonra, daha fazlasını yapmak oldukça kolaydır. Özel bir desen yapmak istiyorsanız bu gerçekten işe yarar. mask-repeat özelliği, maskenin tekrarına izin verir. Daha önce hiç kiremitli bir arka plan yaptıysanız, buna benzer.

Mükemmel desenin oluşturulması için bildirilmesi gereken boyutlandırma ve maske tekrarı türü gibi akılda tutulması gereken birkaç önemli nokta vardır.

mask-size görselleştirilmesi oldukça kolaydır, özellikle burada ayarlanan piksel değeriyle.

mask-size: 200px;
webkit-mask-size: 200px;

Desen için farklı bir efekt arıyorsanız, birkaç maske tekrarı seçeneği daha vardır:

• repeat-x , x koordinatı boyunca tekrar eder.
• Repeat-y , y koordinatını aşağı doğru tekrarlar.
• space kullanılabilir alanda tekrarlanır ve yayılır.
• round , kullanılabilir alan boyunca birkaç kez tekrarlanır (ölçeklendirme, gerekirse alanı doldurmasına yardımcı olur)

tarayıcı desteği

Grafiklerle çalışmanın bu yeni yolunu seçmeden önce, tarayıcı desteğinin kırpma ve maskeleme ile tutarlı olmadığını unutmamak önemlidir. Kırpma, maskelemeye göre daha fazla desteklenir, ancak Internet Explorer kırpmayı tam olarak desteklemez. CSS maskeleri için mevcut tarayıcı desteği de oldukça sınırlıdır, bu nedenle birkaç dekoratif öğe üzerinde bir geliştirme olarak kullanılması önerilir. Bu şekilde, kullanıcının tarayıcısı tarafından desteklenmiyorsa, içerik görüntüleme deneyimini etkilemez.

İşleri test etmek ve maskelerinizin ve kırpıntılarınızın desteklenip desteklenmediğini görmek için bir JSFiddle veya Codepen yapmanızı ve ardından farklı tarayıcılarda denemenizi öneririm. Tarayıcı desteği son yıllarda arttı ve sonunda tam olarak destekleneceği bir noktaya gelecek. Sınırlamaların sizi hayal kırıklığına uğratmasına izin vermeyin - oyunun önünde olmak her zaman iyidir ve destek daha yaygın hale geldiğinde, grafiklerinizde tam olarak nasıl devrim yaratacağınızı bileceksiniz. Şüpheye düştüğünüzde, güvenilir Can I Use'a başvurduğunuzdan emin olun.

Bu örnekleri denedikten sonra, bu, maskeleme ve kırpmaya iyi bir giriş sağlamalıdır. Tarayıcı desteği şu anda sınırlı olsa da, bu muhtemelen gelecekte yaygın bir uygulama haline gelecektir. Bu tekniklerin ilginç görseller oluşturmak için nasıl kullanılabileceğini düşünmek her zaman eğlencelidir. Web grafiklerinin geleceği, bizi görüntü düzenleyicilere daha az bağımlı hale getirecek ve görüntüleri doğrudan tarayıcıda oluşturmanın ve değiştirmenin daha etkili yollarını sağlayacaktır.

Sonraki: Siteleri daha da hızlı tasarlayın!

Kolaylaştırılmış bir web tasarım sürecinin önemini anlıyorsunuz. Bir web sitesini daha hızlı tasarlamak için yapabileceğiniz her şey, cebinizde daha fazla para olduğu anlamına gelir. Bu nedenle Flywheel, size zaman kazandırmak ve işinizi en iyi şekilde yapmaya devam etmek için barındırma platformumuzu tasarladı! Bu web tasarımı ipuçları ve araçlarıyla daha fazla proje tamamlayabilir ve işinizi büyütmek için daha fazla zaman harcayabilirsiniz.

Bu kılavuzda, nasıl daha hızlı çalışacağınıza ve WordPress iş akışınızı nasıl hızlandıracağınıza dair ipuçlarını ele alacağız. İlk site kurulumundan canlı yayınlamaya kadar, günlük işlerinizden saatlerce çalışmayı nasıl azaltabileceğinizi keşfedin! Bugün indirin.

Bu makale ilk olarak 3 Ağustos 2016'da yayınlandı. En son 6 Kasım 2018'de güncellendi.