color-mod()<\/code> fonksiyonunu<\/a> ortaya \u00e7\u0131karm\u0131\u015ft\u0131r. Bu fonksiyon, hen\u00fcz taslak a\u015famas\u0131nda olsa da, gelecekte yerel CSS ile renkleri ne kadar esnek bir \u015fekilde y\u00f6netebilece\u011fimizin bir g\u00f6stergesidir.<\/p>\nBu rehberde, color-mod()<\/code> fonksiyonunun ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, s\u00f6zdizimini, pratik kullan\u0131m alanlar\u0131n\u0131 ve mevcut taray\u0131c\u0131 deste\u011fi durumunu ayr\u0131nt\u0131l\u0131 olarak inceleyece\u011fiz. Amac\u0131m\u0131z, bu g\u00fc\u00e7l\u00fc ancak hen\u00fcz olgunla\u015fmam\u0131\u015f \u00f6zelli\u011fi anlaman\u0131za ve gelecekteki projeleriniz i\u00e7in potansiyelini de\u011ferlendirmenize yard\u0131mc\u0131 olmakt\u0131r.<\/p>\nCSS color-mod()<\/code> Fonksiyonu Nedir?<\/h2>\ncolor-mod()<\/code> fonksiyonu, CSS’te tan\u0131ml\u0131 bir rengi al\u0131p, \u00e7e\u015fitli modifikasyonlar uygulayarak yeni bir renk d\u00f6nd\u00fcrmeyi ama\u00e7layan bir CSS fonksiyonudur. Temel amac\u0131, geli\u015ftiricilerin bir ana renk (base color) \u00fczerinden farkl\u0131 tonlar, a\u00e7\u0131kl\u0131k\/koyuluk dereceleri, doygunluk seviyeleri veya alfa de\u011ferleri gibi t\u00fcrev renkleri kolayca olu\u015fturabilmesini sa\u011flamakt\u0131r. Bu, \u00f6zellikle tema olu\u015fturma, dinamik UI bile\u015fenleri geli\u015ftirme ve eri\u015filebilirlik standartlar\u0131na uygun renk paletleri tasarlama gibi senaryolarda b\u00fcy\u00fck kolayl\u0131k sa\u011flayacakt\u0131r.<\/p>\nG\u00fcn\u00fcm\u00fczde renk manip\u00fclasyonu i\u00e7in genellikle Sass’\u0131n lighten()<\/code>, darken()<\/code>, saturate()<\/code> gibi fonksiyonlar\u0131 kullan\u0131lmaktad\u0131r. color-mod()<\/code>, bu t\u00fcr yetenekleri do\u011frudan taray\u0131c\u0131n\u0131n kendisine ta\u015f\u0131yarak, harici ara\u00e7lara olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 azaltmay\u0131 ve saf CSS ile daha g\u00fc\u00e7l\u00fc ve dinamik stil sayfalar\u0131 yazmay\u0131 hedeflemektedir.<\/p>\nNeden color-mod()<\/code>‘a \u0130htiya\u00e7 Duyuldu?<\/h3>\nMevcut CSS’te bir rengin tonunu veya parlakl\u0131\u011f\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in do\u011frudan bir y\u00f6ntem yoktur. \u00d6rne\u011fin, birincil renginizin %10 daha a\u00e7\u0131k bir versiyonunu elde etmek istedi\u011finizde \u015funlardan birini yapman\u0131z gerekir:<\/p>\n
\n- Renk de\u011ferlerini manuel olarak hesaplamak (zor ve hataya a\u00e7\u0131k).<\/li>\n
- Sass\/Less gibi preprocessor’lar kullanmak (ek derleme ad\u0131m\u0131 gerektirir).<\/li>\n
- JavaScript ile \u00e7al\u0131\u015fma zaman\u0131nda renkleri manip\u00fcle etmek (performans etkisi olabilir ve CSS’in sorumlulu\u011fu d\u0131\u015f\u0131ndad\u0131r).<\/li>\n<\/ul>\n
color-mod()<\/code>, bu k\u0131s\u0131tlamalar\u0131 a\u015farak CSS’e yerel ve deklaratif bir renk manip\u00fclasyonu yetene\u011fi kazand\u0131r\u0131r. Bu sayede, bir CSS de\u011fi\u015fkeniyle tan\u0131mlanm\u0131\u015f ana rengi de\u011fi\u015ftirdi\u011finizde, ondan t\u00fcretilmi\u015f t\u00fcm renkler otomatik olarak g\u00fcncellenebilir.<\/p>\ncolor-mod()<\/code> S\u00f6zdizimi ve Temel Kullan\u0131m\u0131<\/h2>\ncolor-mod()<\/code> fonksiyonunun genel s\u00f6zdizimi olduk\u00e7a basittir:<\/p>\ncolor-mod( )\n<\/code><\/pre>\nBurada:<\/p>\n
\n<\/code>: \u00dczerinde de\u011fi\u015fiklik yap\u0131lacak olan ba\u015flang\u0131\u00e7 rengidir. Bu, herhangi bir ge\u00e7erli CSS renk de\u011feri olabilir (#RRGGBB<\/code>, rgb()<\/code>, hsl()<\/code>, var()<\/code> vb.).<\/li>\n<\/code>: Uygulanacak bir veya daha fazla modifikasyon fonksiyonunun listesidir. Bu modifikasyonlar zincirleme olarak uygulan\u0131r.<\/li>\n<\/ul>\nTemel Modifikasyon T\u00fcrleri<\/h3>\n
color-mod()<\/code> bir\u00e7ok farkl\u0131 modifikasyon fonksiyonunu destekler. \u0130\u015fte en yayg\u0131n olanlardan baz\u0131lar\u0131:<\/p>\nalpha()<\/code>: Alfa Kanal\u0131n\u0131 Ayarlama<\/h4>\nBir rengin \u015feffafl\u0131k (alfa) de\u011ferini de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r. +<\/code>, -<\/code>, *<\/code>, \/<\/code> operat\u00f6rleri veya do\u011frudan set<\/code> ile yeni bir de\u011fer belirleyebilirsiniz.<\/p>\n\/ Mevcut alfa de\u011ferine %20 ekle <\/em>\/\nbackground-color: color-mod(red alpha(+20%)); \n\n\/ Mevcut alfa de\u011ferinden %10 \u00e7\u0131kar <\/em>\/\nbackground-color: color-mod(blue alpha(-10%));\n\n\/ Alfa de\u011ferini %50 olarak ayarla <\/em>\/\nbackground-color: color-mod(green alpha(set 50%)); \n\n\/ Alfa de\u011ferini iki kat\u0131na \u00e7\u0131kar <\/em>\/\nbackground-color: color-mod(rgba(0,0,0,0.2) alpha(*2)); \n<\/code><\/pre>\ntint()<\/code> ve shade()<\/code>: Beyaz veya Siyah Kar\u0131\u015ft\u0131rma<\/h4>\ntint()<\/code>, bir renge beyaz kar\u0131\u015ft\u0131rarak onu a\u00e7arken, shade()<\/code> bir renge siyah kar\u0131\u015ft\u0131rarak onu koyula\u015ft\u0131r\u0131r. Y\u00fczde de\u011feri, kar\u0131\u015ft\u0131r\u0131lacak beyaz\/siyah miktar\u0131n\u0131 belirtir.<\/p>\n\/ Ana rengi %30 oran\u0131nda beyazla kar\u0131\u015ft\u0131r <\/em>\/\nbackground-color: color-mod(blue tint(30%)); \n\n\/ Ana rengi %20 oran\u0131nda siyahla kar\u0131\u015ft\u0131r <\/em>\/\nbackground-color: color-mod(blue shade(20%)); \n<\/code><\/pre>\nlighten()<\/code> ve darken()<\/code>: Parlakl\u0131\u011f\u0131 Ayarlama<\/h4>\nBir rengin parlakl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r (lighten()<\/code>) veya azalt\u0131r (darken()<\/code>). Bu fonksiyonlar genellikle rengin HSL parlakl\u0131k bile\u015fenini etkiler.<\/p>\n\/ Rengi %15 daha a\u00e7\u0131k yap <\/em>\/\nbackground-color: color-mod(purple lighten(15%)); \n\n\/ Rengi %10 daha koyu yap <\/em>\/\nbackground-color: color-mod(purple darken(10%)); \n<\/code><\/pre>\nsaturate()<\/code> ve desaturate()<\/code>: Doygunlu\u011fu Ayarlama<\/h4>\nBir rengin doygunlu\u011funu art\u0131r\u0131r (daha canl\u0131 hale getirir) veya azalt\u0131r (daha griye yak\u0131n hale getirir).<\/p>\n
\/ Rengin doygunlu\u011funu %25 art\u0131r <\/em>\/\nbackground-color: color-mod(orange saturate(25%)); \n\n\/ Rengin doygunlu\u011funu %15 azalt <\/em>\/\nbackground-color: color-mod(orange desaturate(15%)); \n<\/code><\/pre>\nspin()<\/code>: Tonu De\u011fi\u015ftirme<\/h4>\nBir rengin tonunu (hue) belirli bir derece kadar d\u00f6nd\u00fcr\u00fcr. Bu, bir renk paletinde ard\u0131\u015f\u0131k renkler olu\u015fturmak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\/ Rengin tonunu 90 derece d\u00f6nd\u00fcr <\/em>\/\nbackground-color: color-mod(hsl(120, 70%, 50%) spin(90deg)); \n<\/code><\/pre>\nBirden Fazla Modifikasyonu Zincirleme<\/h4>\n
color-mod()<\/code> fonksiyonunun g\u00fcc\u00fc, birden fazla modifikasyonu ayn\u0131 anda uygulayabilmesinden gelir. Modifikasyonlar soldan sa\u011fa do\u011fru s\u0131rayla uygulan\u0131r.<\/p>\n\/ \u00d6nce %20 koyula\u015ft\u0131r, sonra alfa de\u011ferini %70 yap <\/em>\/\nbackground-color: color-mod(red darken(20%) alpha(70%)); \n\n\/ \u00d6nce doygunlu\u011fu %10 art\u0131r, sonra %5 daha a\u00e7\u0131k yap <\/em>\/\nbackground-color: color-mod(blue saturate(10%) lighten(5%));\n<\/code><\/pre>\ncolor-mod()<\/code> ile Geli\u015fmi\u015f Uygulamalar ve Pratik \u0130pu\u00e7lar\u0131<\/h2>\ncolor-mod()<\/code> fonksiyonu, CSS de\u011fi\u015fkenleriyle (--custom-property<\/code>) birle\u015fti\u011finde ger\u00e7ek potansiyelini g\u00f6sterir. Bu kombinasyon, dinamik ve s\u00fcrd\u00fcr\u00fclebilir stil sistemleri olu\u015fturman\u0131n anahtar\u0131d\u0131r.<\/p>\nCSS De\u011fi\u015fkenleriyle Dinamik Tema Olu\u015fturma<\/h3>\n
Bir ana renk belirleyerek, bu renkten t\u00fcretilmi\u015f farkl\u0131 UI elemanlar\u0131 i\u00e7in renkler olu\u015fturabilirsiniz. Tema de\u011fi\u015ftirme durumunda, sadece ana de\u011fi\u015fkeni g\u00fcncellemeniz yeterli olacakt\u0131r.<\/p>\n
:root {\n --primary-color: #3498db; \/ Mavi <\/em>\/\n --text-color: #333;\n}\n\n.button {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 10px 20px;\n cursor: pointer;\n}\n\n.button:hover {\n \/ Ana rengin %10 daha koyu hali <\/em>\/\n background-color: color-mod(var(--primary-color) darken(10%)); \n}\n\n.alert-info {\n \/ Ana rengin %80 daha a\u00e7\u0131k hali ve %10 alfa <\/em>\/\n background-color: color-mod(var(--primary-color) tint(80%) alpha(10%)); \n border: 1px solid var(--primary-color);\n color: color-mod(var(--primary-color) darken(20%));\n padding: 15px;\n}\n<\/code><\/pre>\nBu \u00f6rnekte, --primary-color<\/code> de\u011fi\u015fkeni de\u011fi\u015fti\u011finde, d\u00fc\u011fmenin hover rengi ve bilgi uyar\u0131s\u0131n\u0131n arka plan\/kenarl\u0131k\/metin renkleri otomatik olarak g\u00fcncellenecektir.<\/p>\nEri\u015filebilirlik Odakl\u0131 Renk Paletleri<\/h3>\n
Metin ve arka plan renkleri aras\u0131ndaki kontrast\u0131n yeterli oldu\u011fundan emin olmak, eri\u015filebilirlik i\u00e7in kritik \u00f6neme sahiptir. color-mod()<\/code>, bir rengin a\u00e7\u0131k veya koyu versiyonlar\u0131n\u0131 kolayca olu\u015fturarak bu s\u00fcreci basitle\u015ftirebilir.<\/p>\n.card {\n --card-bg: #f8f8f8;\n --card-text: color-mod(var(--card-bg) darken(60%)); \/ Kart arka plan\u0131ndan %60 daha koyu metin <\/em>\/\n --card-border: color-mod(var(--card-bg) darken(10%)); \/ Kart arka plan\u0131ndan %10 daha koyu kenarl\u0131k <\/em>\/\n\n background-color: var(--card-bg);\n color: var(--card-text);\n border: 1px solid var(--card-border);\n padding: 20px;\n}\n<\/code><\/pre>\nDinamik UI Bile\u015fenleri \u0130\u00e7in G\u00f6lge ve Vurgu Renkleri<\/h3>\n
Bir bile\u015fenin ana rengine ba\u011fl\u0131 olarak, onun g\u00f6lgelerini veya vurgu renklerini t\u00fcretmek i\u00e7in color-mod()<\/code> kullanabilirsiniz.<\/p>\n.input-field {\n --input-border-color: #ccc;\n border: 1px solid var(--input-border-color);\n padding: 8px;\n}\n\n.input-field:focus {\n \/ Odakland\u0131\u011f\u0131nda ana rengi %20 oran\u0131nda a\u00e7 ve alfa de\u011ferini %60 yap <\/em>\/\n border-color: color-mod(var(--primary-color) lighten(20%));\n box-shadow: 0 0 5px color-mod(var(--primary-color) alpha(60%));\n outline: none;\n}\n<\/code><\/pre>\nTaray\u0131c\u0131 Deste\u011fi ve Gelecek Beklentileri<\/h2>\n
color-mod()<\/code> fonksiyonu, CSS Color Module Level 5 tasla\u011f\u0131n\u0131n bir par\u00e7as\u0131d\u0131r ve \u015fu anda hi\u00e7bir modern taray\u0131c\u0131da do\u011frudan yerel deste\u011fi bulunmamaktad\u0131r.<\/strong> Bu, taray\u0131c\u0131n\u0131z\u0131n bu kodu do\u011frudan anlamayaca\u011f\u0131 anlam\u0131na gelir.<\/p>\nPeki, o zaman neden bahsediyoruz?<\/p>\n
\n- Gelece\u011fin Standard\u0131:<\/strong> W3C taraf\u0131ndan geli\u015ftirilen bu taslak, CSS’in gelecekteki yeteneklerini g\u00f6sterir ve bir g\u00fcn geni\u015f \u00e7apta desteklenmesi beklenir.<\/li>\n
- Polyfill ve PostCSS:<\/strong>
postcss-preset-env<\/code> gibi ara\u00e7lar sayesinde, bu t\u00fcr gelecekteki CSS \u00f6zelliklerini bug\u00fcnden kullanabilirsiniz. PostCSS, yazd\u0131\u011f\u0131n\u0131z color-mod()<\/code> kodunu taray\u0131c\u0131lar\u0131n anlayabilece\u011fi standart CSS’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcr (transpile eder).<\/li>\n<\/ol>\nPostCSS ile Kullan\u0131m<\/h3>\n
E\u011fer color-mod()<\/code> \u00f6zelli\u011fini projelerinizde denemek isterseniz, PostCSS ve postcss-preset-env<\/code> eklentisini kurman\u0131z gerekir. Bu eklenti, color-mod()<\/code> gibi yeni \u00f6zelliklerin s\u00f6zdizimini, taray\u0131c\u0131lar\u0131n anlayabilece\u011fi e\u015fde\u011fer renk de\u011ferlerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\n\u00d6rnek bir postcss.config.js<\/code> yap\u0131land\u0131rmas\u0131:<\/p>\nmodule.exports = {\n plugins: [\n require('postcss-preset-env')({\n features: {\n 'color-mod-function': true \/\/ color-mod() fonksiyonunu etkinle\u015ftir\n }\n })\n ]\n};\n<\/code><\/pre>\nBu kurulumla, yazd\u0131\u011f\u0131n\u0131z color-mod()<\/code> kodlar\u0131 derleme a\u015famas\u0131nda i\u015flenerek, taray\u0131c\u0131 uyumlu CSS \u00e7\u0131kt\u0131s\u0131 \u00fcretilir. Ancak bu, taray\u0131c\u0131n\u0131n yerel olarak destekledi\u011fi anlam\u0131na gelmez, sadece bir d\u00f6n\u00fc\u015f\u00fcm arac\u0131 kulland\u0131\u011f\u0131n\u0131z anlam\u0131na gelir.<\/p>\nAlternatifler ve Di\u011fer Renk Fonksiyonlar\u0131<\/h3>\n
color-mod()<\/code> hala taslak a\u015famas\u0131ndayken, alternatif olarak \u015funlar\u0131 kullanabilirsiniz:<\/p>\n\n- Sass\/Less:<\/strong> Renk manip\u00fclasyonu i\u00e7in en yayg\u0131n kullan\u0131lan ara\u00e7lard\u0131r.<\/li>\n
- CSS
color-mix()<\/code>:<\/strong> Bu yeni fonksiyon, iki rengi belirli bir oranda kar\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r ve taray\u0131c\u0131 deste\u011fi color-mod()<\/code>‘dan \u00e7ok daha iyidir. color-mod()<\/code> bir rengi modifiye ederken<\/em>, color-mix()<\/code> iki rengi kar\u0131\u015ft\u0131r\u0131r<\/em>.<\/li>\n- CSS Renk Fonksiyonlar\u0131 (
rgb()<\/code>, hsl()<\/code>, lch()<\/code>, oklab()<\/code> vb.):<\/strong> Bu fonksiyonlar\u0131 CSS de\u011fi\u015fkenleriyle birle\u015ftirerek, baz\u0131 s\u0131n\u0131rl\u0131 dinamik renk manip\u00fclasyonlar\u0131 yapabilirsiniz. \u00d6rne\u011fin, hsl(calc(var(--hue) + 10), 50%, 50%)<\/code> gibi. Ancak bu, color-mod()<\/code>‘un sundu\u011fu esnekli\u011fi sa\u011flamaz.<\/li>\n<\/ul>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
color-mod()<\/code> fonksiyonu, CSS’in gelecekteki renk manip\u00fclasyon yeteneklerinin \u00f6nemli bir par\u00e7as\u0131 olmay\u0131 vaat ediyor. Dinamik tema olu\u015fturmadan eri\u015filebilir renk paletleri tasarlamaya kadar bir\u00e7ok alanda geli\u015ftiricilere b\u00fcy\u00fck kolayl\u0131klar sunacak. Her ne kadar hen\u00fcz yerel taray\u0131c\u0131 deste\u011fi olmasa da, PostCSS gibi ara\u00e7larla bug\u00fcnden deneyimlenebilir ve gelecekteki projeler i\u00e7in bilgi birikimi olu\u015fturulabilir.<\/p>\nCSS, s\u00fcrekli geli\u015fen bir dil ve color-mod()<\/code> gibi \u00f6zellikler, web’in daha dinamik, eri\u015filebilir ve geli\u015ftirici dostu hale gelmesine katk\u0131da bulunuyor. Bu \u00f6zelli\u011fi yak\u0131ndan takip etmek, CSS becerilerinizi g\u00fcncel tutman\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\ncolor-mod()<\/code> nedir ve ne i\u015fe yarar?<\/h4>\ncolor-mod()<\/code>, CSS’te tan\u0131ml\u0131 bir rengi al\u0131p, \u015feffafl\u0131k, parlakl\u0131k, doygunluk, ton gibi \u00f6zelliklerini de\u011fi\u015ftirerek yeni bir renk olu\u015fturan bir fonksiyondur. Dinamik renk paletleri ve tema olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\ncolor-mod()<\/code>‘un taray\u0131c\u0131 deste\u011fi var m\u0131?<\/h4>\nHay\u0131r, \u015fu anda hi\u00e7bir modern taray\u0131c\u0131da do\u011frudan yerel deste\u011fi bulunmamaktad\u0131r. CSS Color Module Level 5 tasla\u011f\u0131n\u0131n bir par\u00e7as\u0131d\u0131r.<\/p>\n
color-mod()<\/code>‘u bug\u00fcn nas\u0131l kullanabilirim?<\/h4>\npostcss-preset-env<\/code> gibi PostCSS eklentileri arac\u0131l\u0131\u011f\u0131yla kullanabilirsiniz. Bu ara\u00e7lar, yazd\u0131\u011f\u0131n\u0131z color-mod()<\/code> kodunu taray\u0131c\u0131lar\u0131n anlayabilece\u011fi standart CSS’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\ncolor-mod()<\/code> ile color-mix()<\/code> aras\u0131ndaki fark nedir?<\/h4>\ncolor-mod()<\/code> tek bir rengi \u00e7e\u015fitli modifikasyonlarla (a\u00e7ma, koyula\u015ft\u0131rma, doygunla\u015ft\u0131rma vb.) de\u011fi\u015ftirir. color-mix()<\/code> ise iki farkl\u0131 rengi belirli bir oranda kar\u0131\u015ft\u0131rarak yeni bir renk olu\u015fturur. color-mix()<\/code>‘in taray\u0131c\u0131 deste\u011fi color-mod()<\/code>‘dan \u00e7ok daha iyidir ve \u00e7o\u011fu modern taray\u0131c\u0131da desteklenmektedir.<\/p>\ncolor-mod()<\/code> Sass\/Less gibi preprocessor’lara alternatif mi?<\/h4>\nEvet, color-mod()<\/code> tam olarak bu t\u00fcr preprocessor’lar\u0131n renk manip\u00fclasyonu yeteneklerini do\u011frudan CSS’e getirmeyi ama\u00e7layan bir alternatiftir. Gelecekte yayg\u0131nla\u015ft\u0131\u011f\u0131nda, bir\u00e7ok geli\u015ftiricinin Sass\/Less’e olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 azaltacakt\u0131r.<\/p>\ncolor-mod()<\/code> performans\u0131 nas\u0131l etkiler?<\/h4>\nTaray\u0131c\u0131lar taraf\u0131ndan yerel olarak desteklendi\u011finde, do\u011frudan CSS motorunda \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in performans a\u00e7\u0131s\u0131ndan olduk\u00e7a verimli olmas\u0131 beklenir. PostCSS gibi ara\u00e7larla derleme zaman\u0131nda ger\u00e7ekle\u015fen d\u00f6n\u00fc\u015f\u00fcmlerin ise \u00e7al\u0131\u015fma zaman\u0131 performans\u0131na do\u011frudan bir etkisi olmaz.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web tasar\u0131m ve geli\u015ftirme s\u00fcre\u00e7lerinde renkler, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen en kritik unsurlardan biridir. Dinamik ve uyumlu renk","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-32962","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
CSS color-mod() Fonksiyonu Nedir? - 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\/css-color-mod-fonksiyonu-nedir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS color-mod() Fonksiyonu Nedir?\" \/>\n<meta property=\"og:description\" content=\"Web tasar\u0131m ve geli\u015ftirme s\u00fcre\u00e7lerinde renkler, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen en kritik unsurlardan biridir. Dinamik ve uyumlu renk\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-27T19:42:16+00:00\" \/>\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=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS color-mod() Fonksiyonu Nedir?\",\"datePublished\":\"2025-10-27T19:42:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/\"},\"wordCount\":1535,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/\",\"name\":\"CSS color-mod() Fonksiyonu Nedir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-27T19:42:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS color-mod() Fonksiyonu Nedir?\"}]},{\"@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 color-mod() Fonksiyonu Nedir? - 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\/css-color-mod-fonksiyonu-nedir\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS color-mod() Fonksiyonu Nedir?","og_description":"Web tasar\u0131m ve geli\u015ftirme s\u00fcre\u00e7lerinde renkler, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen en kritik unsurlardan biridir. Dinamik ve uyumlu renk","og_url":"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-27T19:42:16+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS color-mod() Fonksiyonu Nedir?","datePublished":"2025-10-27T19:42:16+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/"},"wordCount":1535,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/","url":"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/","name":"CSS color-mod() Fonksiyonu Nedir? - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-27T19:42:16+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-color-mod-fonksiyonu-nedir\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS color-mod() Fonksiyonu Nedir?"}]},{"@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\/32962","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=32962"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32962\/revisions"}],"predecessor-version":[{"id":32963,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32962\/revisions\/32963"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}