{"id":37968,"date":"2026-01-20T05:40:42","date_gmt":"2026-01-20T02:40:42","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37968"},"modified":"2026-01-20T05:40:42","modified_gmt":"2026-01-20T02:40:42","slug":"css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/","title":{"rendered":"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler"},"content":{"rendered":"

<\/p>\n

CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler<\/h2>\n

Web sitelerinin ve uygulamalar\u0131n g\u00f6rsel \u00e7ekicili\u011fi, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen \u00f6nemli bir fakt\u00f6rd\u00fcr. Tasar\u0131mc\u0131lar genellikle sitenin her k\u00f6\u015fesini, her d\u00fc\u011fmesini ve her \u00f6\u011fesini markan\u0131n kimli\u011fine uygun hale getirmeye \u00e7al\u0131\u015f\u0131r. Ancak bu detayland\u0131rma s\u00fcrecinde, genellikle g\u00f6z ard\u0131 edilen bir bile\u015fen vard\u0131r: kayd\u0131rma \u00e7ubuklar\u0131 (scrollbars)<\/strong>. Standart taray\u0131c\u0131 kayd\u0131rma \u00e7ubuklar\u0131 genellikle monoton ve sitenin genel esteti\u011fiyle uyumsuz olabilir. Neyse ki, CSS sayesinde bu kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirerek sitenizin veya uygulaman\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tamamlayabilir, kullan\u0131c\u0131 deneyimini zenginle\u015ftirebilir ve marka kimli\u011finizi g\u00fc\u00e7lendirebilirsiniz.<\/p>\n

Bu makalede, CSS ile kayd\u0131rma \u00e7ubuklar\u0131n\u0131 nas\u0131l \u00f6zelle\u015ftirebilece\u011finizi, farkl\u0131 taray\u0131c\u0131lardaki yakla\u015f\u0131mlar\u0131, pratik \u00f6rnekleri ve dikkat etmeniz gereken eri\u015filebilirlik konular\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Neden Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirmeliyiz?<\/h3>\n

Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirmek, sadece estetik bir tercih olman\u0131n \u00f6tesinde, kullan\u0131c\u0131 deneyimini iyile\u015ftirmeye y\u00f6nelik stratejik bir ad\u0131md\u0131r. \u0130\u015fte ba\u015fl\u0131ca nedenler:<\/p>\n

Marka Kimli\u011fi ve Tutarl\u0131l\u0131k<\/h4>\n

Her web sitesinin veya uygulaman\u0131n kendine \u00f6zg\u00fc bir g\u00f6rsel dili vard\u0131r. Renk paleti, tipografi, d\u00fc\u011fme stilleri gibi \u00f6\u011feler markan\u0131n kimli\u011fini yans\u0131t\u0131r. Standart kayd\u0131rma \u00e7ubuklar\u0131 genellikle gri tonlar\u0131nda, basit ve herhangi bir markaya \u00f6zg\u00fc olmayan bir g\u00f6r\u00fcn\u00fcme sahiptir. Bu durum, sitenin genel tasar\u0131m\u0131yla bir tezat olu\u015fturabilir. Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 markan\u0131z\u0131n renklerine, fontlar\u0131na ve genel stilistik yakla\u015f\u0131m\u0131na uygun hale getirerek, kullan\u0131c\u0131ya daha b\u00fct\u00fcnsel ve profesyonel bir deneyim sunabilirsiniz. Bu, sitenin her detay\u0131n\u0131n d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015f oldu\u011fu izlenimini yarat\u0131r.<\/p>\n

Geli\u015ftirilmi\u015f Kullan\u0131c\u0131 Deneyimi (UX)<\/h4>\n

\u00d6zelle\u015ftirilmi\u015f kayd\u0131rma \u00e7ubuklar\u0131, sadece g\u00fczel g\u00f6r\u00fcnmekle kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini de geli\u015ftirebilir. \u00d6rne\u011fin, daha belirgin veya daha ince kayd\u0131rma \u00e7ubuklar\u0131, kullan\u0131c\u0131n\u0131n i\u00e7eri\u011fin ne kadar\u0131n\u0131 kayd\u0131rd\u0131\u011f\u0131n\u0131 veya daha ne kadar i\u00e7erik oldu\u011funu daha net anlamas\u0131na yard\u0131mc\u0131 olabilir. Farkl\u0131 durumlar (hover, active) i\u00e7in uygulanan g\u00f6rsel geri bildirimler, etkile\u015fimi daha sezgisel hale getirebilir. Ayr\u0131ca, baz\u0131 durumlarda, daha minimal veya \u015feffaf kayd\u0131rma \u00e7ubuklar\u0131, i\u00e7eri\u011fin daha \u00f6n plana \u00e7\u0131kmas\u0131n\u0131 sa\u011flayarak odak noktas\u0131n\u0131 art\u0131rabilir.<\/p>\n

Estetik ve Modern G\u00f6r\u00fcn\u00fcm<\/h4>\n

G\u00fcn\u00fcm\u00fcz web tasar\u0131m\u0131nda minimalizm, temiz \u00e7izgiler ve modern estetik \u00f6n plandad\u0131r. Standart kayd\u0131rma \u00e7ubuklar\u0131 bazen eski moda veya kaba g\u00f6r\u00fcnebilir. \u00d6zelle\u015ftirme, sitenize daha modern, \u015f\u0131k ve sofistike bir dokunu\u015f katma f\u0131rsat\u0131 sunar. \u00d6zellikle tek sayfal\u0131k uygulamalarda (SPA) veya tam ekran d\u00fczenlerde, kayd\u0131rma \u00e7ubuklar\u0131n\u0131n tasar\u0131m\u0131 genel g\u00f6rsel harmoniyi \u00f6nemli \u00f6l\u00e7\u00fcde etkileyebilir.<\/p>\n

WebKit Taray\u0131c\u0131lar \u0130\u00e7in Kayd\u0131rma \u00c7ubu\u011fu \u00d6zelle\u015ftirmesi<\/h3>\n

WebKit tabanl\u0131 taray\u0131c\u0131lar (Google Chrome, Safari, Microsoft Edge Chromium, Opera vb.) kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in \u00f6zel pseudo-elementler sunar. Bu pseudo-elementler, kayd\u0131rma \u00e7ubu\u011funun farkl\u0131 k\u0131s\u0131mlar\u0131na ayr\u0131 ayr\u0131 stil uygulaman\u0131za olanak tan\u0131r. Bu y\u00f6ntem en yayg\u0131n ve en esnek \u00f6zelle\u015ftirme y\u00f6ntemidir.<\/p>\n

WebKit Pseudo-elementleri<\/h4>\n

\u0130\u015fte WebKit tabanl\u0131 taray\u0131c\u0131lar i\u00e7in kullanabilece\u011finiz ba\u015fl\u0131ca pseudo-elementler:<\/p>\n

* ::-webkit-scrollbar<\/code>: Bu pseudo-element, t\u00fcm kayd\u0131rma \u00e7ubu\u011funu temsil eder. Kayd\u0131rma \u00e7ubu\u011funun genel geni\u015fli\u011fini veya y\u00fcksekli\u011fini (yatay kayd\u0131rma \u00e7ubu\u011fu i\u00e7in) ayarlamak i\u00e7in kullan\u0131l\u0131r.
\n* ::-webkit-scrollbar-button<\/code>: Kayd\u0131rma \u00e7ubu\u011funun ba\u015f\u0131ndaki ve sonundaki d\u00fc\u011fmeleri (yukar\u0131\/a\u015fa\u011f\u0131 veya sol\/sa\u011f ok d\u00fc\u011fmeleri) temsil eder.
\n* ::-webkit-scrollbar-track<\/code>: Kayd\u0131rma \u00e7ubu\u011fu “izi” veya “yolu” olarak adland\u0131r\u0131labilir. Kayd\u0131r\u0131c\u0131n\u0131n (thumb) hareket etti\u011fi arka plan alan\u0131d\u0131r.
\n* ::-webkit-scrollbar-track-piece<\/code>: ::-webkit-scrollbar-track<\/code> ile benzerdir, ancak baz\u0131 taray\u0131c\u0131larda kayd\u0131rma \u00e7ubu\u011fu izinin bo\u015f k\u0131sm\u0131n\u0131 temsil edebilir. Genellikle ::-webkit-scrollbar-track<\/code> yeterlidir.
\n* ::-webkit-scrollbar-thumb<\/code>: Kayd\u0131rma \u00e7ubu\u011funun s\u00fcr\u00fcklenen, hareket eden k\u0131sm\u0131d\u0131r. Kullan\u0131c\u0131n\u0131n fareyle tutup s\u00fcr\u00fckledi\u011fi veya t\u0131klayarak kayd\u0131rd\u0131\u011f\u0131 b\u00f6l\u00fcmd\u00fcr.
\n* ::-webkit-scrollbar-corner<\/code>: Hem yatay hem de dikey kayd\u0131rma \u00e7ubuklar\u0131n\u0131n kesi\u015fti\u011fi k\u00f6\u015feyi temsil eder. Genellikle sa\u011f alt k\u00f6\u015fede bulunur.
\n* ::-webkit-resizer<\/code>: Genellikle textarea<\/code> gibi yeniden boyutland\u0131r\u0131labilir \u00f6\u011felerde g\u00f6r\u00fclen yeniden boyutland\u0131rma kolunu temsil eder.<\/p>\n

Bu pseudo-elementleri kullanarak, kayd\u0131rma \u00e7ubu\u011funun her bir b\u00f6l\u00fcm\u00fcne ayr\u0131 ayr\u0131 CSS \u00f6zellikleri uygulayabilirsiniz.<\/p>\n

\u00d6rnek 1: Temel Kayd\u0131rma \u00c7ubu\u011fu \u00d6zelle\u015ftirmesi<\/h4>\n

Bu \u00f6rnek, bir div i\u00e7indeki kayd\u0131rma \u00e7ubu\u011funun temel renklerini ve boyutunu nas\u0131l de\u011fi\u015ftirebilece\u011finizi g\u00f6sterir.<\/p>\n

\/ WebKit tabanl\u0131 taray\u0131c\u0131lar i\u00e7in <\/em>\/\n\n\/ T\u00fcm kayd\u0131rma \u00e7ubu\u011funun geni\u015fli\u011fi <\/em>\/\n::-webkit-scrollbar {\n    width: 12px;\n}\n\n\/ Kayd\u0131rma \u00e7ubu\u011fu izi (arka plan) <\/em>\/\n::-webkit-scrollbar-track {\n    background: #f1f1f1; \/ A\u00e7\u0131k gri <\/em>\/\n    border-radius: 10px;\n}\n\n\/ Kayd\u0131r\u0131c\u0131 (s\u00fcr\u00fcklenen k\u0131s\u0131m) <\/em>\/\n::-webkit-scrollbar-thumb {\n    background: #888; \/ Koyu gri <\/em>\/\n    border-radius: 10px;\n}\n\n\/ Kayd\u0131r\u0131c\u0131n\u0131n \u00fczerine gelindi\u011finde <\/em>\/\n::-webkit-scrollbar-thumb:hover {\n    background: #555; \/ Daha koyu gri <\/em>\/\n}\n\n\/ Belirli bir div i\u00e7indeki kayd\u0131rma \u00e7ubuklar\u0131 i\u00e7in <\/em>\/\n.my-custom-scroll-div::-webkit-scrollbar {\n    width: 10px;\n}\n.my-custom-scroll-div::-webkit-scrollbar-track {\n    background: #e0e0e0;\n}\n.my-custom-scroll-div::-webkit-scrollbar-thumb {\n    background: #4CAF50; \/ Ye\u015fil <\/em>\/\n}\n.my-custom-scroll-div::-webkit-scrollbar-thumb:hover {\n    background: #45a049;\n}<\/code><\/pre>\n
A\u00e7\u0131klama:<\/strong>
\nYukar\u0131daki kodda, \u00f6ncelikle genel kayd\u0131rma \u00e7ubuklar\u0131 i\u00e7in varsay\u0131lan bir stil tan\u0131mlanm\u0131\u015ft\u0131r. Ard\u0131ndan, .my-custom-scroll-div<\/code> s\u0131n\u0131f\u0131na sahip bir \u00f6\u011fenin kayd\u0131rma \u00e7ubuklar\u0131 i\u00e7in daha spesifik bir stil belirlenmi\u015ftir. Bu, farkl\u0131 alanlarda farkl\u0131 kayd\u0131rma \u00e7ubu\u011fu tasar\u0131mlar\u0131 kullanman\u0131za olanak tan\u0131r. width<\/code> \u00f6zelli\u011fi dikey kayd\u0131rma \u00e7ubu\u011funun geni\u015fli\u011fini, yatay kayd\u0131rma \u00e7ubu\u011fu i\u00e7in ise height<\/code> \u00f6zelli\u011fi kullan\u0131l\u0131r. background<\/code> ile renk, border-radius<\/code> ile k\u00f6\u015felerin yuvarlakl\u0131\u011f\u0131 ayarlan\u0131r. :hover<\/code> pseudo-class’\u0131, kayd\u0131r\u0131c\u0131n\u0131n \u00fczerine gelindi\u011finde renginin de\u011fi\u015fmesini sa\u011flar.<\/p>\n
\u00d6rnek 2: Detayl\u0131 Stil ve D\u00fc\u011fmeler<\/h4>\n
Bu \u00f6rnek, kayd\u0131rma \u00e7ubu\u011funun daha fazla bile\u015fenini \u00f6zelle\u015ftirerek daha karma\u015f\u0131k bir g\u00f6r\u00fcn\u00fcm elde etmenizi sa\u011flar.<\/p>\n
\/ WebKit tabanl\u0131 taray\u0131c\u0131lar i\u00e7in daha detayl\u0131 stil <\/em>\/\n\n\/ T\u00fcm kayd\u0131rma \u00e7ubu\u011fu <\/em>\/\n::-webkit-scrollbar {\n    width: 16px;\n    height: 16px; \/ Yatay kayd\u0131rma \u00e7ubu\u011fu i\u00e7in y\u00fckseklik <\/em>\/\n}\n\n\/ Kayd\u0131rma \u00e7ubu\u011fu izi (arka plan) <\/em>\/\n::-webkit-scrollbar-track {\n    background-color: #f0f0f0;\n    border: 1px solid #ccc;\n    border-radius: 8px;\n    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n}\n\n\/ Kayd\u0131r\u0131c\u0131 (s\u00fcr\u00fcklenen k\u0131s\u0131m) <\/em>\/\n::-webkit-scrollbar-thumb {\n    background-color: #6a1b9a; \/ Mor <\/em>\/\n    border-radius: 8px;\n    border: 3px solid #f0f0f0; \/ Kayd\u0131r\u0131c\u0131 etraf\u0131nda bo\u015fluk yarat\u0131r <\/em>\/\n}\n\n\/ Kayd\u0131r\u0131c\u0131n\u0131n \u00fczerine gelindi\u011finde <\/em>\/\n::-webkit-scrollbar-thumb:hover {\n    background-color: #4a148c; \/ Daha koyu mor <\/em>\/\n}\n\n\/ Kayd\u0131rma \u00e7ubu\u011fu d\u00fc\u011fmeleri <\/em>\/\n::-webkit-scrollbar-button {\n    background-color: #6a1b9a;\n    border-radius: 8px;\n    height: 16px; \/ D\u00fc\u011fme y\u00fcksekli\u011fi <\/em>\/\n    width: 16px;  \/ D\u00fc\u011fme geni\u015fli\u011fi <\/em>\/\n    display: block; \/ D\u00fc\u011fmelerin g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 sa\u011flar <\/em>\/\n}\n\n\/ D\u00fc\u011fmelerin \u00fczerine gelindi\u011finde <\/em>\/\n::-webkit-scrollbar-button:hover {\n    background-color: #4a148c;\n}\n\n\/ Kayd\u0131rma \u00e7ubu\u011fu k\u00f6\u015fesi <\/em>\/\n::-webkit-scrollbar-corner {\n    background-color: #cccccc;\n}<\/code><\/pre>\n
A\u00e7\u0131klama:<\/strong>
\nBu \u00f6rnekte, box-shadow<\/code> ile iz k\u0131sm\u0131na hafif bir g\u00f6lge eklenmi\u015f, border<\/code> ile kayd\u0131r\u0131c\u0131n\u0131n etraf\u0131na bo\u015fluk verilerek daha estetik bir g\u00f6r\u00fcn\u00fcm sa\u011flanm\u0131\u015ft\u0131r. ::-webkit-scrollbar-button<\/code> kullan\u0131larak kayd\u0131rma d\u00fc\u011fmelerine de stil uygulanm\u0131\u015ft\u0131r. display: block;<\/code> \u00f6zelli\u011fi, baz\u0131 durumlarda d\u00fc\u011fmelerin g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 sa\u011flamak i\u00e7in gerekebilir. ::-webkit-scrollbar-corner<\/code> ile iki kayd\u0131rma \u00e7ubu\u011funun kesi\u015fti\u011fi k\u00f6\u015feye de renk verilmi\u015ftir.<\/p>\n
Firefox Taray\u0131c\u0131lar \u0130\u00e7in Kayd\u0131rma \u00c7ubu\u011fu \u00d6zelle\u015ftirmesi<\/h3>\n
Firefox, WebKit’ten farkl\u0131 bir yakla\u015f\u0131m benimser ve kendi \u00f6zel pseudo-elementleri yerine CSS Scrollbars Mod\u00fcl\u00fc’n\u00fcn standartla\u015ft\u0131r\u0131lm\u0131\u015f \u00f6zelliklerini kullan\u0131r. Bu \u00f6zellikler, WebKit pseudo-elementleri kadar esnek olmasa da, kayd\u0131rma \u00e7ubuklar\u0131n\u0131n temel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmenize olanak tan\u0131r.<\/p>\n
Firefox CSS \u00d6zellikleri<\/h4>\n
Firefox, kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in iki ana \u00f6zellik sunar:<\/p>\n
*   scrollbar-width<\/code>: Kayd\u0131rma \u00e7ubu\u011funun geni\u015fli\u011fini ayarlar. Kabul etti\u011fi de\u011ferler:
\n    *   auto<\/code>: Taray\u0131c\u0131n\u0131n varsay\u0131lan geni\u015fli\u011fi.
\n    *   thin<\/code>: Daha ince bir kayd\u0131rma \u00e7ubu\u011fu (genellikle varsay\u0131lan\u0131n yar\u0131s\u0131 kadar).
\n    *   none<\/code>: Kayd\u0131rma \u00e7ubu\u011funu gizler (ancak kayd\u0131rma i\u015flevselli\u011fi devam eder).
\n*   scrollbar-color<\/code>: Kayd\u0131rma \u00e7ubu\u011funun kayd\u0131r\u0131c\u0131s\u0131 (thumb) ve izi (track) i\u00e7in renkleri ayarlar. \u0130ki renk de\u011feri al\u0131r: <\/code>.<\/p>\n
Bu \u00f6zellikler, bir \u00f6\u011fenin kendisi \u00fczerine uygulan\u0131r, global ::-webkit-scrollbar<\/code> gibi pseudo-elementler \u00fczerine de\u011fil.<\/p>\n
\u00d6rnek: Firefox Kayd\u0131rma \u00c7ubu\u011fu \u00d6zelle\u015ftirmesi<\/h4>\n
\/ Firefox taray\u0131c\u0131lar i\u00e7in <\/em>\/\n\n.my-custom-scroll-div {\n    scrollbar-width: thin; \/ Kayd\u0131rma \u00e7ubu\u011funu ince yap <\/em>\/\n    scrollbar-color: #6a1b9a #e0e0e0; \/ Kayd\u0131r\u0131c\u0131 rengi mor, iz rengi a\u00e7\u0131k gri <\/em>\/\n}\n\n\/ Genel kayd\u0131rma \u00e7ubuklar\u0131 i\u00e7in <\/em>\/\nbody {\n    scrollbar-width: auto; \/ Varsay\u0131lan geni\u015flik <\/em>\/\n    scrollbar-color: #888 #f1f1f1; \/ Kayd\u0131r\u0131c\u0131 rengi koyu gri, iz rengi a\u00e7\u0131k gri <\/em>\/\n}<\/code><\/pre>\n
A\u00e7\u0131klama:<\/strong>
\nYukar\u0131daki \u00f6rnekte, .my-custom-scroll-div<\/code> s\u0131n\u0131f\u0131na sahip bir \u00f6\u011fe i\u00e7in kayd\u0131rma \u00e7ubu\u011fu inceltilmi\u015f ve mor-a\u00e7\u0131k gri renk \u015femas\u0131 uygulanm\u0131\u015ft\u0131r. body<\/code> elementi i\u00e7in ise genel kayd\u0131rma \u00e7ubu\u011fu varsay\u0131lan geni\u015flikte b\u0131rak\u0131larak koyu gri-a\u00e7\u0131k gri renk \u015femas\u0131 kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\n
S\u0131n\u0131rlamalar:<\/strong>
\nFirefox’un sundu\u011fu bu \u00f6zellikler, WebKit’in pseudo-elementleri kadar detayl\u0131 \u00f6zelle\u015ftirme imkan\u0131 sunmaz. \u00d6rne\u011fin, kayd\u0131rma \u00e7ubu\u011fu d\u00fc\u011fmelerini, k\u00f6\u015feleri veya kayd\u0131r\u0131c\u0131n\u0131n border-radius<\/code> gibi stil \u00f6zelliklerini do\u011frudan kontrol edemezsiniz. Bu, taray\u0131c\u0131lar aras\u0131 tutarl\u0131 bir tasar\u0131m elde etmeyi zorla\u015ft\u0131rabilir.<\/p>\n
IE\/Edge (Legacy) ve Standartla\u015fma \u00c7abalar\u0131<\/h3>\n
Eski Internet Explorer ve Edge (Chromium \u00f6ncesi) s\u00fcr\u00fcmleri, WebKit veya Firefox’tan farkl\u0131, kendine \u00f6zg\u00fc kayd\u0131rma \u00e7ubu\u011fu \u00f6zelliklerine sahipti. \u00d6rne\u011fin, scrollbar-base-color<\/code>, scrollbar-face-color<\/code>, scrollbar-track-color<\/code> gibi \u00f6zellikler kullan\u0131l\u0131yordu. Ancak bu \u00f6zellikler art\u0131k modern taray\u0131c\u0131lar taraf\u0131ndan desteklenmemektedir ve kullan\u0131lmamal\u0131d\u0131r.<\/p>\n
Microsoft Edge’in Chromium tabanl\u0131 bir taray\u0131c\u0131ya ge\u00e7mesiyle birlikte, g\u00fcncel Edge s\u00fcr\u00fcmleri WebKit pseudo-elementlerini desteklemektedir. Bu, WebKit tabanl\u0131 taray\u0131c\u0131lar i\u00e7in yazd\u0131\u011f\u0131n\u0131z CSS’in Edge’de de \u00e7al\u0131\u015faca\u011f\u0131 anlam\u0131na gelir.<\/p>\n
CSS Scrollbars Mod\u00fcl\u00fc, W3C taraf\u0131ndan kayd\u0131rma \u00e7ubuklar\u0131 i\u00e7in standart bir \u00f6zelle\u015ftirme y\u00f6ntemi olu\u015fturma \u00e7abas\u0131d\u0131r. Firefox’un uygulad\u0131\u011f\u0131 scrollbar-width<\/code> ve scrollbar-color<\/code> \u00f6zellikleri bu mod\u00fcl\u00fcn bir par\u00e7as\u0131d\u0131r. Ama\u00e7, t\u00fcm taray\u0131c\u0131lar\u0131n destekleyece\u011fi evrensel bir \u00e7\u00f6z\u00fcm sunmakt\u0131r. Ancak, bu mod\u00fcl hala geli\u015fim a\u015famas\u0131ndad\u0131r ve WebKit’in sundu\u011fu detayl\u0131 kontrol seviyesine ula\u015fmas\u0131 zaman alabilir.<\/p>\n
Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 Gizleme<\/h3>\n
Baz\u0131 durumlarda, kayd\u0131rma \u00e7ubuklar\u0131n\u0131 tamamen gizlemek isteyebilirsiniz. Bu, \u00f6zellikle \u00f6zel JavaScript tabanl\u0131 kayd\u0131rma \u00e7\u00f6z\u00fcmleri kullan\u0131ld\u0131\u011f\u0131nda veya \u00e7ok minimal bir tasar\u0131m hedeflendi\u011finde tercih edilebilir. Ancak, kayd\u0131rma \u00e7ubuklar\u0131n\u0131 gizlerken eri\u015filebilirlik sorunlar\u0131na yol a\u00e7mamaya dikkat etmek \u00f6nemlidir.<\/p>\n
WebKit Taray\u0131c\u0131lar \u0130\u00e7in Gizleme<\/h4>\n
WebKit tabanl\u0131 taray\u0131c\u0131larda kayd\u0131rma \u00e7ubuklar\u0131n\u0131 gizlemek i\u00e7in birka\u00e7 y\u00f6ntem vard\u0131r:<\/p>\n
\/ Y\u00f6ntem 1: Geni\u015fli\u011fi s\u0131f\u0131ra ayarlama <\/em>\/\n.hide-scroll-webkit::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n}\n\n\/ Y\u00f6ntem 2: display: none kullanma (baz\u0131 durumlarda daha iyi \u00e7al\u0131\u015fabilir) <\/em>\/\n.hide-scroll-webkit-display-none::-webkit-scrollbar {\n    display: none;\n}<\/code><\/pre>\n
A\u00e7\u0131klama:<\/strong>
\nHer iki y\u00f6ntem de kayd\u0131rma \u00e7ubu\u011funu g\u00f6rsel olarak gizlerken, i\u00e7eri\u011fin kayd\u0131r\u0131labilir kalmas\u0131n\u0131 sa\u011flar. width: 0;<\/code> veya height: 0;<\/code> genellikle daha g\u00fcvenli bir y\u00f6ntem olarak kabul edilir \u00e7\u00fcnk\u00fc display: none;<\/code> bazen beklenmedik davran\u0131\u015flara yol a\u00e7abilir.<\/p>\n
Firefox Taray\u0131c\u0131lar \u0130\u00e7in Gizleme<\/h4>\n
Firefox’ta kayd\u0131rma \u00e7ubu\u011funu gizlemek daha basittir:<\/p>\n
\/ Firefox taray\u0131c\u0131lar i\u00e7in <\/em>\/\n.hide-scroll-firefox {\n    scrollbar-width: none;\n}<\/code><\/pre>\n
A\u00e7\u0131klama:<\/strong>
\nscrollbar-width: none;<\/code> \u00f6zelli\u011fi, Firefox’ta kayd\u0131rma \u00e7ubu\u011funu gizlerken, i\u00e7eri\u011fin kayd\u0131r\u0131labilir kalmas\u0131n\u0131 sa\u011flar.<\/p>\n
Alternatif Y\u00f6ntem: overflow: hidden;<\/code><\/h4>\n
overflow: hidden;<\/code> \u00f6zelli\u011fini kullanmak, bir \u00f6\u011fenin i\u00e7eri\u011finin kutusundan ta\u015fan k\u0131sm\u0131n\u0131 tamamen gizler ve kayd\u0131rma \u00e7ubuklar\u0131n\u0131 da ortadan kald\u0131r\u0131r. Ancak bu, i\u00e7eri\u011fin kayd\u0131r\u0131lamayaca\u011f\u0131 anlam\u0131na gelir. Bu nedenle, sadece i\u00e7eri\u011fin tamamen g\u00f6r\u00fcn\u00fcr oldu\u011fu ve kayd\u0131rmaya gerek olmayan durumlarda kullan\u0131lmal\u0131d\u0131r.<\/p>\n
.no-scroll-content {\n    overflow: hidden; \/ \u0130\u00e7eri\u011fi gizler ve kayd\u0131rmay\u0131 engeller <\/em>\/\n}<\/code><\/pre>\n
Eri\u015filebilirlik Uyar\u0131s\u0131:<\/strong>
\nKayd\u0131rma \u00e7ubuklar\u0131n\u0131 tamamen gizlemek, fare tekerle\u011fi veya dokunmatik y\u00fczey kullanamayan kullan\u0131c\u0131lar i\u00e7in eri\u015filebilirlik sorunlar\u0131 yaratabilir. \u0130\u00e7eri\u011fin kayd\u0131r\u0131labilir oldu\u011funu belirten g\u00f6rsel bir ipucu her zaman \u00f6nemlidir. E\u011fer kayd\u0131rma \u00e7ubuklar\u0131n\u0131 gizliyorsan\u0131z, kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011fi kayd\u0131rmak i\u00e7in alternatif bir y\u00f6ntem (\u00f6rne\u011fin, \u00f6zel d\u00fc\u011fmeler veya klavye navigasyonu) sa\u011flad\u0131\u011f\u0131n\u0131zdan emin olun.<\/p>\n
Eri\u015filebilirlik (Accessibility) ve Kullan\u0131c\u0131 Deneyimi<\/h3>\n
Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirirken estetik kayg\u0131lar\u0131n yan\u0131 s\u0131ra eri\u015filebilirlik ve kullan\u0131c\u0131 deneyimini de g\u00f6z \u00f6n\u00fcnde bulundurmak hayati \u00f6nem ta\u015f\u0131r. G\u00fczel g\u00f6r\u00fcnen bir kayd\u0131rma \u00e7ubu\u011fu, e\u011fer kullan\u0131lam\u0131yorsa veya eri\u015filebilirlik sorunlar\u0131 yarat\u0131yorsa amac\u0131na ula\u015famaz.<\/p>\n
Renk Kontrast\u0131<\/h4>\n
Kayd\u0131rma \u00e7ubu\u011funun kayd\u0131r\u0131c\u0131s\u0131 (thumb) ile izi (track) aras\u0131ndaki renk kontrast\u0131 yeterli olmal\u0131d\u0131r. \u00d6zellikle d\u00fc\u015f\u00fck g\u00f6r\u00fc\u015fl\u00fc veya renk k\u00f6r\u00fc kullan\u0131c\u0131lar i\u00e7in bu \u00f6nemlidir. WCAG (Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri) standartlar\u0131na uygun olarak, metin ve arka plan aras\u0131ndaki kontrast oran\u0131 gibi kayd\u0131rma \u00e7ubu\u011fu bile\u015fenleri aras\u0131nda da yeterli kontrast sa\u011flamaya \u00e7al\u0131\u015f\u0131n. Kayd\u0131r\u0131c\u0131n\u0131n g\u00f6r\u00fcn\u00fcr olmas\u0131 ve izinden kolayca ay\u0131rt edilebilmesi gerekir.<\/p>\n
G\u00f6r\u00fcn\u00fcrl\u00fck ve Alg\u0131lanabilirlik<\/h4>\n
Kayd\u0131rma \u00e7ubuklar\u0131, i\u00e7eri\u011fin kayd\u0131r\u0131labilir oldu\u011funu kullan\u0131c\u0131ya bildiren \u00f6nemli g\u00f6rsel ipu\u00e7lar\u0131d\u0131r. E\u011fer kayd\u0131rma \u00e7ubuklar\u0131 \u00e7ok ince, \u00e7ok \u015feffaf veya arka planla \u00e7ok iyi harmanlanm\u0131\u015fsa, kullan\u0131c\u0131lar i\u00e7eri\u011fin daha fazlas\u0131n\u0131n oldu\u011funu fark etmeyebilir. Bu, “kayd\u0131rma yan\u0131lsamas\u0131” (scroll illusion) olarak bilinen bir soruna yol a\u00e7abilir ve kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011fin tamam\u0131na eri\u015fmesini engelleyebilir. Kayd\u0131rma \u00e7ubuklar\u0131n\u0131n her zaman belirli bir d\u00fczeyde g\u00f6r\u00fcn\u00fcr ve alg\u0131lanabilir oldu\u011fundan emin olun.<\/p>\n
Kullan\u0131labilirlik ve Etkile\u015fim<\/h4>\n
Kayd\u0131r\u0131c\u0131 (thumb) yeterince b\u00fcy\u00fck olmal\u0131 ve kolayca t\u0131klanabilir veya s\u00fcr\u00fcklenebilir olmal\u0131d\u0131r. \u00c7ok k\u00fc\u00e7\u00fck kayd\u0131r\u0131c\u0131lar, \u00f6zellikle dokunmatik cihazlarda veya hassas motor becerileri k\u0131s\u0131tl\u0131 kullan\u0131c\u0131lar i\u00e7in zorlay\u0131c\u0131 olabilir. Kayd\u0131r\u0131c\u0131n\u0131n \u00fczerine gelindi\u011finde (hover) veya t\u0131kland\u0131\u011f\u0131nda (active) g\u00f6rsel geri bildirimler (renk de\u011fi\u015fimi, hafif bir g\u00f6lge) sa\u011flamak, kullan\u0131c\u0131ya etkile\u015fimde bulundu\u011funu hissettirir ve deneyimi iyile\u015ftirir.<\/p>\n
Klavye Navigasyonu ve Alternatifler<\/h4>\n
Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 gizlemeyi d\u00fc\u015f\u00fcn\u00fcyorsan\u0131z veya \u00e7ok minimal hale getiriyorsan\u0131z, klavye ile gezinme ve di\u011fer alternatif kayd\u0131rma y\u00f6ntemlerini g\u00f6z \u00f6n\u00fcnde bulundurun. Klavye ok tu\u015flar\u0131, Page Up\/Page Down tu\u015flar\u0131 ve Home\/End tu\u015flar\u0131 ile kayd\u0131rma i\u015flevselli\u011finin sorunsuz \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olun. Gerekirse, i\u00e7eri\u011fi kayd\u0131rmak i\u00e7in \u00f6zel d\u00fc\u011fmeler veya bir “yukar\u0131 \u00e7\u0131k” d\u00fc\u011fmesi gibi alternatif aray\u00fcz \u00f6\u011feleri sa\u011flay\u0131n.<\/p>\n
Pratik Uygulama \u0130pu\u00e7lar\u0131 ve En \u0130yi Y\u00f6ntemler<\/h3>\n
Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirirken dikkate alman\u0131z gereken baz\u0131 pratik ipu\u00e7lar\u0131 ve en iyi y\u00f6ntemler \u015funlard\u0131r:<\/p>\n
Taray\u0131c\u0131 Uyumlulu\u011fu<\/h4>\n
Farkl\u0131 taray\u0131c\u0131lar i\u00e7in farkl\u0131 CSS kurallar\u0131 uygulaman\u0131z gerekebilece\u011fini unutmay\u0131n. WebKit tabanl\u0131 taray\u0131c\u0131lar i\u00e7in ::-webkit-scrollbar<\/code> pseudo-elementlerini, Firefox i\u00e7in scrollbar-width<\/code> ve scrollbar-color<\/code> \u00f6zelliklerini kullan\u0131n. Uygulaman\u0131z\u0131 veya sitenizi farkl\u0131 taray\u0131c\u0131larda (Chrome, Firefox, Safari, Edge) test ederek beklenen \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olun.<\/p>\n
Tutarl\u0131l\u0131k<\/h4>\n
Sitenizin veya uygulaman\u0131z\u0131n genelinde tutarl\u0131 bir kayd\u0131rma \u00e7ubu\u011fu stili kullanmaya \u00e7al\u0131\u015f\u0131n. Farkl\u0131 alanlarda \u00e7ok farkl\u0131 stiller kullanmak, kullan\u0131c\u0131 deneyimini kafa kar\u0131\u015ft\u0131r\u0131c\u0131 hale getirebilir. E\u011fer farkl\u0131 stiller kullanman\u0131z gerekiyorsa, bu farkl\u0131l\u0131klar\u0131n mant\u0131kl\u0131 bir nedeni oldu\u011fundan emin olun (\u00f6rne\u011fin, bir modal penceresi i\u00e7in farkl\u0131 bir stil).<\/p>\n
Minimalizm ve Abart\u0131dan Ka\u00e7\u0131nma<\/h4>\n
Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirirken a\u015f\u0131r\u0131ya ka\u00e7maktan ka\u00e7\u0131n\u0131n. \u00c7ok parlak renkler, karma\u015f\u0131k desenler veya a\u015f\u0131r\u0131 animasyonlar kullan\u0131c\u0131lar\u0131n dikkatini da\u011f\u0131tabilir ve i\u00e7eri\u011fin \u00f6n\u00fcne ge\u00e7ebilir. Temiz, i\u015flevsel ve estetik a\u00e7\u0131dan ho\u015f bir denge bulmaya \u00e7al\u0131\u015f\u0131n. Genellikle, kayd\u0131rma \u00e7ubuklar\u0131n\u0131n sitenin genel tasar\u0131m\u0131na uyum sa\u011flamas\u0131 ve fark edilmemesi tercih edilir.<\/p>\n
Performans<\/h4>\n
CSS tabanl\u0131 kayd\u0131rma \u00e7ubu\u011fu \u00f6zelle\u015ftirmeleri genellikle hafiftir ve performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde etkilemez. Ancak, \u00e7ok karma\u015f\u0131k g\u00f6lgeler, gradyanlar veya animasyonlar kullanmak baz\u0131 durumlarda k\u00fc\u00e7\u00fck performans etkileri yaratabilir. Genellikle bu durum nadirdir ve \u00e7o\u011fu \u00f6zelle\u015ftirme i\u00e7in endi\u015felenmeye gerek yoktur.<\/p>\n
Kullan\u0131c\u0131 Tercihleri ve Medya Sorgular\u0131<\/h4>\n
Baz\u0131 kullan\u0131c\u0131lar, hareketli veya animasyonlu \u00f6\u011feleri tercih etmeyebilir. prefers-reduced-motion<\/code> gibi medya sorgular\u0131n\u0131 kullanarak, bu t\u00fcr kullan\u0131c\u0131lar i\u00e7in daha sade veya hareketsiz kayd\u0131rma \u00e7ubu\u011fu stilleri sa\u011flayabilirsiniz.<\/p>\n
@media (prefers-reduced-motion: reduce) {\n    \/ Kayd\u0131rma \u00e7ubuklar\u0131 i\u00e7in animasyonlar\u0131 veya ge\u00e7i\u015fleri devre d\u0131\u015f\u0131 b\u0131rak <\/em>\/\n    ::-webkit-scrollbar-thumb {\n        transition: none;\n    }\n    \/ Di\u011fer ilgili stiller <\/em>\/\n}<\/code><\/pre>\n
Bu, sitenizi daha kapsay\u0131c\u0131 hale getirir ve farkl\u0131 kullan\u0131c\u0131 ihtiya\u00e7lar\u0131na sayg\u0131 duyar.<\/p>\n
Sonu\u00e7<\/h3>\n
Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 CSS ile \u00f6zelle\u015ftirmek, web sitenizin veya uygulaman\u0131z\u0131n genel esteti\u011fini ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilecek g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. WebKit tabanl\u0131 taray\u0131c\u0131lar\u0131n sundu\u011fu detayl\u0131 pseudo-elementler ve Firefox’un standartla\u015ft\u0131r\u0131lm\u0131\u015f \u00f6zellikleri sayesinde, kayd\u0131rma \u00e7ubuklar\u0131n\u0131z\u0131 markan\u0131z\u0131n kimli\u011fine uygun hale getirebilir, daha modern ve profesyonel bir g\u00f6r\u00fcn\u00fcm kazand\u0131rabilirsiniz.<\/p>\n
Ancak, bu \u00f6zelle\u015ftirmeleri yaparken eri\u015filebilirlik ve kullan\u0131labilirlik ilkelerini g\u00f6z ard\u0131 etmemek kritik \u00f6neme sahiptir. Yeterli renk kontrast\u0131, alg\u0131lanabilirlik ve etkile\u015fim kolayl\u0131\u011f\u0131 sa\u011flamak, t\u00fcm kullan\u0131c\u0131lar i\u00e7in sorunsuz bir deneyim sunar. Taray\u0131c\u0131 uyumlulu\u011funu test etmek ve minimalist bir yakla\u015f\u0131m benimsemek, ba\u015far\u0131l\u0131 bir kayd\u0131rma \u00e7ubu\u011fu \u00f6zelle\u015ftirmesinin anahtarlar\u0131d\u0131r.<\/p>\n
Gelecekte, CSS Scrollbars Mod\u00fcl\u00fc’n\u00fcn daha da geli\u015fmesiyle birlikte, taray\u0131c\u0131lar aras\u0131 tutarl\u0131 ve g\u00fc\u00e7l\u00fc \u00f6zelle\u015ftirme se\u00e7eneklerinin daha yayg\u0131n hale gelmesi beklenmektedir. \u015eimdilik, farkl\u0131 taray\u0131c\u0131lar\u0131n yakla\u015f\u0131mlar\u0131n\u0131 anlayarak ve en iyi uygulamalar\u0131 takip ederek, sitenizin her k\u00f6\u015fesinin cilal\u0131 ve profesyonel g\u00f6r\u00fcnmesini sa\u011flayabilirsiniz. Kayd\u0131rma \u00e7ubuklar\u0131, genellikle fark edilmeyen k\u00fc\u00e7\u00fck bir detay olsa da, do\u011fru \u015fekilde tasarland\u0131\u011f\u0131nda genel kullan\u0131c\u0131 deneyimine b\u00fcy\u00fck katk\u0131 sa\u011flayabilir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler\nWeb sitelerinin ve uygulamalar\u0131n g\u00f6rsel \u00e7ekicili\u011fi, kullan\u0131c\u0131 deneyi","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-37968","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 ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler - 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-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler\" \/>\n<meta property=\"og:description\" content=\"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler Web sitelerinin ve uygulamalar\u0131n g\u00f6rsel \u00e7ekicili\u011fi, kullan\u0131c\u0131 deneyi\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-20T02:40:42+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler\",\"datePublished\":\"2026-01-20T02:40:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/\"},\"wordCount\":2749,\"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-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/\",\"name\":\"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-20T02:40:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler\"}]},{\"@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 ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler - 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-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler","og_description":"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler Web sitelerinin ve uygulamalar\u0131n g\u00f6rsel \u00e7ekicili\u011fi, kullan\u0131c\u0131 deneyi","og_url":"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-20T02:40:42+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler","datePublished":"2026-01-20T02:40:42+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/"},"wordCount":2749,"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-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/","url":"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/","name":"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-20T02:40:42+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-kaydirma-cubuklarini-ozellestirme-stil-rehberi-ve-ornekler\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS ile Kayd\u0131rma \u00c7ubuklar\u0131n\u0131 \u00d6zelle\u015ftirme: Stil Rehberi ve \u00d6rnekler"}]},{"@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\/37968","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=37968"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37968\/revisions"}],"predecessor-version":[{"id":37969,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37968\/revisions\/37969"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}