{"id":40625,"date":"2026-02-28T02:40:46","date_gmt":"2026-02-27T23:40:46","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=40625"},"modified":"2026-02-28T02:40:46","modified_gmt":"2026-02-27T23:40:46","slug":"csste-mask-image-ozelligi-ile-gorsel-maskeleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/","title":{"rendered":"CSS’te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme"},"content":{"rendered":"

<\/p>\n

CSS’te mask-image<\/code> \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme<\/h2>\n

CSS, web tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricilerine g\u00f6rseller \u00fczerinde karma\u015f\u0131k ve yarat\u0131c\u0131 manip\u00fclasyonlar yapma imkan\u0131 sunan g\u00fc\u00e7l\u00fc ara\u00e7larla doludur. Bu ara\u00e7lardan biri de mask-image<\/code> \u00f6zelli\u011fidir. mask-image<\/code>, g\u00f6rselleri veya di\u011fer HTML \u00f6\u011felerini belirli bir \u015fekil, gradyan veya desen kullanarak maskelemenize olanak tan\u0131r. Bu sayede, geleneksel dikd\u00f6rtgen kutular\u0131n \u00f6tesine ge\u00e7erek web sayfalar\u0131n\u0131za dinamik ve estetik bir boyut katabilirsiniz. Bu makalede, mask-image<\/code> \u00f6zelli\u011fini derinlemesine inceleyecek, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, hangi t\u00fcr maskelerin kullan\u0131labilece\u011fini, ilgili di\u011fer maskeleme \u00f6zelliklerini, pratik kullan\u0131m senaryolar\u0131n\u0131, taray\u0131c\u0131 uyumlulu\u011funu ve clip-path<\/code> gibi benzer \u00f6zelliklerle farklar\u0131n\u0131 detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z.<\/p>\n

Giri\u015f: CSS Maskeleme ve mask-image<\/code>‘in Yeri<\/h3>\n

Web tasar\u0131m\u0131nda g\u00f6rseller, kullan\u0131c\u0131 deneyiminin ve esteti\u011fin temel ta\u015flar\u0131ndan biridir. Ancak g\u00f6rselleri her zaman standart dikd\u00f6rtgen veya kare \u015fekillerde kullanmak, bazen monotonlu\u011fa yol a\u00e7abilir veya tasar\u0131m vizyonunu k\u0131s\u0131tlayabilir. \u0130\u015fte bu noktada CSS maskeleme devreye girer. Maskeleme, bir g\u00f6rselin veya \u00f6\u011fenin yaln\u0131zca belirli bir k\u0131sm\u0131n\u0131n g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 sa\u011flarken, geri kalan\u0131n\u0131 \u015feffaf hale getirme veya gizleme i\u015flemidir. Bu i\u015flem, bir maske katman\u0131 kullan\u0131larak ger\u00e7ekle\u015ftirilir.<\/p>\n

mask-image<\/code> \u00f6zelli\u011fi, CSS maskelemenin merkezinde yer al\u0131r. Temel olarak, bir HTML \u00f6\u011fesinin g\u00f6rsel i\u00e7eri\u011fini, belirtilen bir g\u00f6rsel (PNG, SVG, JPG vb.) veya CSS gradyan\u0131 kullanarak kesip bi\u00e7menize olanak tan\u0131r. Bu, sanki bir ka\u011f\u0131t par\u00e7as\u0131n\u0131 makasla kesiyormu\u015f gibi d\u00fc\u015f\u00fcnebilirsiniz; ancak burada “makas” dijital bir g\u00f6rsel veya gradyan\u0131n alfa kanal\u0131d\u0131r. mask-image<\/code> sayesinde, g\u00f6rselleri daireler, dalgalar, \u00f6zel logolar veya karma\u015f\u0131k desenler gibi farkl\u0131 \u015fekillerde g\u00f6r\u00fcnt\u00fcleyebilir, hatta metinlerin i\u00e7ini g\u00f6rsellerle doldurabilirsiniz. Bu, web sitelerine benzersiz bir g\u00f6rsel \u00e7ekicilik katman\u0131n yan\u0131 s\u0131ra, yarat\u0131c\u0131 aray\u00fczler ve etkile\u015fimler olu\u015fturmak i\u00e7in de geni\u015f olanaklar sunar.<\/p>\n

CSS Maskeleme Temelleri<\/h3>\n

CSS maskeleme, bir \u00f6\u011fenin g\u00f6r\u00fcn\u00fcr alan\u0131n\u0131 kontrol etmek i\u00e7in bir “maske” kullan\u0131r. Bu maske, genellikle bir alfa kanal\u0131 (\u015feffafl\u0131k) i\u00e7eren bir g\u00f6rsel veya bir gradyan olabilir. Maske, hedef \u00f6\u011fenin \u00fczerine yerle\u015ftirilir ve maskenin opak k\u0131s\u0131mlar\u0131 hedef \u00f6\u011fenin g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 sa\u011flarken, \u015feffaf k\u0131s\u0131mlar\u0131 hedef \u00f6\u011feyi gizler.<\/p>\n

mask-image<\/code> Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n

mask-image<\/code> \u00f6zelli\u011fi, bir \u00f6\u011feye uygulanacak maske g\u00f6rselini veya gradyan\u0131n\u0131 belirtir. Bu maske, hedef \u00f6\u011fenin i\u00e7eri\u011finin hangi k\u0131s\u0131mlar\u0131n\u0131n g\u00f6sterilece\u011fini ve hangi k\u0131s\u0131mlar\u0131n\u0131n gizlenece\u011fini belirlemek i\u00e7in kullan\u0131l\u0131r. \u00c7al\u0131\u015fma prensibi olduk\u00e7a basittir:<\/p>\n

1. Maske Kayna\u011f\u0131:<\/strong> mask-image<\/code> \u00f6zelli\u011fi ile bir g\u00f6rsel (URL arac\u0131l\u0131\u011f\u0131yla) veya bir CSS gradyan\u0131 tan\u0131mlars\u0131n\u0131z.
\n2. Alfa Kanal\u0131 Etkisi:<\/strong>
\n * E\u011fer maske kayna\u011f\u0131 bir g\u00f6rsel<\/strong> ise (\u00f6rne\u011fin PNG), g\u00f6rselin alfa kanal\u0131 (\u015feffafl\u0131k bilgisi) do\u011frudan maske olarak kullan\u0131l\u0131r. G\u00f6rselin tamamen opak oldu\u011fu yerler (alfa de\u011feri 1), hedef \u00f6\u011fenin tamamen g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 sa\u011flar. G\u00f6rselin tamamen \u015feffaf oldu\u011fu yerler (alfa de\u011feri 0), hedef \u00f6\u011feyi tamamen gizler. Yar\u0131 saydam k\u0131s\u0131mlar ise hedef \u00f6\u011fenin yar\u0131 saydam g\u00f6r\u00fcnmesini sa\u011flar.
\n * E\u011fer maske kayna\u011f\u0131 bir gradyan<\/strong> ise, gradyan\u0131n renk de\u011ferleri genellikle parlakl\u0131k (luminance) veya alfa kanal\u0131 olarak yorumlan\u0131r. Varsay\u0131lan olarak, gradyan\u0131n parlakl\u0131\u011f\u0131 kullan\u0131l\u0131r: daha a\u00e7\u0131k renkler (beyaz gibi) hedef \u00f6\u011fenin daha g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 sa\u011flarken, daha koyu renkler (siyah gibi) hedef \u00f6\u011fenin daha az g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 veya tamamen gizlenmesini sa\u011flar. mask-mode<\/code> \u00f6zelli\u011fi ile bu davran\u0131\u015f de\u011fi\u015ftirilebilir.
\n3. Uygulama:<\/strong> Belirlenen maske, hedef \u00f6\u011fenin \u00fczerine yerle\u015ftirilir ve \u00f6\u011fenin i\u00e7eri\u011fi maskenin \u015fekline g\u00f6re kesilir veya opakl\u0131\u011f\u0131 ayarlan\u0131r.<\/p>\n

Desteklenen Maske T\u00fcrleri<\/h4>\n

mask-image<\/code> \u00f6zelli\u011fi, \u00e7e\u015fitli maske t\u00fcrlerini destekler, bu da geli\u015ftiricilere b\u00fcy\u00fck bir esneklik sunar:<\/p>\n

* URL() ile G\u00f6rsel Maskeleri:<\/strong>
\n * PNG ve WebP:<\/strong> \u015eeffaf arkaplan\u0131 destekleyen bu formatlar, alfa kanal\u0131n\u0131 do\u011frudan maske olarak kullanabildikleri i\u00e7in idealdir. Maskenin \u015fekli, g\u00f6rseldeki opak alanlar taraf\u0131ndan belirlenir.
\n * SVG:<\/strong> Vekt\u00f6r tabanl\u0131 SVG g\u00f6rselleri, \u00f6l\u00e7eklenebilir ve keskin kenarl\u0131 maskeler olu\u015fturmak i\u00e7in m\u00fckemmeldir. SVG’lerin i\u00e7indeki <\/code> \u00f6\u011fesi de do\u011frudan kullan\u0131labilir.
\n * JPG:<\/strong> JPG gibi alfa kanal\u0131 olmayan g\u00f6rseller de kullan\u0131labilir, ancak bu durumda maskeleme genellikle g\u00f6rselin parlakl\u0131k de\u011ferlerine g\u00f6re yap\u0131l\u0131r. Beyaz alanlar opak, siyah alanlar \u015feffaf olur.
\n* Gradyan Maskeleri:<\/strong>
\n * linear-gradient()<\/code>:<\/strong> D\u00fcz bir \u00e7izgi boyunca renk ge\u00e7i\u015fi olu\u015fturur. Dikey, yatay veya \u00e7apraz ge\u00e7i\u015flerle maskeler olu\u015fturmak i\u00e7in idealdir. \u00d6rne\u011fin, bir g\u00f6rseli yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru solukla\u015ft\u0131rmak.
\n * radial-gradient()<\/code>:<\/strong> Bir merkezden d\u0131\u015far\u0131ya do\u011fru dairesel veya eliptik renk ge\u00e7i\u015fleri olu\u015fturur. G\u00f6rselleri dairesel bir \u015fekilde maskelemek veya merkezden d\u0131\u015far\u0131ya do\u011fru solukla\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r.
\n * conic-gradient()<\/code>:<\/strong> Bir merkez etraf\u0131nda d\u00f6nen (pasta dilimi gibi) renk ge\u00e7i\u015fleri olu\u015fturur. Daha karma\u015f\u0131k dairesel maskeleme efektleri i\u00e7in kullan\u0131labilir.<\/p>\n

Her bir maske t\u00fcr\u00fc, farkl\u0131 g\u00f6rsel efektler ve tasar\u0131m olas\u0131l\u0131klar\u0131 sunar.<\/p>\n

mask-image<\/code> \u00d6zelli\u011finin Detayl\u0131 \u0130ncelenmesi<\/h3>\n

mask-image<\/code> \u00f6zelli\u011fi, tek ba\u015f\u0131na kullan\u0131labilece\u011fi gibi, di\u011fer mask-*<\/code> \u00f6zellikleri ile birle\u015ftirilerek daha karma\u015f\u0131k efektler elde etmek i\u00e7in de kullan\u0131labilir.<\/p>\n

S\u00f6zdizimi ve Kullan\u0131m<\/h4>\n

mask-image<\/code> \u00f6zelli\u011finin temel s\u00f6zdizimi a\u015fa\u011f\u0131daki gibidir:<\/p>\n

.element {\n  mask-image: url('maske.png'); \/ G\u00f6rsel maske <\/em>\/\n  mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); \/ Gradyan maske <\/em>\/\n  mask-image: url('maske.svg'), radial-gradient(circle, white, transparent); \/ Birden fazla maske <\/em>\/\n}<\/code><\/pre>\n
Birden fazla maske belirtildi\u011finde, bunlar virg\u00fclle ayr\u0131l\u0131r ve katmanlar halinde \u00fcst \u00fcste uygulan\u0131r. \u0130lk belirtilen maske en \u00fcstte yer al\u0131r.<\/p>\n
URL() ile Resim Maskesi<\/h4>\n
G\u00f6rsel tabanl\u0131 maskeler, \u00f6nceden haz\u0131rlanm\u0131\u015f bir g\u00f6rselin alfa kanal\u0131n\u0131 veya parlakl\u0131\u011f\u0131n\u0131 kullanarak \u00f6\u011feyi \u015fekillendirir.<\/p>\n
PNG veya WebP gibi \u015eeffaf Arkaplanl\u0131 G\u00f6rsellerin Kullan\u0131m\u0131:<\/strong>
\nBu formatlar, maskeleme i\u00e7in en yayg\u0131n ve etkili y\u00f6ntemdir, \u00e7\u00fcnk\u00fc alfa kanal\u0131 do\u011frudan \u015feffafl\u0131k bilgisini ta\u015f\u0131r.<\/p>\n
<\/div><\/code><\/pre>\n
.masked-image-png {\n  width: 300px;\n  height: 300px;\n  background-image: url('https:\/\/picsum.photos\/300\/300?random=1'); \/ Maskelenecek g\u00f6rsel <\/em>\/\n  background-size: cover;\n  -webkit-mask-image: url('maske_yildiz.png'); \/ Y\u0131ld\u0131z \u015feklinde \u015feffaf PNG <\/em>\/\n  mask-image: url('maske_yildiz.png');\n  -webkit-mask-size: cover;\n  mask-size: cover;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n}<\/code><\/pre>\n
Burada maske_yildiz.png<\/code> dosyas\u0131, ortas\u0131nda bir y\u0131ld\u0131z \u015feklinde opak bir alan ve geri kalan\u0131nda \u015feffaf bir arkaplan i\u00e7eren bir g\u00f6rsel olmal\u0131d\u0131r. Hedef \u00f6\u011fe (burada background-image<\/code> ile g\u00f6sterilen rastgele foto\u011fraf), y\u0131ld\u0131z \u015feklindeki alanda g\u00f6r\u00fcn\u00fcr olacakt\u0131r.<\/p>\n
Gri Tonlamal\u0131 G\u00f6rsellerin Kullan\u0131m\u0131 (Alfa Kanal\u0131 Olmayan):<\/strong>
\nJPG gibi alfa kanal\u0131 olmayan g\u00f6rseller kullan\u0131ld\u0131\u011f\u0131nda, maskeleme genellikle g\u00f6rselin parlakl\u0131k de\u011ferlerine g\u00f6re yap\u0131l\u0131r.
\n*   Beyaz (veya a\u00e7\u0131k tonlar):<\/strong> Hedef \u00f6\u011fe tamamen g\u00f6r\u00fcn\u00fcr.
\n*   Siyah (veya koyu tonlar):<\/strong> Hedef \u00f6\u011fe tamamen gizlenir.
\n*   Gri tonlar:<\/strong> Hedef \u00f6\u011fe yar\u0131 saydam g\u00f6r\u00fcn\u00fcr (grinin tonuna ba\u011fl\u0131 olarak).<\/p>\n
<\/div><\/code><\/pre>\n
.masked-image-grayscale {\n  width: 300px;\n  height: 300px;\n  background-image: url('https:\/\/picsum.photos\/300\/300?random=2');\n  background-size: cover;\n  \/ Gri tonlamal\u0131, ortas\u0131 beyaz, kenarlar\u0131 siyaha do\u011fru ge\u00e7i\u015f yapan bir g\u00f6rsel <\/em>\/\n  -webkit-mask-image: url('maske_radial_fade.jpg');\n  mask-image: url('maske_radial_fade.jpg');\n  -webkit-mask-size: cover;\n  mask-size: cover;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, maske_radial_fade.jpg<\/code> ortas\u0131 beyaz, kenarlara do\u011fru siyaha ge\u00e7i\u015f yapan bir daire \u015feklinde bir g\u00f6rselse, hedef g\u00f6rsel merkezde tamamen g\u00f6r\u00fcn\u00fcr olacak ve kenarlara do\u011fru yava\u015f\u00e7a solukla\u015facakt\u0131r.<\/p>\n
Gradyan Maskeleri<\/h4>\n
CSS gradyanlar\u0131, dinamik ve esnek maskeler olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. \u00d6zellikle yumu\u015fak ge\u00e7i\u015fler ve solukla\u015ft\u0131rma efektleri i\u00e7in idealdirler. Gradyan maskeleri genellikle rgba()<\/code> renk de\u011ferleri kullan\u0131larak \u015feffafl\u0131k ge\u00e7i\u015fleri olu\u015fturur.<\/p>\n
linear-gradient()<\/code> ile Maskeleme:<\/strong>
\nBelirli bir y\u00f6nde do\u011frusal bir \u015feffafl\u0131k ge\u00e7i\u015fi olu\u015fturur.<\/p>\n
\"Manzara\"<\/code><\/pre>\n
.masked-gradient-linear {\n  width: 400px;\n  height: 200px;\n  \/ Soldan sa\u011fa do\u011fru tamamen g\u00f6r\u00fcn\u00fcrden tamamen \u015feffafa ge\u00e7i\u015f <\/em>\/\n  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);\n  mask-image: linear-gradient(to right, black 0%, transparent 100%);\n}<\/code><\/pre>\n
Bu \u00f6rnekte, g\u00f6rselin sol taraf\u0131 tamamen g\u00f6r\u00fcn\u00fcrken, sa\u011f tarafa do\u011fru yava\u015f\u00e7a \u015feffafla\u015facakt\u0131r. black<\/code> rengi, gradyan maskelerinde varsay\u0131lan olarak opakl\u0131\u011f\u0131 temsil ederken, transparent<\/code> tamamen \u015feffafl\u0131\u011f\u0131 temsil eder. rgba(0,0,0,1)<\/code> ve rgba(0,0,0,0)<\/code> de ayn\u0131 etkiyi yarat\u0131r.<\/p>\n
radial-gradient()<\/code> ile Maskeleme:<\/strong>
\nBir merkezden d\u0131\u015far\u0131ya do\u011fru dairesel veya eliptik bir \u015feffafl\u0131k ge\u00e7i\u015fi olu\u015fturur.<\/p>\n
<\/div><\/code><\/pre>\n
.masked-gradient-radial {\n  width: 300px;\n  height: 300px;\n  background-image: url('https:\/\/picsum.photos\/300\/300?random=4');\n  background-size: cover;\n  \/ Merkezden d\u0131\u015far\u0131ya do\u011fru tamamen g\u00f6r\u00fcn\u00fcrden tamamen \u015feffafa ge\u00e7i\u015f <\/em>\/\n  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);\n  mask-image: radial-gradient(circle at center, black 0%, transparent 70%);\n}<\/code><\/pre>\n
Bu \u00f6rnekte, g\u00f6rselin merkezi tamamen g\u00f6r\u00fcn\u00fcrken, d\u0131\u015f kenarlara do\u011fru dairesel bir \u015fekilde \u015feffafla\u015facakt\u0131r.<\/p>\n
conic-gradient()<\/code> ile Maskeleme:<\/strong>
\nBir merkez etraf\u0131nda d\u00f6nen bir renk ge\u00e7i\u015fi olu\u015fturur, pasta dilimi veya radar ekran\u0131 benzeri efektler i\u00e7in kullan\u0131l\u0131r.<\/p>\n
<\/div><\/code><\/pre>\n
.masked-gradient-conic {\n  width: 300px;\n  height: 300px;\n  background-image: url('https:\/\/picsum.photos\/300\/300?random=5');\n  background-size: cover;\n  \/ 0 dereceden 90 dereceye kadar opak, sonras\u0131 \u015feffaf <\/em>\/\n  -webkit-mask-image: conic-gradient(from 0deg, black 0% 90deg, transparent 90% 360deg);\n  mask-image: conic-gradient(from 0deg, black 0% 90deg, transparent 90% 360deg);\n}<\/code><\/pre>\n
Bu \u00f6rnekte, g\u00f6rselin sadece 0 ile 90 derece aras\u0131ndaki \u00e7eyrek dilimi g\u00f6r\u00fcn\u00fcr olacakt\u0131r.<\/p>\n
Gradyanlar\u0131n Opakl\u0131k ve \u015eeffafl\u0131k \u00dczerindeki Etkisi:<\/strong>
\nGradyan maskelerinde, renklerin parlakl\u0131\u011f\u0131 veya alfa kanal\u0131, maskenin opakl\u0131\u011f\u0131n\u0131 belirler.
\n*   black<\/code> (veya rgba(0,0,0,1)<\/code>): Tamamen opak (g\u00f6r\u00fcn\u00fcr).
\n*   white<\/code> (veya rgba(255,255,255,1)<\/code>): mask-mode: luminance<\/code> varsay\u0131lan oldu\u011funda tamamen opak (g\u00f6r\u00fcn\u00fcr). mask-mode: alpha<\/code> ise tamamen opak (g\u00f6r\u00fcn\u00fcr).
\n*   transparent<\/code> (veya rgba(0,0,0,0)<\/code>): Tamamen \u015feffaf (gizli).
\n*   Gri tonlar veya rgba()<\/code>‘n\u0131n alfa de\u011feri 0 ile 1 aras\u0131nda olan renkler: Yar\u0131 saydaml\u0131k.<\/p>\n
Bu, gradyanlar\u0131 kullanarak \u00e7ok ince ve kontroll\u00fc ge\u00e7i\u015fler olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n
\u0130lgili Maskeleme \u00d6zellikleri<\/h3>\n
mask-image<\/code> tek ba\u015f\u0131na g\u00fc\u00e7l\u00fc olsa da, CSS maskeleme mod\u00fcl\u00fc bir dizi ek \u00f6zellikle birlikte gelir ve bunlar mask-image<\/code> ile birle\u015ferek \u00e7ok daha karma\u015f\u0131k ve hassas kontrol sa\u011flar.<\/p>\n
mask-mode<\/code><\/h4>\n
mask-mode<\/code> \u00f6zelli\u011fi, maske katman\u0131n\u0131n nas\u0131l yorumlanaca\u011f\u0131n\u0131 belirler. \u0130ki ana de\u011feri vard\u0131r:
\n*   alpha<\/code>:<\/strong> Maske g\u00f6rselinin alfa kanal\u0131n\u0131 do\u011frudan maske olarak kullan\u0131r. Bu, PNG veya WebP gibi \u015feffafl\u0131k i\u00e7eren g\u00f6rseller i\u00e7in idealdir.
\n*   luminance<\/code> (varsay\u0131lan):<\/strong> Maske g\u00f6rselinin parlakl\u0131k de\u011ferlerini kullan\u0131r. Daha parlak pikseller (beyaza yak\u0131n) daha opak maske olu\u015ftururken, daha koyu pikseller (siyaha yak\u0131n) daha \u015feffaf maske olu\u015fturur. JPG gibi alfa kanal\u0131 olmayan g\u00f6rseller veya gradyanlar i\u00e7in varsay\u0131lan davran\u0131\u015ft\u0131r.<\/p>\n
.element {\n  mask-image: url('maske.jpg'); \/ Alfa kanal\u0131 olmayan bir g\u00f6rsel <\/em>\/\n  mask-mode: luminance; \/ Varsay\u0131lan olsa da belirtmek iyi uygulama <\/em>\/\n}\n\n.element-alpha {\n  mask-image: url('maske.png'); \/ Alfa kanal\u0131 olan bir g\u00f6rsel <\/em>\/\n  mask-mode: alpha;\n}<\/code><\/pre>\n
mask-origin<\/code><\/h4>\n
mask-origin<\/code> \u00f6zelli\u011fi, maskenin ba\u015flang\u0131\u00e7 noktas\u0131n\u0131, yani maske g\u00f6rselinin veya gradyan\u0131n\u0131n hangi referans kutusuna g\u00f6re konumland\u0131r\u0131laca\u011f\u0131n\u0131 belirler. De\u011ferleri CSS kutu modeline kar\u015f\u0131l\u0131k gelir:
\n*   content-box<\/code>:<\/strong> Maske, \u00f6\u011fenin i\u00e7erik kutusunun k\u00f6\u015fesinden ba\u015flar.
\n*   padding-box<\/code>:<\/strong> Maske, \u00f6\u011fenin dolgu kutusunun k\u00f6\u015fesinden ba\u015flar.
\n*   border-box<\/code>:<\/strong> Maske, \u00f6\u011fenin kenarl\u0131k kutusunun k\u00f6\u015fesinden ba\u015flar.
\n*   fill-box<\/code>:<\/strong> SVG \u00f6\u011feleri i\u00e7in, maske SVG’nin dolgu kutusundan ba\u015flar.
\n*   stroke-box<\/code>:<\/strong> SVG \u00f6\u011feleri i\u00e7in, maske SVG’nin kontur kutusundan ba\u015flar.
\n*   view-box<\/code>:<\/strong> SVG \u00f6\u011feleri i\u00e7in, maske SVG’nin g\u00f6r\u00fcn\u00fcm kutusundan ba\u015flar.<\/p>\n
Varsay\u0131lan de\u011fer padding-box<\/code>‘t\u0131r.<\/p>\n
.element {\n  mask-image: url('maske.png');\n  mask-origin: content-box; \/ Maskeyi i\u00e7erik kutusuna g\u00f6re hizala <\/em>\/\n}<\/code><\/pre>\n
mask-clip<\/code><\/h4>\n
mask-clip<\/code> \u00f6zelli\u011fi, maskenin uygulanaca\u011f\u0131 alan\u0131, yani maskenin hangi kutunun i\u00e7inde kesilece\u011fini belirler. mask-origin<\/code> ile benzer de\u011ferlere sahiptir:
\n*   content-box<\/code>:<\/strong> Maske, \u00f6\u011fenin i\u00e7erik kutusu i\u00e7inde kesilir.
\n*   padding-box<\/code>:<\/strong> Maske, \u00f6\u011fenin dolgu kutusu i\u00e7inde kesilir.
\n*   border-box<\/code>:<\/strong> Maske, \u00f6\u011fenin kenarl\u0131k kutusu i\u00e7inde kesilir.
\n*   fill-box<\/code>, stroke-box<\/code>, view-box<\/code>:<\/strong> SVG \u00f6\u011feleri i\u00e7in ge\u00e7erlidir.
\n*   text<\/code>:<\/strong> Bu \u00f6zel de\u011fer, maskenin do\u011frudan metin i\u00e7eri\u011fine uygulanmas\u0131n\u0131 sa\u011flar. Metnin \u015feklini alarak i\u00e7ini g\u00f6rselle doldurmak i\u00e7in kullan\u0131l\u0131r. Bu, \u00f6zellikle etkileyici tipografi efektleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fcd\u00fcr.<\/p>\n
.text-mask {\n  font-size: 80px;\n  font-weight: bold;\n  font-family: sans-serif;\n  color: transparent; \/ Metin rengini \u015feffaf yap <\/em>\/\n  background: url('texture.jpg'); \/ Metnin i\u00e7ine doldurulacak g\u00f6rsel <\/em>\/\n  background-clip: text; \/ Arkaplan\u0131 metinle k\u0131rp <\/em>\/\n  -webkit-background-clip: text; \/ Taray\u0131c\u0131 \u00f6n eki <\/em>\/\n  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.5)); \/ Metnin \u00fczerine maske <\/em>\/\n  mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.5));\n  -webkit-mask-clip: text; \/ Maskeyi metinle k\u0131rp <\/em>\/\n  mask-clip: text;\n}<\/code><\/pre>\n
Bu \u00f6rnek, metnin i\u00e7ine bir arkaplan g\u00f6rseli doldurur ve ard\u0131ndan bu metni yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru solukla\u015ft\u0131ran bir gradyan maskesi uygular.<\/p>\n
mask-size<\/code><\/h4>\n
mask-size<\/code> \u00f6zelli\u011fi, maske g\u00f6rselinin boyutunu ayarlar. background-size<\/code> ile ayn\u0131 de\u011ferleri al\u0131r:
\n*   auto<\/code>:<\/strong> Orijinal boyutunda.
\n*   contain<\/code>:<\/strong> Maske, \u00f6\u011fenin i\u00e7ine s\u0131\u011facak \u015fekilde \u00f6l\u00e7eklenir, en boy oran\u0131 korunur.
\n*   cover<\/code>:<\/strong> Maske, \u00f6\u011feyi tamamen kaplayacak \u015fekilde \u00f6l\u00e7eklenir, en boy oran\u0131 korunur.
\n*   length<\/code> (px, em, rem vb.):<\/strong> Belirli bir boyut.
\n*   percentage<\/code> (%):<\/strong> \u00d6\u011fenin boyutuna g\u00f6re y\u00fczde.<\/p>\n
.element {\n  mask-image: url('pattern.png');\n  mask-size: 50px 50px; \/ Maskeyi 50x50 piksel olarak ayarla <\/em>\/\n}<\/code><\/pre>\n
mask-position<\/code><\/h4>\n
mask-position<\/code> \u00f6zelli\u011fi, maske g\u00f6rselinin konumunu ayarlar. background-position<\/code> ile ayn\u0131 de\u011ferleri al\u0131r:
\n*   top<\/code>, bottom<\/code>, left<\/code>, right<\/code>, center<\/code>:<\/strong> Anahtar kelimeler.
\n*   length<\/code> (px, em, rem vb.):<\/strong> Belirli koordinatlar.
\n*   percentage<\/code> (%):<\/strong> \u00d6\u011fenin boyutuna g\u00f6re y\u00fczde.<\/p>\n
.element {\n  mask-image: url('logo.svg');\n  mask-position: center center; \/ Maskeyi merkeze hizala <\/em>\/\n}<\/code><\/pre>\n
mask-repeat<\/code><\/h4>\n
mask-repeat<\/code> \u00f6zelli\u011fi, maske g\u00f6rselinin tekrar davran\u0131\u015f\u0131n\u0131 ayarlar. background-repeat<\/code> ile ayn\u0131 de\u011ferleri al\u0131r:
\n*   repeat<\/code> (varsay\u0131lan):<\/strong> Maske hem yatay hem dikey olarak tekrarlan\u0131r.
\n*   repeat-x<\/code>:<\/strong> Maske sadece yatay olarak tekrarlan\u0131r.
\n*   repeat-y<\/code>:<\/strong> Maske sadece dikey olarak tekrarlan\u0131r.
\n*   no-repeat<\/code>:<\/strong> Maske sadece bir kez g\u00f6r\u00fcnt\u00fclenir.
\n*   space<\/code>:<\/strong> Maske tekrarlan\u0131r ve bo\u015f alanlar e\u015fit olarak da\u011f\u0131t\u0131l\u0131r.
\n*   round<\/code>:<\/strong> Maske tekrarlan\u0131r ve tam say\u0131 tekrarlar\u0131n\u0131 s\u0131\u011fd\u0131rmak i\u00e7in \u00f6l\u00e7eklenir.<\/p>\n
.element {\n  mask-image: url('small-pattern.png');\n  mask-repeat: repeat; \/ Maskeyi tekrarla <\/em>\/\n}<\/code><\/pre>\n
mask-composite<\/code><\/h4>\n
mask-composite<\/code> \u00f6zelli\u011fi, birden fazla maske katman\u0131 kullan\u0131ld\u0131\u011f\u0131nda, bu katmanlar\u0131n birbirleriyle nas\u0131l birle\u015ftirilece\u011fini belirler. Bu, \u00f6zellikle karma\u015f\u0131k maske efektleri olu\u015fturmak i\u00e7in geli\u015fmi\u015f bir \u00f6zelliktir. De\u011ferleri aras\u0131nda add<\/code>, subtract<\/code>, intersect<\/code>, exclude<\/code> gibi se\u00e7enekler bulunur.<\/p>\n
.element {\n  mask-image: url('mask1.svg'), url('mask2.svg');\n  mask-composite: add, subtract; \/ \u0130lk maskeyi ekle, ikincisini \u00e7\u0131kar <\/em>\/\n}<\/code><\/pre>\n
mask<\/code> (K\u0131saltma \u00d6zelli\u011fi)<\/h4>\n
T\u00fcm bu maskeleme \u00f6zelliklerini tek bir sat\u0131rda tan\u0131mlamak i\u00e7in mask<\/code> k\u0131saltma \u00f6zelli\u011fi kullan\u0131labilir. S\u00f6zdizimi background<\/code> k\u0131saltma \u00f6zelli\u011fine benzerdir:<\/p>\n
.element {\n  mask:   \/      ;\n}<\/code><\/pre>\n
\u00d6rnek:<\/p>\n
.element {\n  -webkit-mask: url('maske.png') center \/ 50% no-repeat content-box;\n  mask: url('maske.png') center \/ 50% no-repeat content-box;\n}<\/code><\/pre>\n
Bu, mask-image<\/code>, mask-position<\/code>, mask-size<\/code>, mask-repeat<\/code>, mask-origin<\/code> ve mask-clip<\/code> \u00f6zelliklerini tek bir sat\u0131rda tan\u0131mlar.<\/p>\n
Pratik Uygulama Senaryolar\u0131<\/h3>\n
mask-image<\/code> \u00f6zelli\u011fi, web tasar\u0131mlar\u0131nda \u00e7ok \u00e7e\u015fitli yarat\u0131c\u0131 uygulamalara olanak tan\u0131r.<\/p>\n
\u00d6zel \u015eekilli G\u00f6rseller Olu\u015fturma<\/h4>\n
En temel kullan\u0131m, g\u00f6rselleri dikd\u00f6rtgen d\u0131\u015f\u0131ndaki \u015fekillerde g\u00f6r\u00fcnt\u00fclemektir. Bir daire, y\u0131ld\u0131z, kalp veya tamamen \u00f6zel bir \u015fekil maskesi kullanarak g\u00f6rsellerinize benzersiz bir dokunu\u015f katabilirsiniz.<\/p>\n
\"Kullan\u0131c\u0131<\/code><\/pre>\n
.circle-avatar {\n  width: 150px;\n  height: 150px;\n  object-fit: cover;\n  -webkit-mask-image: radial-gradient(circle, black 100%, transparent 100%);\n  mask-image: radial-gradient(circle, black 100%, transparent 100%);\n}<\/code><\/pre>\n
Bu, bir g\u00f6rseli m\u00fckemmel bir daire \u015feklinde maskeler.<\/p>\n
Metin Maskeleme (\u00d6zellikle mask-clip: text<\/code> ile)<\/h4>\n
Metinlerin i\u00e7ini bir g\u00f6rselle doldurmak veya metin \u00fczerinde gradyan efektleri uygulamak, mask-clip: text<\/code> ile kolayla\u015f\u0131r.<\/p>\n
YARATICI MET\u0130N<\/h2><\/code><\/pre>\n
.masked-text {\n  font-size: 100px;\n  font-weight: 900;\n  font-family: 'Impact', sans-serif;\n  text-transform: uppercase;\n  color: transparent; \/ Metni \u015feffaf yap <\/em>\/\n  background: url('https:\/\/picsum.photos\/800\/200?random=6') no-repeat center \/ cover; \/ Metnin i\u00e7ini doldur <\/em>\/\n  -webkit-background-clip: text; \/ Arkaplan\u0131 metinle k\u0131rp <\/em>\/\n  background-clip: text;\n  \n  \/ Metin \u00fczerinde gradyan maskesi <\/em>\/\n  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);\n  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);\n  -webkit-mask-clip: text; \/ Maskeyi metinle k\u0131rp <\/em>\/\n  mask-clip: text;\n  -webkit-mask-composite: source-out; \/ Maskeyi arka planla birle\u015ftirme <\/em>\/\n  mask-composite: source-out;\n}<\/code><\/pre>\n
Bu, “YARATICI MET\u0130N” yaz\u0131s\u0131n\u0131n i\u00e7ini bir g\u00f6rselle doldurur ve \u00fczerine dikey bir gradyan maskesi uygulayarak metnin ortas\u0131n\u0131 hafif\u00e7e solukla\u015ft\u0131r\u0131r.<\/p>\n
Hover Efektleri ve Etkile\u015fimli Maskeler<\/h4>\n
mask-image<\/code>‘i CSS ge\u00e7i\u015fleri (transition<\/code>) ve d\u00f6n\u00fc\u015f\u00fcmleri (transform<\/code>) ile birle\u015ftirerek etkile\u015fimli hover efektleri olu\u015fturabilirsiniz.<\/p>\n
\n  
Hover Etkisi<\/h3>\n<\/div><\/code><\/pre>\n
.card-hover {\n  width: 300px;\n  height: 200px;\n  background-image: url('https:\/\/picsum.photos\/300\/200?random=7');\n  background-size: cover;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: white;\n  font-size: 24px;\n  font-weight: bold;\n  \n  \/ Ba\u015flang\u0131\u00e7ta k\u00fc\u00e7\u00fck bir dairesel maske <\/em>\/\n  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 0%);\n  mask-image: radial-gradient(circle at center, black 0%, transparent 0%);\n  -webkit-mask-size: 0% 0%; \/ Maske boyutu ba\u015flang\u0131\u00e7ta s\u0131f\u0131r <\/em>\/\n  mask-size: 0% 0%;\n  -webkit-mask-position: center;\n  mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  \n  transition: mask-size 0.4s ease-out; \/ Maske boyutuna ge\u00e7i\u015f <\/em>\/\n}\n\n.card-hover:hover {\n  \/ Hover'da maskeyi geni\u015flet <\/em>\/\n  -webkit-mask-size: 150% 150%;\n  mask-size: 150% 150%;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, fare \u00f6\u011fenin \u00fczerine geldi\u011finde, g\u00f6rselin merkezinden d\u0131\u015far\u0131ya do\u011fru dairesel bir maske geni\u015fleyerek g\u00f6rseli g\u00f6r\u00fcn\u00fcr hale getirir.<\/p>\n
UI\/UX Tasar\u0131m\u0131nda Kullan\u0131m\u0131<\/h4>\n
\u00d6zel y\u00fckleme animasyonlar\u0131, g\u00f6rsel galerilerde ge\u00e7i\u015f efektleri veya kart tasar\u0131mlar\u0131nda estetik dokunu\u015flar i\u00e7in maskeleme kullan\u0131labilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n profil foto\u011fraf\u0131n\u0131 belirli bir \u015fekil i\u00e7inde g\u00f6stermek veya bir \u00fcr\u00fcn g\u00f6rselini markan\u0131n logosu \u015feklinde maskelemek.<\/p>\n
G\u00f6rsel Ge\u00e7i\u015fler ve Animasyonlar<\/h4>\n
mask-image<\/code> ve di\u011fer maskeleme \u00f6zelliklerini @keyframes<\/code> ile birle\u015ftirerek karma\u015f\u0131k animasyonlar olu\u015fturabilirsiniz. \u00d6rne\u011fin, bir g\u00f6rselin yava\u015f\u00e7a ortaya \u00e7\u0131kmas\u0131 veya kaybolmas\u0131, bir desenin g\u00f6rsel \u00fczerinde hareket etmesi gibi efektler.<\/p>\n
Taray\u0131c\u0131 Uyumlulu\u011fu ve \u00d6n Ekler<\/h3>\n
mask-image<\/code> ve ilgili maskeleme \u00f6zellikleri modern taray\u0131c\u0131lar taraf\u0131ndan iyi desteklenmektedir. Ancak, eski taray\u0131c\u0131lar veya baz\u0131 spesifik \u00f6zellikler i\u00e7in hala taray\u0131c\u0131 \u00f6n ekleri (-webkit-<\/code>) gerekebilir.<\/p>\n
   mask-image<\/code> ve di\u011fer mask-<\/em><\/code> \u00f6zellikleri:<\/strong> \u00c7o\u011fu modern taray\u0131c\u0131 (Chrome, Firefox, Safari, Edge) \u00f6n ek olmadan destekler.
\n*   -webkit-mask-image<\/code>:<\/strong> Safari ve baz\u0131 eski Chrome s\u00fcr\u00fcmleri i\u00e7in hala gereklidir. Genellikle, hem \u00f6n ekli hem de \u00f6n eksiz versiyonu birlikte kullanmak en iyi uygulamad\u0131r.<\/p>\n
.element {\n  -webkit-mask-image: url('maske.png'); \/ Safari ve eski Chrome <\/em>\/\n  mask-image: url('maske.png'); \/ Modern taray\u0131c\u0131lar <\/em>\/\n}<\/code><\/pre>\n
@supports<\/code> kural\u0131, taray\u0131c\u0131lar\u0131n belirli bir \u00f6zelli\u011fi destekleyip desteklemedi\u011fini kontrol etmek i\u00e7in kullan\u0131labilir, bu da kademeli iyile\u015ftirme i\u00e7in faydal\u0131d\u0131r.<\/p>\n
@supports (mask-image: url('')) {\n  .element {\n    mask-image: url('maske.png');\n  }\n}<\/code><\/pre>\n
“Can I Use” gibi kaynaklar, g\u00fcncel taray\u0131c\u0131 uyumlulu\u011fu bilgilerini kontrol etmek i\u00e7in her zaman iyi bir referanst\u0131r.<\/p>\n
mask-image<\/code> ve clip-path<\/code> Aras\u0131ndaki Farklar<\/h3>\n
Hem mask-image<\/code> hem de clip-path<\/code> CSS \u00f6zellikleri, bir \u00f6\u011fenin g\u00f6r\u00fcn\u00fcr \u015feklini de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r, ancak aralar\u0131nda \u00f6nemli farklar vard\u0131r:<\/p>\n
*   \u015eeffafl\u0131k (Transparency) Deste\u011fi:<\/strong>
\n    *   mask-image<\/code>:<\/strong> Maskenin opakl\u0131k de\u011ferine ba\u011fl\u0131 olarak yar\u0131 saydam alanlar olu\u015fturabilir. Bu, yumu\u015fak kenarlar, solukla\u015fan efektler ve gradyan ge\u00e7i\u015fleri i\u00e7in idealdir. Maske g\u00f6rselinin alfa kanal\u0131 veya parlakl\u0131\u011f\u0131, hedef \u00f6\u011fenin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kademeli olarak kontrol edebilir.
\n    *   clip-path<\/code>:<\/strong> Sadece keskin kenarlar olu\u015fturur. \u00d6\u011feyi belirtilen bir yol (path) boyunca keser; bir piksel ya g\u00f6r\u00fcn\u00fcrd\u00fcr ya da tamamen g\u00f6r\u00fcnmezdir, arada yar\u0131 saydaml\u0131k yoktur.<\/p>\n
*   Maske Kaynaklar\u0131:<\/strong>
\n    *   mask-image<\/code>:<\/strong> G\u00f6rsel dosyalar\u0131 (PNG, SVG, JPG), CSS gradyanlar\u0131 kullan\u0131r.
\n    *   clip-path<\/code>:<\/strong> SVG <\/code> \u00f6\u011feleri, temel \u015fekiller (polygon(), circle(), ellipse(), inset()), veya URL() ile SVG referanslar\u0131 kullan\u0131r.<\/p>\n
*   Kullan\u0131m Alanlar\u0131:<\/strong>
\n    *   mask-image<\/code>:<\/strong> G\u00f6rselleri veya \u00f6\u011feleri yumu\u015fak ge\u00e7i\u015flerle \u015fekillendirmek, dokular uygulamak, metinleri g\u00f6rsellerle doldurmak, solukla\u015ft\u0131rma efektleri olu\u015fturmak i\u00e7in daha uygundur.
\n    *   clip-path<\/code>:<\/strong> Keskin, geometrik \u015fekiller olu\u015fturmak, karma\u015f\u0131k vekt\u00f6r tabanl\u0131 kesimler yapmak, performans\u0131 y\u00fcksek ancak yar\u0131 saydaml\u0131k gerektirmeyen durumlar i\u00e7in daha uygundur.<\/p>\n
\u00d6zetle, yar\u0131 saydaml\u0131k ve yumu\u015fak ge\u00e7i\u015fler gerekiyorsa mask-image<\/code> tercih edilmelidir. Keskin, vekt\u00f6r tabanl\u0131 \u015fekiller ve opak kesimler i\u00e7in clip-path<\/code> daha uygun olabilir.<\/p>\n
Performans ve Optimizasyon \u0130pu\u00e7lar\u0131<\/h3>\n
mask-image<\/code> g\u00fc\u00e7l\u00fc bir \u00f6zellik olsa da, performans \u00fczerinde baz\u0131 etkileri olabilir:<\/p>\n
*   Maske G\u00f6rsellerinin Boyutu ve Format\u0131:<\/strong> B\u00fcy\u00fck boyutlu veya s\u0131k\u0131\u015ft\u0131r\u0131lmam\u0131\u015f maske g\u00f6rselleri (\u00f6zellikle PNG’ler) performans d\u00fc\u015f\u00fc\u015f\u00fcne neden olabilir. WebP gibi modern formatlar veya optimize edilmi\u015f SVG’ler kullan\u0131n.
\n*   Karma\u015f\u0131k Maskeler:<\/strong> \u00c7ok karma\u015f\u0131k SVG maskeleri veya birden fazla maske katman\u0131, taray\u0131c\u0131n\u0131n daha fazla hesaplama yapmas\u0131n\u0131 gerektirebilir. M\u00fcmk\u00fcn oldu\u011funca basit maskeler kullanmaya \u00e7al\u0131\u015f\u0131n.
\n*   Donan\u0131m H\u0131zland\u0131rma:<\/strong> Animasyonlu maskeler veya s\u0131k g\u00fcncellenen maskeler i\u00e7in, taray\u0131c\u0131n\u0131n donan\u0131m h\u0131zland\u0131rmas\u0131n\u0131 tetikleyen \u00f6zellikler (\u00f6rne\u011fin transform<\/code> veya opacity<\/code> ile birlikte kullanmak) performans\u0131 art\u0131rabilir.
\n*   Gereksiz Maskelemeden Ka\u00e7\u0131n\u0131n:<\/strong> Her \u00f6\u011feyi maskelemek yerine, ger\u00e7ekten maskelemenin fayda sa\u011flayaca\u011f\u0131 yerlerde kullan\u0131n.<\/p>\n
Sonu\u00e7<\/h3>\n
mask-image<\/code> \u00f6zelli\u011fi, CSS’in en yarat\u0131c\u0131 ve g\u00f6rsel olarak etkileyici ara\u00e7lar\u0131ndan biridir. G\u00f6rselleri ve di\u011fer HTML \u00f6\u011felerini standart dikd\u00f6rtgen s\u0131n\u0131rlar\u0131n d\u0131\u015f\u0131na \u00e7\u0131kararak web tasar\u0131mlar\u0131na derinlik, dinamizm ve estetik katma potansiyeli sunar. Gradyanlardan \u00f6zel SVG’lere kadar \u00e7e\u015fitli maske t\u00fcrlerini desteklemesi, geli\u015ftiricilere ve tasar\u0131mc\u0131lara s\u0131n\u0131rs\u0131z denebilecek bir esneklik sa\u011flar. \u0130lgili maskeleme \u00f6zellikleriyle birlikte kullan\u0131ld\u0131\u011f\u0131nda, metin maskelemeden etkile\u015fimli hover efektlerine, \u00f6zel \u015fekilli g\u00f6rsellerden karma\u015f\u0131k animasyonlara kadar bir\u00e7ok farkl\u0131 senaryoda g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcmler sunar.<\/p>\n
Taray\u0131c\u0131 uyumlulu\u011funun giderek artmas\u0131 ve performans optimizasyon ipu\u00e7lar\u0131yla birlikte, mask-image<\/code> modern web geli\u015ftirme ara\u00e7 setinin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015ftir. Bu g\u00fc\u00e7l\u00fc \u00f6zelli\u011fi anlayarak ve etkili bir \u015fekilde kullanarak, web sayfalar\u0131n\u0131z\u0131n g\u00f6rsel \u00e7ekicili\u011fini bir \u00fcst seviyeye ta\u015f\u0131yabilir, kullan\u0131c\u0131lar\u0131n\u0131za unutulmaz deneyimler sunabilirsiniz. Yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 serbest b\u0131rak\u0131n ve mask-image<\/code> ile web tasar\u0131mlar\u0131n\u0131zda fark yarat\u0131n!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"CSS’te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme CSS, web tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricilerine g\u00f6rseller \u00fczerinde karma\u015f\u0131k ve yarat\u0131c\u0131 manip\u00fclasyonlar yapma imkan\u0131 sunan g\u00fc\u00e7l\u00fc ara\u00e7larla doludur.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-40625","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCSS'te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS'te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme\" \/>\n<meta property=\"og:description\" content=\"CSS'te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme CSS, web tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricilerine g\u00f6rseller \u00fczerinde karma\u015f\u0131k ve yarat\u0131c\u0131 manip\u00fclasyonlar yapma imkan\u0131 sunan g\u00fc\u00e7l\u00fc ara\u00e7larla doludur.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-27T23:40:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/picsum.photos\/400\/200?random=3\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS’te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme\",\"datePublished\":\"2026-02-27T23:40:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/\"},\"wordCount\":2953,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/picsum.photos\/400\/200?random=3\",\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/\",\"name\":\"CSS'te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/picsum.photos\/400\/200?random=3\",\"datePublished\":\"2026-02-27T23:40:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#primaryimage\",\"url\":\"https:\/\/picsum.photos\/400\/200?random=3\",\"contentUrl\":\"https:\/\/picsum.photos\/400\/200?random=3\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS’te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS'te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS'te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme","og_description":"CSS'te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme CSS, web tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricilerine g\u00f6rseller \u00fczerinde karma\u015f\u0131k ve yarat\u0131c\u0131 manip\u00fclasyonlar yapma imkan\u0131 sunan g\u00fc\u00e7l\u00fc ara\u00e7larla doludur.","og_url":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-27T23:40:46+00:00","og_image":[{"url":"https:\/\/picsum.photos\/400\/200?random=3","type":"","width":"","height":""}],"author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"18 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS’te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme","datePublished":"2026-02-27T23:40:46+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/"},"wordCount":2953,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#primaryimage"},"thumbnailUrl":"https:\/\/picsum.photos\/400\/200?random=3","articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/","url":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/","name":"CSS'te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#primaryimage"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#primaryimage"},"thumbnailUrl":"https:\/\/picsum.photos\/400\/200?random=3","datePublished":"2026-02-27T23:40:46+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#primaryimage","url":"https:\/\/picsum.photos\/400\/200?random=3","contentUrl":"https:\/\/picsum.photos\/400\/200?random=3"},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/csste-mask-image-ozelligi-ile-gorsel-maskeleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS’te mask-image \u00d6zelli\u011fi ile G\u00f6rsel Maskeleme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=40625"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40625\/revisions"}],"predecessor-version":[{"id":40626,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40625\/revisions\/40626"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=40625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=40625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=40625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}