{"id":33227,"date":"2025-10-31T08:41:16","date_gmt":"2025-10-31T05:41:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33227"},"modified":"2025-10-31T08:41:16","modified_gmt":"2025-10-31T05:41:16","slug":"css3-hizli-bir-giris","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/","title":{"rendered":"CSS3: H\u0131zl\u0131 Bir Giri\u015f"},"content":{"rendered":"

CSS3: H\u0131zl\u0131 Bir Giri\u015f<\/h2>\n

<\/p>\n

Giri\u015f: CSS’ten CSS3’e Yolculuk<\/h2>\n

Web sayfalar\u0131n\u0131n g\u00f6rsel d\u00fczenini, renklerini, fontlar\u0131n\u0131 ve genel esteti\u011fini belirleyen temel dil olan CSS (Cascading Style Sheets), web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. HTML’in yap\u0131sal iskeletini olu\u015fturdu\u011fu bir web sayfas\u0131n\u0131n, CSS olmadan sadece d\u00fcz metin ve ba\u011flant\u0131lardan ibaret olaca\u011f\u0131n\u0131 s\u00f6ylemek yanl\u0131\u015f olmaz. CSS, i\u00e7eri\u011fi sunumdan ay\u0131rarak, geli\u015ftiricilere daha d\u00fczenli, y\u00f6netilebilir ve eri\u015filebilir web siteleri olu\u015fturma imkan\u0131 sunar.<\/p>\n

CSS’in ilk s\u00fcr\u00fcm\u00fc CSS1, 1996 y\u0131l\u0131nda W3C (World Wide Web Consortium) taraf\u0131ndan yay\u0131nland\u0131. Temel font, renk, metin hizalama ve kutu modeli gibi \u00f6zelliklerle web tasar\u0131m\u0131na \u00f6nemli bir ad\u0131m att\u0131rd\u0131. Ancak modern web’in dinamik ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamaktan uzakt\u0131. 1998’de gelen CSS2, daha geli\u015fmi\u015f se\u00e7iciler, mutlak ve g\u00f6receli konumland\u0131rma, z-index<\/code> gibi \u00f6zelliklerle tasar\u0131mc\u0131lara daha fazla kontrol sa\u011flad\u0131. \u00d6zellikle bask\u0131 stilleri ve medya t\u00fcrleri i\u00e7in destek sunmas\u0131 da \u00f6nemli bir yenilikti.<\/p>\n

Ancak web d\u00fcnyas\u0131 h\u0131zla de\u011fi\u015fiyordu. Statik sayfalar\u0131n yerini dinamik, etkile\u015fimli ve g\u00f6rsel a\u00e7\u0131dan zengin uygulamalar al\u0131yordu. Bu de\u011fi\u015fim, CSS2’nin yeteneklerini zorlamaya ba\u015flad\u0131. Geli\u015ftiriciler, yuvarlak k\u00f6\u015feler, g\u00f6lgeler, animasyonlar gibi modern tasar\u0131m \u00f6\u011felerini ger\u00e7ekle\u015ftirmek i\u00e7in genellikle karma\u015f\u0131k JavaScript \u00e7\u00f6z\u00fcmlerine veya g\u00f6rsel tabanl\u0131 (sprite) hilelere ba\u015fvurmak zorunda kal\u0131yorlard\u0131. Bu durum, hem performans sorunlar\u0131na yol a\u00e7\u0131yor hem de kodun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131r\u0131yordu.<\/p>\n

\u0130\u015fte tam bu noktada, 2000’li y\u0131llar\u0131n ortalar\u0131ndan itibaren geli\u015ftirilmeye ba\u015flanan ve 2010’lu y\u0131llar\u0131n ba\u015flar\u0131nda yayg\u0131nla\u015fan CSS3 devreye girdi. CSS3, \u00f6nceki s\u00fcr\u00fcmlerden farkl\u0131 olarak tek bir b\u00fcy\u00fck spesifikasyon yerine, bir dizi mod\u00fclden olu\u015fur. Bu mod\u00fcler yap\u0131, W3C’nin yeni \u00f6zellikleri daha h\u0131zl\u0131 bir \u015fekilde standartla\u015ft\u0131rmas\u0131na ve taray\u0131c\u0131 \u00fcreticilerinin de bu \u00f6zellikleri a\u015famal\u0131 olarak uygulamas\u0131na olanak tan\u0131r. \u00d6rne\u011fin, “CSS Box Model Level 3”, “CSS Backgrounds and Borders Level 3” veya “CSS Transitions Level 3” gibi her biri belirli bir alana odaklanm\u0131\u015f ayr\u0131 mod\u00fcller bulunur. Bu sayede, t\u00fcm CSS3’\u00fcn tamamlanmas\u0131n\u0131 beklemeksizin, her bir mod\u00fcl olgunla\u015ft\u0131k\u00e7a kullan\u0131lmaya ba\u015flanabilir.<\/p>\n

CSS3’\u00fcn temel amac\u0131, web tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricilerine, karma\u015f\u0131k JavaScript veya g\u00f6rsel manip\u00fclasyonlara gerek kalmadan, do\u011frudan CSS ile zengin ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturma g\u00fcc\u00fc vermektir. Bu, kodun daha temiz, daha anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flarken, ayn\u0131 zamanda sayfalar\u0131n daha h\u0131zl\u0131 y\u00fcklenmesine ve daha iyi performans g\u00f6stermesine yard\u0131mc\u0131 olur.<\/p>\n

CSS3’\u00fcn ilk \u00e7\u0131kt\u0131\u011f\u0131 d\u00f6nemlerde taray\u0131c\u0131 uyumlulu\u011fu \u00f6nemli bir konuydu. Taray\u0131c\u0131lar yeni \u00f6zellikleri farkl\u0131 zamanlarda ve bazen farkl\u0131 uygulamalarla destekledikleri i\u00e7in, geli\u015ftiriciler “vendor prefixes” (tedarik\u00e7i \u00f6nekleri) kullanmak zorunda kald\u0131lar. \u00d6rne\u011fin, border-radius<\/code> \u00f6zelli\u011fi i\u00e7in -webkit-border-radius<\/code> (Chrome, Safari), -moz-border-radius<\/code> (Firefox), -o-border-radius<\/code> (Opera) gibi \u00f6nekler kullan\u0131ld\u0131. G\u00fcn\u00fcm\u00fczde \u00e7o\u011fu modern taray\u0131c\u0131 CSS3 \u00f6zelliklerinin b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131 \u00f6neksiz olarak desteklese de, baz\u0131 deneysel veya daha az yayg\u0131n \u00f6zellikler i\u00e7in hala \u00f6nekler gerekebilir. Bu, CSS3’\u00fcn dinamik yap\u0131s\u0131n\u0131n ve s\u00fcrekli geli\u015fiminin bir g\u00f6stergesidir.<\/p>\n

Bu makalede, CSS3’\u00fcn getirdi\u011fi ba\u015fl\u0131ca yenilikleri, bu yeniliklerin nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve web geli\u015ftirmedeki \u00f6nemini h\u0131zl\u0131ca ele alaca\u011f\u0131z. Amac\u0131m\u0131z, CSS3 d\u00fcnyas\u0131na kapsaml\u0131 bir giri\u015f yaparak, modern web tasar\u0131m\u0131n\u0131n temel ta\u015flar\u0131n\u0131 anlaman\u0131za yard\u0131mc\u0131 olmakt\u0131r.<\/p>\n

Temel Se\u00e7iciler ve \u00d6zellikler (CSS2’den Devam Edenler)<\/h2>\n

CSS3’\u00fcn getirdi\u011fi yeniliklere dalmadan \u00f6nce, CSS’in temel yap\u0131 ta\u015flar\u0131n\u0131 ve CSS2’den miras kalan ancak CSS3 projelerinde de aktif olarak kulland\u0131\u011f\u0131m\u0131z se\u00e7icileri ve \u00f6zelliklerin \u00fczerinden ge\u00e7mek \u00f6nemlidir. Bu temel bilgiler, daha karma\u015f\u0131k CSS3 \u00f6zelliklerini anlamak ve uygulamak i\u00e7in sa\u011flam bir zemin olu\u015fturur.<\/p>\n

Se\u00e7iciler (Selectors)<\/h3>\n

Se\u00e7iciler, HTML belgesindeki hangi \u00f6\u011felere stil uygulanaca\u011f\u0131n\u0131 belirlememizi sa\u011flayan mekanizmalard\u0131r.<\/p>\n

* Element Se\u00e7iciler:<\/strong> Do\u011frudan HTML etiketinin ad\u0131n\u0131 kullanarak belirli bir t\u00fcrdeki t\u00fcm \u00f6\u011feleri hedefler.<\/p>\n

p {\n        color: black;\n    }\n    div {\n        border: 1px solid gray;\n    }<\/code><\/pre>\n
*   S\u0131n\u0131f Se\u00e7iciler:<\/strong> class<\/code> niteli\u011fine sahip \u00f6\u011feleri hedefler. Bir sayfada birden fazla \u00f6\u011fe ayn\u0131 s\u0131n\u0131fa sahip olabilir. .s\u0131n\u0131fAd\u0131<\/code> \u015feklinde kullan\u0131l\u0131r.<\/p>\n
.highlight {\n        background-color: yellow;\n    }<\/code><\/pre>\n
*   ID Se\u00e7iciler:<\/strong> id<\/code> niteli\u011fine sahip tek bir \u00f6\u011feyi hedefler. Bir sayfada ayn\u0131 ID’ye sahip birden fazla \u00f6\u011fe olmamal\u0131d\u0131r. #idAd\u0131<\/code> \u015feklinde kullan\u0131l\u0131r.<\/p>\n
#header {\n        font-size: 2em;\n    }<\/code><\/pre>\n
*   Nitelik Se\u00e7iciler (Attribute Selectors):<\/strong> Belirli bir niteli\u011fe veya nitelik de\u011ferine sahip \u00f6\u011feleri se\u00e7er.<\/p>\n
\/ type=\"text\" niteli\u011fine sahip t\u00fcm input'lar <\/em>\/\n    input[type=\"text\"] {\n        border: 1px solid blue;\n    }\n    \/ href niteli\u011fi \"example.com\" ile ba\u015flayan t\u00fcm a etiketleri <\/em>\/\n    a[href^=\"https:\/\/example.com\"] {\n        color: green;\n    }<\/code><\/pre>\n
*   S\u00f6zde S\u0131n\u0131flar (Pseudo-classes):<\/strong> Bir \u00f6\u011fenin belirli bir durumunu veya konumunu hedefler. \u00d6rne\u011fin, bir ba\u011flant\u0131n\u0131n \u00fczerine gelindi\u011finde (:hover<\/code>), bir \u00f6\u011fenin ilk \u00e7ocu\u011fu oldu\u011funda (:first-child<\/code>) gibi durumlar.<\/p>\n
a:hover {\n        text-decoration: underline;\n    }\n    li:nth-child(even) { \/ \u00c7ift say\u0131l\u0131 liste \u00f6\u011feleri <\/em>\/\n        background-color: #f0f0f0;\n    }<\/code><\/pre>\n
*   S\u00f6zde Elemanlar (Pseudo-elements):<\/strong> Bir \u00f6\u011fenin belirli bir b\u00f6l\u00fcm\u00fcn\u00fc hedefler. \u00d6rne\u011fin, bir paragraf\u0131n ilk harfi (::first-letter<\/code>) veya bir \u00f6\u011fenin \u00f6ncesine\/sonras\u0131na i\u00e7erik eklemek (::before<\/code>, ::after<\/code>).<\/p>\n
p::first-letter {\n        font-size: 2em;\n        font-weight: bold;\n    }\n    h2::after {\n        content: \" ---\";\n        color: gray;\n    }<\/code><\/pre>\n
Kal\u0131t\u0131m (Inheritance) ve \u015eelale (Cascade)<\/h3>\n
CSS’in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak i\u00e7in bu iki temel prensibi bilmek hayati \u00f6neme sahiptir.<\/p>\n
*   Kal\u0131t\u0131m:<\/strong> Baz\u0131 CSS \u00f6zellikleri (\u00f6rne\u011fin color<\/code>, font-family<\/code>, font-size<\/code>, text-align<\/code>) \u00fcst \u00f6\u011feden alt \u00f6\u011felere otomatik olarak miras al\u0131n\u0131r. Yani, bir div<\/code> \u00f6\u011fesine font-family<\/code> tan\u0131mlad\u0131\u011f\u0131n\u0131zda, bu div<\/code> i\u00e7indeki t\u00fcm p<\/code>, span<\/code> gibi \u00f6\u011feler de ayn\u0131 fontu kullan\u0131r, aksi belirtilmedik\u00e7e. Bu, kod tekrar\u0131n\u0131 azalt\u0131r ve stil y\u00f6netimini kolayla\u015ft\u0131r\u0131r.
\n*   \u015eelale:<\/strong> Bir \u00f6\u011feye birden fazla stil kural\u0131 uyguland\u0131\u011f\u0131nda, hangi kural\u0131n ge\u00e7erli olaca\u011f\u0131n\u0131 belirleyen bir \u00f6ncelik s\u0131ras\u0131 vard\u0131r. Bu s\u0131ra, a\u015fa\u011f\u0131daki fakt\u00f6rlere g\u00f6re belirlenir:
\n    1.  \u00d6nem (Importance):<\/strong> !important<\/code> anahtar kelimesiyle i\u015faretlenmi\u015f kurallar en y\u00fcksek \u00f6nceli\u011fe sahiptir (ancak genellikle k\u00f6t\u00fc bir uygulamad\u0131r ve ka\u00e7\u0131n\u0131lmal\u0131d\u0131r).
\n    2.  Kaynak (Origin):<\/strong> Taray\u0131c\u0131 varsay\u0131lan stilleri, kullan\u0131c\u0131 stilleri ve yazar stilleri (sizin yazd\u0131\u011f\u0131n\u0131z CSS) aras\u0131nda bir \u00f6ncelik s\u0131ras\u0131 vard\u0131r. Yazar stilleri genellikle kullan\u0131c\u0131 ve taray\u0131c\u0131 stillerinden daha \u00f6nceliklidir.
\n    3.  \u00d6zg\u00fcll\u00fck (Specificity):<\/strong> Se\u00e7icilerin ne kadar spesifik (\u00f6zg\u00fcn) oldu\u011fu. ID se\u00e7iciler s\u0131n\u0131f se\u00e7icilerden, s\u0131n\u0131f se\u00e7iciler element se\u00e7icilerden daha \u00f6zg\u00fcnd\u00fcr. \u0130\u00e7 i\u00e7e se\u00e7iciler de \u00f6zg\u00fcnl\u00fc\u011f\u00fc art\u0131r\u0131r.
\n    4.  S\u0131ra (Order):<\/strong> Ayn\u0131 \u00f6zg\u00fcnl\u00fc\u011fe sahip kurallar aras\u0131nda, en son tan\u0131mlanan kural ge\u00e7erli olur.<\/p>\n
Bu temel se\u00e7ici ve prensipler, CSS3’\u00fcn sundu\u011fu geli\u015fmi\u015f \u00f6zelliklerle birle\u015ferek, web tasar\u0131m\u0131nda s\u0131n\u0131rs\u0131z imkanlar sunar. \u015eimdi CSS3’\u00fcn getirdi\u011fi yeniliklere daha yak\u0131ndan bakal\u0131m.<\/p>\n
CSS3’\u00fcn Getirdi\u011fi Yenilikler ve Mod\u00fcller<\/h2>\n
CSS3, web tasar\u0131m\u0131na adeta yeni bir boyut kazand\u0131ran bir\u00e7ok mod\u00fcl ve \u00f6zellik seti ile geldi. Bu yenilikler, daha \u00f6nce JavaScript veya g\u00f6rsellerle zorlukla yap\u0131lan bir\u00e7ok g\u00f6rsel efekti ve d\u00fczeni do\u011frudan CSS ile m\u00fcmk\u00fcn k\u0131ld\u0131. \u0130\u015fte CSS3’\u00fcn \u00f6ne \u00e7\u0131kan baz\u0131 mod\u00fclleri ve getirdi\u011fi \u00f6nemli \u00f6zellikler:<\/p>\n
Renkler ve Opakl\u0131k (Colors & Opacity)<\/h3>\n
CSS3, renk tan\u0131mlama y\u00f6ntemlerine \u00f6nemli eklemeler yapt\u0131.<\/p>\n
*   RGBA (Red, Green, Blue, Alpha):<\/strong> Renkleri k\u0131rm\u0131z\u0131, ye\u015fil, mavi bile\u015fenlerinin yan\u0131 s\u0131ra bir de saydaml\u0131k (alpha) de\u011feri ile tan\u0131mlamam\u0131z\u0131 sa\u011flar. Alpha de\u011feri 0 (tamamen \u015feffaf) ile 1 (tamamen opak) aras\u0131nda bir ondal\u0131k say\u0131d\u0131r.<\/p>\n
.yari-saydam {\n        background-color: rgba(255, 0, 0, 0.5); \/ Yar\u0131 saydam k\u0131rm\u0131z\u0131 <\/em>\/\n    }<\/code><\/pre>\n
*   HSLA (Hue, Saturation, Lightness, Alpha):<\/strong> Renkleri ton (hue), doygunluk (saturation), a\u00e7\u0131kl\u0131k (lightness) ve saydaml\u0131k (alpha) de\u011ferleri ile tan\u0131mlar. HSLA, renkleri insan g\u00f6z\u00fcn\u00fcn alg\u0131lad\u0131\u011f\u0131 \u015fekilde d\u00fc\u015f\u00fcnmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n
.pastel-mavi {\n        background-color: hsla(200, 50%, 70%, 0.8); \/ Yar\u0131 saydam pastel mavi <\/em>\/\n    }<\/code><\/pre>\n
Bu yeni renk modelleri, \u00f6zellikle modern, katmanl\u0131 ve \u015feffafl\u0131k i\u00e7eren aray\u00fcz tasar\u0131mlar\u0131 i\u00e7in b\u00fcy\u00fck esneklik sunar.<\/p>\n
Metin Efektleri (Text Effects)<\/h3>\n
CSS3, metinlerle ilgili g\u00f6rsel efektleri zenginle\u015ftirdi.<\/p>\n
*   text-shadow<\/code>:<\/strong> Metinlere g\u00f6lge eklemeyi sa\u011flar. yatay-kayma dikey-kayma bulan\u0131kl\u0131k-yar\u0131\u00e7ap renk<\/code> \u015feklinde kullan\u0131l\u0131r.<\/p>\n
h1 {\n        text-shadow: 2px 2px 4px #aaa; \/ Hafif gri g\u00f6lge <\/em>\/\n    }<\/code><\/pre>\n
*   word-wrap<\/code> ve word-break<\/code>:<\/strong> Uzun kelimelerin veya URL’lerin kutu d\u0131\u015f\u0131na ta\u015fmas\u0131n\u0131 engellemek i\u00e7in kelimelerin k\u0131r\u0131lma \u015feklini kontrol eder. word-wrap: break-word<\/code> veya word-break: break-all<\/code> gibi de\u011ferler alabilir.
\n*   text-overflow<\/code>:<\/strong> Metin bir kutuya s\u0131\u011fmad\u0131\u011f\u0131nda ne olaca\u011f\u0131n\u0131 belirler. ellipsis<\/code> de\u011feri, metnin sonuna \u00fc\u00e7 nokta ekleyerek kesildi\u011fini belirtir. Genellikle white-space: nowrap<\/code> ve overflow: hidden<\/code> ile birlikte kullan\u0131l\u0131r.<\/p>\n
.tek-satir {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 200px;\n    }<\/code><\/pre>\n
*   Web Fontlar\u0131 (@font-face<\/code>):<\/strong> Web sitelerinde sadece kullan\u0131c\u0131n\u0131n bilgisayar\u0131nda y\u00fckl\u00fc olan fontlarla s\u0131n\u0131rl\u0131 kalmak yerine, \u00f6zel fontlar\u0131 do\u011frudan sunucudan y\u00fckleyip kullanma imkan\u0131 sunar. Bu, marka kimli\u011fini korumak ve tasar\u0131msal \u00f6zg\u00fcrl\u00fck sa\u011flamak a\u00e7\u0131s\u0131ndan devrim niteli\u011findedir. Google Fonts gibi servisler bu \u00f6zelli\u011fi yayg\u0131nla\u015ft\u0131rm\u0131\u015ft\u0131r.<\/p>\n
@font-face {\n        font-family: 'MyWebFont';\n        src: url('mywebfont.woff2') format('woff2'),\n             url('mywebfont.woff') format('woff');\n        font-weight: normal;\n        font-style: normal;\n    }\n    body {\n        font-family: 'MyWebFont', sans-serif;\n    }<\/code><\/pre>\n
Kutular ve Kenarl\u0131klar (Boxes & Borders)<\/h3>\n
Kutu modelinin g\u00f6rsel sunumunda b\u00fcy\u00fck esneklik sa\u011fland\u0131.<\/p>\n
*   border-radius<\/code>:<\/strong> \u00d6\u011felerin k\u00f6\u015felerini yuvarlamak i\u00e7in kullan\u0131l\u0131r. Tek bir de\u011fer t\u00fcm k\u00f6\u015feleri yuvarlar; d\u00f6rt de\u011fer s\u0131ras\u0131yla sol \u00fcst, sa\u011f \u00fcst, sa\u011f alt, sol alt k\u00f6\u015feleri etkiler.<\/p>\n
.yuvarlak {\n        border-radius: 10px; \/ T\u00fcm k\u00f6\u015feler 10px yuvarlak <\/em>\/\n    }\n    .kapsul {\n        border-radius: 50%; \/ Tamamen yuvarlak (daire\/oval) <\/em>\/\n    }<\/code><\/pre>\n
*   box-shadow<\/code>:<\/strong> \u00d6\u011felere g\u00f6lge ekler. yatay-kayma dikey-kayma bulan\u0131kl\u0131k-yar\u0131\u00e7ap yay\u0131lma-yar\u0131\u00e7ap renk inset<\/code> \u015feklinde kullan\u0131l\u0131r. inset<\/code> anahtar kelimesi i\u00e7 g\u00f6lge olu\u015fturur.<\/p>\n
.golgeli-kutu {\n        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); \/ D\u0131\u015f g\u00f6lge <\/em>\/\n    }\n    .ic-golge {\n        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); \/ \u0130\u00e7 g\u00f6lge <\/em>\/\n    }<\/code><\/pre>\n
*   border-image<\/code>:<\/strong> Kenarl\u0131k olarak bir g\u00f6rsel kullanma imkan\u0131 sunar. Bu, daha \u00f6nce sadece arka plan g\u00f6rselleriyle m\u00fcmk\u00fcn olan karma\u015f\u0131k kenarl\u0131k tasar\u0131mlar\u0131n\u0131 basitle\u015ftirir.<\/p>\n
.resimli-kenarlik {\n        border: 15px solid transparent;\n        border-image: url('border.png') 30 round;\n    }<\/code><\/pre>\n
Arka Planlar (Backgrounds)<\/h3>\n
Arka plan g\u00f6rselleri ve renkleri \u00fczerinde \u00e7ok daha fazla kontrol sa\u011flar.<\/p>\n
*   Birden Fazla Arka Plan G\u00f6rseli:<\/strong> Bir \u00f6\u011feye birden fazla arka plan g\u00f6rseli ekleyebilme yetene\u011fi. G\u00f6rseller virg\u00fclle ayr\u0131l\u0131r ve ilk liste \u00f6\u011fesi en \u00fcstte g\u00f6r\u00fcn\u00fcr.<\/p>\n
.coklu-arka-plan {\n        background-image: url('resim1.png'), url('resim2.png');\n        background-position: top left, bottom right;\n        background-repeat: no-repeat;\n    }<\/code><\/pre>\n
*   background-size<\/code>:<\/strong> Arka plan g\u00f6rsellerinin boyutunu ayarlamak i\u00e7in kullan\u0131l\u0131r. cover<\/code> (t\u00fcm alan\u0131 kapla), contain<\/code> (t\u00fcm g\u00f6rseli g\u00f6ster) veya piksel\/y\u00fczde de\u011ferleri alabilir.<\/p>\n
.tam-ekran-arka-plan {\n        background-size: cover;\n    }<\/code><\/pre>\n
*   background-origin<\/code> ve background-clip<\/code>:<\/strong> Arka plan\u0131n hangi alandan ba\u015flayaca\u011f\u0131n\u0131 (padding-box, border-box, content-box) ve hangi alan\u0131n i\u00e7ine k\u0131rp\u0131laca\u011f\u0131n\u0131 belirler.<\/p>\n
D\u00f6n\u00fc\u015f\u00fcmler (Transforms) – 2D & 3D<\/h3>\n
\u00d6\u011feleri yeniden konumland\u0131rma, boyutland\u0131rma, d\u00f6nd\u00fcrme ve e\u011fme gibi g\u00f6rsel manip\u00fclasyonlar i\u00e7in kullan\u0131l\u0131r.<\/p>\n
*   2D D\u00f6n\u00fc\u015f\u00fcmler:<\/strong>
\n    *   translate(x, y)<\/code>: \u00d6\u011feyi X ve Y eksenlerinde hareket ettirir.
\n    *   rotate(angle)<\/code>: \u00d6\u011feyi belirli bir a\u00e7\u0131 kadar d\u00f6nd\u00fcr\u00fcr.
\n    *   scale(x, y)<\/code>: \u00d6\u011fenin boyutunu X ve Y eksenlerinde \u00f6l\u00e7ekler.
\n    *   skew(x-angle, y-angle)<\/code>: \u00d6\u011feyi X ve Y eksenlerinde e\u011friltir.<\/p>\n
.dondur {\n        transform: rotate(45deg); \/ 45 derece d\u00f6nd\u00fcr <\/em>\/\n    }\n    .buyut {\n        transform: scale(1.2); \/ %20 b\u00fcy\u00fct <\/em>\/\n    }<\/code><\/pre>\n
*   3D D\u00f6n\u00fc\u015f\u00fcmler:<\/strong> \u00d6\u011feleri \u00fc\u00e7 boyutlu uzayda manip\u00fcle etmeyi sa\u011flar.
\n    *   rotateX(angle)<\/code>, rotateY(angle)<\/code>, rotateZ(angle)<\/code>
\n    *   translateZ(z)<\/code>
\n    *   perspective()<\/code>: 3D d\u00f6n\u00fc\u015f\u00fcmlerin derinlik alg\u0131s\u0131n\u0131 belirler.<\/p>\n
.uc-boyutlu-kutu {\n        transform: perspective(1000px) rotateY(45deg);\n    }<\/code><\/pre>\n
transform-origin<\/code> \u00f6zelli\u011fi, d\u00f6n\u00fc\u015f\u00fcm\u00fcn hangi noktadan itibaren uygulanaca\u011f\u0131n\u0131 belirler (varsay\u0131lan: center).<\/p>\n
Ge\u00e7i\u015fler (Transitions)<\/h3>\n
Bir CSS \u00f6zelli\u011finin bir durumdan ba\u015fka bir duruma yumu\u015fak bir \u015fekilde ge\u00e7mesini sa\u011flar. Kullan\u0131c\u0131 etkile\u015fimlerinde (hover, focus vb.) g\u00f6rsel geri bildirim sa\u011flamak i\u00e7in idealdir.<\/p>\n
*   transition-property<\/code>: Ge\u00e7i\u015fin hangi CSS \u00f6zelli\u011fine uygulanaca\u011f\u0131n\u0131 belirtir (\u00f6rn: color<\/code>, background-color<\/code>, transform<\/code>, all<\/code>).
\n*   transition-duration<\/code>: Ge\u00e7i\u015fin ne kadar s\u00fcrece\u011fini belirtir (\u00f6rn: 0.5s<\/code>, 500ms<\/code>).
\n*   transition-timing-function<\/code>: Ge\u00e7i\u015fin h\u0131z e\u011frisini belirler (\u00f6rn: ease<\/code>, linear<\/code>, ease-in-out<\/code>).
\n*   transition-delay<\/code>: Ge\u00e7i\u015fin ne kadar s\u00fcre sonra ba\u015flayaca\u011f\u0131n\u0131 belirtir.<\/p>\n
.buton {\n        background-color: blue;\n        color: white;\n        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; \/ K\u0131sa yol <\/em>\/\n    }\n    .buton:hover {\n        background-color: darkblue;\n        color: yellow;\n    }<\/code><\/pre>\n
Animasyonlar (Animations)<\/h3>\n
Ge\u00e7i\u015flerden daha karma\u015f\u0131k, \u00e7ok ad\u0131ml\u0131 ve otomatik olarak oynayan animasyonlar olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. @keyframes<\/code> kural\u0131 ile animasyonun farkl\u0131 a\u015famalar\u0131 tan\u0131mlan\u0131r.<\/p>\n
*   @keyframes<\/code>: Animasyonun ad\u0131n\u0131 ve farkl\u0131 zaman noktalar\u0131ndaki (y\u00fczde cinsinden) stil durumlar\u0131n\u0131 tan\u0131mlar.<\/p>\n
@keyframes donme {\n        0% { transform: rotate(0deg); }\n        50% { transform: rotate(180deg); }\n        100% { transform: rotate(360deg); }\n    }<\/code><\/pre>\n
*   animation-name<\/code>: Uygulanacak @keyframes<\/code> animasyonunun ad\u0131.
\n*   animation-duration<\/code>: Animasyonun bir d\u00f6ng\u00fcs\u00fcn\u00fcn s\u00fcresi.
\n*   animation-timing-function<\/code>: Animasyonun h\u0131z e\u011frisi.
\n*   animation-delay<\/code>: Animasyonun ba\u015flamadan \u00f6nceki bekleme s\u00fcresi.
\n*   animation-iteration-count<\/code>: Animasyonun ka\u00e7 kez tekrarlanaca\u011f\u0131 (infinite<\/code> sonsuz tekrar i\u00e7in).
\n*   animation-direction<\/code>: Animasyonun ileri\/geri oynatma y\u00f6n\u00fc (normal<\/code>, reverse<\/code>, alternate<\/code>).
\n*   animation-fill-mode<\/code>: Animasyon tamamland\u0131\u011f\u0131nda veya gecikti\u011finde \u00f6\u011fenin stilini nas\u0131l koruyaca\u011f\u0131n\u0131 belirler.
\n*   animation-play-state<\/code>: Animasyonun oynat\u0131l\u0131p oynat\u0131lmayaca\u011f\u0131n\u0131 (running<\/code>, paused<\/code>) kontrol eder.<\/p>\n
.animasyonlu-kutu {\n        animation: donme 2s ease-in-out infinite alternate; \/ K\u0131sa yol <\/em>\/\n    }<\/code><\/pre>\n
Esnek Kutu D\u00fczeni (Flexbox)<\/h3>\n
Tek boyutlu (yatay veya dikey) d\u00fczenler olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc bir CSS3 mod\u00fcl\u00fcd\u00fcr. \u00d6zellikle men\u00fcler, kartlar ve di\u011fer bile\u015fenlerin hizalanmas\u0131 ve da\u011f\u0131t\u0131lmas\u0131 i\u00e7in idealdir.<\/p>\n
*   Kapsay\u0131c\u0131 (Container) \u00d6zellikleri (display: flex<\/code> uygulanan \u00f6\u011fe):<\/strong>
\n    *   flex-direction<\/code>: Ana eksenin y\u00f6n\u00fc (row<\/code>, row-reverse<\/code>, column<\/code>, column-reverse<\/code>).
\n    *   flex-wrap<\/code>: \u00d6\u011felerin tek sat\u0131rda m\u0131 kalaca\u011f\u0131n\u0131 yoksa birden fazla sat\u0131ra m\u0131 yay\u0131laca\u011f\u0131n\u0131 (nowrap<\/code>, wrap<\/code>, wrap-reverse<\/code>).
\n    *   justify-content<\/code>: Ana eksen boyunca \u00f6\u011felerin nas\u0131l hizalanaca\u011f\u0131n\u0131 (flex-start<\/code>, flex-end<\/code>, center<\/code>, space-between<\/code>, space-around<\/code>).
\n    *   align-items<\/code>: \u00c7apraz eksen boyunca \u00f6\u011felerin nas\u0131l hizalanaca\u011f\u0131n\u0131 (flex-start<\/code>, flex-end<\/code>, center<\/code>, baseline<\/code>, stretch<\/code>).
\n    *   align-content<\/code>: Birden fazla sat\u0131r oldu\u011funda \u00e7apraz eksen boyunca sat\u0131rlar\u0131n nas\u0131l hizalanaca\u011f\u0131n\u0131.
\n*   \u00d6\u011fe (Item) \u00d6zellikleri (flex \u00f6\u011felerine uygulananlar):<\/strong>
\n    *   order<\/code>: \u00d6\u011felerin g\u00f6rsel s\u0131ras\u0131n\u0131 de\u011fi\u015ftirir.
\n    *   flex-grow<\/code>: \u00d6\u011fenin bo\u015f alan\u0131 ne kadar dolduraca\u011f\u0131n\u0131.
\n    *   flex-shrink<\/code>: \u00d6\u011fenin darald\u0131\u011f\u0131nda ne kadar k\u00fc\u00e7\u00fclece\u011fini.
\n    *   flex-basis<\/code>: \u00d6\u011fenin varsay\u0131lan boyutunu.
\n    *   align-self<\/code>: Tek bir \u00f6\u011fenin \u00e7apraz eksen hizalamas\u0131n\u0131 ge\u00e7ersiz k\u0131lar.<\/p>\n
.flex-kapsayici {\n        display: flex;\n        justify-content: space-around;\n        align-items: center;\n    }\n    .flex-item {\n        flex: 1; \/ Esnekli\u011fi ayarlar (grow, shrink, basis k\u0131sayolu) <\/em>\/\n        margin: 10px;\n    }<\/code><\/pre>\n
Izgara D\u00fczeni (Grid Layout)<\/h3>\n
\u0130ki boyutlu (hem yatay hem dikey) d\u00fczenler olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f en g\u00fc\u00e7l\u00fc CSS d\u00fczen mod\u00fcl\u00fcd\u00fcr. \u00d6zellikle sayfa mizanpajlar\u0131 ve karma\u015f\u0131k aray\u00fczler i\u00e7in idealdir.<\/p>\n
*   Kapsay\u0131c\u0131 (Container) \u00d6zellikleri (display: grid<\/code> uygulanan \u00f6\u011fe):<\/strong>
\n    *   grid-template-columns<\/code> ve grid-template-rows<\/code>: Izgara s\u00fctun ve sat\u0131rlar\u0131n\u0131 tan\u0131mlar. Piksel, y\u00fczde, fr<\/code> (kesirli birim) gibi de\u011ferler alabilir.
\n    *   grid-template-areas<\/code>: Izgara alanlar\u0131n\u0131 adland\u0131rarak d\u00fczeni daha okunabilir hale getirir.
\n    *   gap<\/code>, row-gap<\/code>, column-gap<\/code>: Izgara \u00f6\u011feleri aras\u0131ndaki bo\u015fluklar\u0131 tan\u0131mlar.
\n    *   justify-items<\/code>, align-items<\/code>: H\u00fccre i\u00e7indeki \u00f6\u011felerin hizalamas\u0131n\u0131 kontrol eder.
\n*   \u00d6\u011fe (Item) \u00d6zellikleri (\u0131zgara \u00f6\u011felerine uygulananlar):<\/strong>
\n    *   grid-column<\/code> ve grid-row<\/code>: Bir \u00f6\u011fenin hangi s\u00fctun\/sat\u0131r \u00e7izgileri aras\u0131nda yer alaca\u011f\u0131n\u0131 belirtir.
\n    *   grid-area<\/code>: \u00d6\u011feyi adland\u0131r\u0131lm\u0131\u015f bir \u0131zgara alan\u0131na yerle\u015ftirir.<\/p>\n
.grid-kapsayici {\n        display: grid;\n        grid-template-columns: 1fr 2fr 1fr; \/ 3 s\u00fctun: 1, 2, 1 oran\u0131nda <\/em>\/\n        grid-template-rows: auto 100px; \/ Otomatik y\u00fckseklik, 100px y\u00fckseklik <\/em>\/\n        gap: 10px;\n    }\n    .grid-item-1 {\n        grid-column: 1 \/ 3; \/ 1. s\u00fctundan ba\u015fla, 3. s\u00fctun \u00e7izgisine kadar uzan <\/em>\/\n    }<\/code><\/pre>\n
Medya Sorgular\u0131 (Media Queries) ve Duyarl\u0131 Tasar\u0131m (Responsive Design)<\/h3>\n
Web sitelerinin farkl\u0131 cihaz boyutlar\u0131na ve ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerine uyum sa\u011flamas\u0131 i\u00e7in temel bir CSS3 \u00f6zelli\u011fidir.<\/p>\n
*   @media<\/code> kural\u0131: Belirli ko\u015fullar (ekran geni\u015fli\u011fi, cihaz y\u00f6n\u00fc vb.) sa\u011fland\u0131\u011f\u0131nda ge\u00e7erli olacak stilleri tan\u0131mlar.<\/p>\n
\/ Ekran geni\u015fli\u011fi 768px veya daha az oldu\u011funda <\/em>\/\n    @media screen and (max-width: 768px) {\n        body {\n            font-size: 14px;\n        }\n        .sidebar {\n            display: none; \/ Kenar \u00e7ubu\u011funu gizle <\/em>\/\n        }\n    }\n    \/ Ekran geni\u015fli\u011fi 1200px veya daha fazla oldu\u011funda <\/em>\/\n    @media screen and (min-width: 1200px) {\n        .container {\n            max-width: 1140px;\n        }\n    }\n    \/ Cihaz yatay konumdayken <\/em>\/\n    @media screen and (orientation: landscape) {\n        \/ ... <\/em>\/\n    }<\/code><\/pre>\n
*   viewport<\/code> meta etiketi: HTML’de width=device-width, initial-scale=1.0<\/code> ayar\u0131yla mobil cihazlarda sayfan\u0131n do\u011fru \u00f6l\u00e7eklenmesini sa\u011flar. Bu, duyarl\u0131 tasar\u0131m\u0131n olmazsa olmaz\u0131d\u0131r.<\/p>\n
\u00c7oklu S\u00fctun D\u00fczeni (Multi-column Layout)<\/h3>\n
Gazete veya dergi tarz\u0131 \u00e7oklu s\u00fctunlu metin d\u00fczenleri olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
*   column-count<\/code>: Metnin ka\u00e7 s\u00fctuna b\u00f6l\u00fcnece\u011fini belirler.
\n*   column-width<\/code>: Her bir s\u00fctunun minimum geni\u015fli\u011fini belirler.
\n*   column-gap<\/code>: S\u00fctunlar aras\u0131ndaki bo\u015flu\u011fu belirler.
\n*   column-rule<\/code>: S\u00fctunlar aras\u0131na bir \u00e7izgi (kenarl\u0131k) ekler.<\/p>\n
.metin-kutusu {\n        column-count: 3;\n        column-gap: 20px;\n        column-rule: 1px solid #ccc;\n    }<\/code><\/pre>\n
De\u011fi\u015fkenler (Custom Properties \/ CSS Variables)<\/h3>\n
CSS3’\u00fcn nispeten yeni ama son derece g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir. Tekrarlayan de\u011ferleri (renk kodlar\u0131, font boyutlar\u0131 vb.) bir de\u011fi\u015fkende saklamay\u0131 ve daha sonra bu de\u011fi\u015fkeni farkl\u0131 yerlerde kullanmay\u0131 sa\u011flar. Bu, stil y\u00f6netilebilirli\u011fini ve tutarl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n
*   De\u011fi\u015fken tan\u0131mlama: --degisken-adi: deger;<\/code>
\n*   De\u011fi\u015fken kullanma: var(--degisken-adi);<\/code><\/p>\n
:root { \/ Global de\u011fi\u015fkenler i\u00e7in genellikle :root kullan\u0131l\u0131r <\/em>\/\n        --ana-renk: #3498db;\n        --ikincil-renk: #2ecc71;\n        --font-boyutu-buyuk: 1.5em;\n    }\n\n    h1 {\n        color: var(--ana-renk);\n        font-size: var(--font-boyutu-buyuk);\n    }\n    button {\n        background-color: var(--ikincil-renk);\n        color: white;\n    }<\/code><\/pre>\n
De\u011fi\u015fkenler, \u00f6zellikle b\u00fcy\u00fck projelerde veya tema de\u011fi\u015fiklikleri yaparken \u00e7ok b\u00fcy\u00fck kolayl\u0131k sa\u011flar.<\/p>\n
Taray\u0131c\u0131 Uyumlulu\u011fu ve Gelecek<\/h2>\n
CSS3’\u00fcn ilk ortaya \u00e7\u0131kt\u0131\u011f\u0131 y\u0131llarda, taray\u0131c\u0131lar aras\u0131ndaki uyumluluk b\u00fcy\u00fck bir sorundu. Yeni \u00f6zellikler genellikle farkl\u0131 taray\u0131c\u0131larda farkl\u0131 zamanlarda ve bazen de farkl\u0131 \u015fekillerde uygulan\u0131yordu. Bu durumu a\u015fmak i\u00e7in “vendor prefixes” (tedarik\u00e7i \u00f6nekleri) ad\u0131 verilen \u00f6zel \u00f6nekler kullan\u0131ld\u0131.<\/p>\n
Tedarik\u00e7i \u00d6nekleri (Vendor Prefixes)<\/h3>\n
Tedarik\u00e7i \u00f6nekleri, bir taray\u0131c\u0131 \u00fcreticisinin standartla\u015fmam\u0131\u015f veya deneysel bir CSS \u00f6zelli\u011fini kendi taray\u0131c\u0131s\u0131nda uygulamas\u0131na olanak tan\u0131yan bir mekanizmad\u0131r. Bu, geli\u015ftiricilerin yeni \u00f6zellikleri erken benimsemesine ve test etmesine yard\u0131mc\u0131 olurken, ayn\u0131 zamanda W3C standartlar\u0131 olgunla\u015fana kadar potansiyel de\u011fi\u015fikliklere kar\u015f\u0131 bir esneklik sa\u011flar. En yayg\u0131n kullan\u0131lan \u00f6nekler \u015funlard\u0131r:<\/p>\n
*   -webkit-<\/code>: Chrome, Safari, yeni Opera s\u00fcr\u00fcmleri, Android taray\u0131c\u0131s\u0131
\n*   -moz-<\/code>: Firefox
\n*   -ms-<\/code>: Internet Explorer
\n*   -o-<\/code>: Eski Opera s\u00fcr\u00fcmleri<\/p>\n
\u00d6rne\u011fin, border-radius<\/code> \u00f6zelli\u011fi ilk \u00e7\u0131kt\u0131\u011f\u0131nda \u015f\u00f6yle kullan\u0131l\u0131yordu:<\/p>\n
.kutu {\n    -webkit-border-radius: 10px; \/ Chrome, Safari <\/em>\/\n    -moz-border-radius: 10px;    \/ Firefox <\/em>\/\n    border-radius: 10px;         \/ Standart <\/em>\/\n}<\/code><\/pre>\n
G\u00fcn\u00fcm\u00fczde \u00e7o\u011fu modern CSS3 \u00f6zelli\u011fi yayg\u0131n taray\u0131c\u0131larda \u00f6neksiz olarak desteklenmektedir. Ancak, baz\u0131 daha yeni veya deneysel \u00f6zellikler i\u00e7in hala \u00f6nekler gerekebilir. Bu durumu manuel olarak takip etmek zor oldu\u011fu i\u00e7in, geli\u015ftiriciler genellikle Autoprefixer<\/code> gibi ara\u00e7lar\u0131 kullan\u0131r. Autoprefixer<\/code>, yazd\u0131\u011f\u0131n\u0131z standart CSS kodunu otomatik olarak taray\u0131c\u0131 \u00f6nekleriyle geni\u015fleten bir PostCSS eklentisidir. Bu sayede, siz temiz kod yazarken, \u00fcretim ortam\u0131nda gerekli \u00f6nekler otomatik olarak eklenir.<\/p>\n
Modern Taray\u0131c\u0131lar\u0131n Durumu<\/h3>\n
G\u00fcn\u00fcm\u00fcz modern taray\u0131c\u0131lar\u0131 (Chrome, Firefox, Safari, Edge, Opera) CSS3’\u00fcn b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131 m\u00fckemmel bir \u015fekilde desteklemektedir. Flexbox, Grid, Transitions, Animations, Transforms gibi temel mod\u00fcller tam uyumlulukla \u00e7al\u0131\u015f\u0131r. Bu, geli\u015ftiricilerin karma\u015f\u0131k d\u00fczenler ve etkile\u015fimler olu\u015ftururken b\u00fcy\u00fck bir \u00f6zg\u00fcrl\u00fc\u011fe sahip oldu\u011fu anlam\u0131na gelir. Ancak, nadiren de olsa baz\u0131 \u00f6zelliklerin taray\u0131c\u0131lar aras\u0131 davran\u0131\u015f farkl\u0131l\u0131klar\u0131 g\u00f6sterebilece\u011fi unutulmamal\u0131d\u0131r. Bu nedenle, projenizin hedefledi\u011fi taray\u0131c\u0131larda test yapmak her zaman iyi bir uygulamad\u0131r.<\/p>\n
Progressive Enhancement ve Graceful Degradation<\/h3>\n
Taray\u0131c\u0131 uyumlulu\u011fu ile ilgili iki \u00f6nemli kavram:<\/p>\n
*   Progressive Enhancement (A\u015famal\u0131 Geli\u015ftirme):<\/strong> Temel, eri\u015filebilir bir deneyimle ba\u015flay\u0131p, daha sonra modern taray\u0131c\u0131lar i\u00e7in geli\u015fmi\u015f CSS3 \u00f6zellikleri ekleyerek deneyimi zenginle\u015ftirmektir. Eski taray\u0131c\u0131lar geli\u015fmi\u015f \u00f6zellikleri g\u00f6rmezden gelir, ancak temel i\u00e7eri\u011fe ve i\u015flevselli\u011fe eri\u015febilirler.
\n*   Graceful Degradation (Zarif Gerileme):<\/strong> Geli\u015fmi\u015f bir deneyimle ba\u015flay\u0131p, eski taray\u0131c\u0131lar i\u00e7in daha basit bir alternatif sunmakt\u0131r. \u00d6rne\u011fin, bir animasyon eski bir taray\u0131c\u0131da \u00e7al\u0131\u015fm\u0131yorsa, \u00f6\u011fe an\u0131nda son haline gelebilir veya basit bir ge\u00e7i\u015fle de\u011fi\u015ftirilebilir.<\/p>\n
Bu yakla\u015f\u0131mlar, t\u00fcm kullan\u0131c\u0131lar\u0131n, kulland\u0131klar\u0131 taray\u0131c\u0131dan ba\u011f\u0131ms\u0131z olarak, web sitenizden kabul edilebilir bir deneyim almas\u0131n\u0131 sa\u011flar.<\/p>\n
CSS’in Evrimi ve Gelecek<\/h3>\n
CSS, s\u00fcrekli geli\u015fen bir dildir ve CSS3 sadece bir durak noktas\u0131d\u0131r. W3C, CSS’i mod\u00fcler yap\u0131da geli\u015ftirmeye devam ediyor ve her ge\u00e7en g\u00fcn yeni mod\u00fcller ve \u00f6zellikler \u00fczerinde \u00e7al\u0131\u015f\u0131l\u0131yor. Gelecekte bizi bekleyen baz\u0131 heyecan verici geli\u015fmeler \u015funlar olabilir:<\/p>\n
*   Container Queries (Kapsay\u0131c\u0131 Sorgular\u0131):<\/strong> Medya sorgular\u0131n\u0131n aksine, bir bile\u015fenin kendi kapsay\u0131c\u0131s\u0131n\u0131n boyutuna g\u00f6re stilini de\u011fi\u015ftirmesine olanak tan\u0131r. Bu, bile\u015fen tabanl\u0131 tasar\u0131m i\u00e7in devrim niteli\u011findedir.
\n*   Cascade Layers (\u015eelale Katmanlar\u0131):<\/strong> CSS’in \u015felale mekanizmas\u0131 \u00fczerinde daha fazla kontrol sa\u011flayarak, stillerin \u00f6nceli\u011fini daha d\u00fczenli bir \u015fekilde y\u00f6netmeye imkan verir.
\n*   CSS Nesting (CSS \u0130\u00e7 \u0130\u00e7e Ge\u00e7irme):<\/strong> Sass gibi \u00f6n i\u015flemcilerde bulunan i\u00e7 i\u00e7e se\u00e7ici yazma yetene\u011fini do\u011frudan CSS’e getirebilir.
\n*   Daha Geli\u015fmi\u015f Pseudo-classes ve Pseudo-elements:<\/strong> Kullan\u0131c\u0131 etkile\u015fimlerini ve DOM yap\u0131s\u0131n\u0131 hedeflemek i\u00e7in daha fazla esneklik sunan yeni se\u00e7iciler.<\/p>\n
Bu geli\u015fmeler, web tasar\u0131m\u0131n\u0131n ve geli\u015ftirmenin s\u0131n\u0131rlar\u0131n\u0131 daha da zorlayacak ve daha dinamik, verimli ve esnek aray\u00fczler olu\u015fturmam\u0131z\u0131 sa\u011flayacakt\u0131r. CSS3, bu heyecan verici yolculu\u011fun \u00f6nemli bir ba\u015flang\u0131c\u0131 ve modern web’in temelini olu\u015fturan bir dizi g\u00fc\u00e7l\u00fc ara\u00e7t\u0131r.<\/p>\n
Sonu\u00e7 ve \u0130leri Okumalar<\/h2>\n
CSS3, web tasar\u0131m ve geli\u015ftirme d\u00fcnyas\u0131nda ger\u00e7ek bir d\u00f6n\u00fcm noktas\u0131 olmu\u015ftur. Daha \u00f6nce JavaScript veya karma\u015f\u0131k g\u00f6rsel manip\u00fclasyonlarla zorlukla elde edilen bir\u00e7ok g\u00f6rsel efekti ve d\u00fczeni, do\u011frudan CSS’in g\u00fcc\u00fcyle m\u00fcmk\u00fcn k\u0131larak, geli\u015ftiricilere muazzam bir esneklik ve verimlilik sa\u011flam\u0131\u015ft\u0131r. Yuvarlak k\u00f6\u015felerden kutu g\u00f6lgelerine, \u015feffaf renklerden \u00f6zel fontlara, karma\u015f\u0131k animasyonlardan duyarl\u0131 d\u00fczenlere kadar CSS3, modern web’in estetik ve i\u015flevsel beklentilerini kar\u015f\u0131lamak i\u00e7in gereken t\u00fcm ara\u00e7lar\u0131 sunmu\u015ftur.<\/p>\n
Bu h\u0131zl\u0131 giri\u015f makalesi, CSS3’\u00fcn temelini olu\u015fturan en \u00f6nemli mod\u00fcllere ve \u00f6zelliklere genel bir bak\u0131\u015f sunmay\u0131 ama\u00e7lad\u0131. Metin efektlerinden kutu modeline, arka planlardan d\u00f6n\u00fc\u015f\u00fcmlere, ge\u00e7i\u015flerden animasyonlara, Flexbox ve Grid gibi g\u00fc\u00e7l\u00fc d\u00fczen sistemlerinden medya sorgular\u0131yla duyarl\u0131 tasar\u0131ma ve hatta CSS de\u011fi\u015fkenleri gibi y\u00f6netim kolayl\u0131\u011f\u0131 sa\u011flayan yeniliklere kadar bir\u00e7ok konuya de\u011findik. Bu \u00f6zellikler, web sayfalar\u0131n\u0131n sadece bilgilendirici olmaktan \u00e7\u0131k\u0131p, etkileyici ve kullan\u0131c\u0131 dostu deneyimler sunan dijital sanat eserlerine d\u00f6n\u00fc\u015fmesine olanak tan\u0131m\u0131\u015ft\u0131r.<\/p>\n
CSS3’\u00fcn mod\u00fcler yap\u0131s\u0131, taray\u0131c\u0131 \u00fcreticilerinin yeni \u00f6zellikleri a\u015famal\u0131 olarak benimsemesine ve standartlar\u0131n daha h\u0131zl\u0131 olgunla\u015fmas\u0131na yard\u0131mc\u0131 olmu\u015ftur. Ba\u015flang\u0131\u00e7ta \u00f6neklerle m\u00fccadele etmek gerekse de, g\u00fcn\u00fcm\u00fcz modern taray\u0131c\u0131lar\u0131 bu \u00f6zelliklerin b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131 tam uyumlulukla desteklemektedir. Bu durum, geli\u015ftiricilerin daha temiz ve standartlara uygun kod yazmas\u0131na olanak tan\u0131rken, Autoprefixer<\/code> gibi ara\u00e7lar da eski taray\u0131c\u0131lar i\u00e7in uyumlulu\u011fu sa\u011flamay\u0131 kolayla\u015ft\u0131rmaktad\u0131r.<\/p>\n
Web teknolojileri s\u00fcrekli geli\u015fiyor ve CSS de bu dinamik s\u00fcrecin bir par\u00e7as\u0131. CSS3’\u00fcn getirdi\u011fi yenilikler, daha da geli\u015fmi\u015f CSS mod\u00fcllerinin (\u00f6rne\u011fin Container Queries, Cascade Layers) \u00f6n\u00fcn\u00fc a\u00e7arak, gelecekte web tasar\u0131m\u0131n\u0131n s\u0131n\u0131rlar\u0131n\u0131 daha da geni\u015fletecektir. Bu s\u00fcrekli geli\u015fim, web geli\u015ftiricileri i\u00e7in hem heyecan verici hem de s\u00fcrekli \u00f6\u011frenmeyi gerektiren bir alan yaratmaktad\u0131r.<\/p>\n
Modern web projelerinde \u00e7al\u0131\u015f\u0131yorsan\u0131z veya web tasar\u0131m\u0131na yeni ba\u015fl\u0131yorsan\u0131z, CSS3 \u00f6zelliklerini derinlemesine anlamak ve etkili bir \u015fekilde kullanmak vazge\u00e7ilmez bir beceridir. Bu \u00f6zellikler sadece sitelerinizi daha \u00e7ekici k\u0131lmakla kalmaz, ayn\u0131 zamanda daha iyi performans g\u00f6stermelerine ve farkl\u0131 cihazlarda tutarl\u0131 bir deneyim sunmalar\u0131na da yard\u0131mc\u0131 olur.<\/p>\n
\u0130leri Okumalar ve Kaynaklar:<\/strong><\/p>\n
Bu makale sadece bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. CSS3’\u00fcn t\u00fcm potansiyelini ke\u015ffetmek i\u00e7in a\u015fa\u011f\u0131daki kaynaklar\u0131 incelemenizi \u015fiddetle tavsiye ederiz:<\/p>\n
*   MDN Web Docs (Mozilla Developer Network):<\/strong> CSS ile ilgili en kapsaml\u0131 ve g\u00fcncel referans kayna\u011f\u0131d\u0131r. Her bir CSS \u00f6zelli\u011fi i\u00e7in detayl\u0131 a\u00e7\u0131klamalar, \u00f6rnekler ve taray\u0131c\u0131 uyumluluk bilgileri i\u00e7erir. (developer.mozilla.org\/en-US\/docs\/Web\/CSS)
\n*   CSS-Tricks:<\/strong> Harika makaleler, k\u0131lavuzlar ve kod \u00f6rnekleri ile dolu pop\u00fcler bir web sitesidir. \u00d6zellikle Flexbox ve Grid gibi d\u00fczen sistemleri i\u00e7in \u00e7ok de\u011ferli kaynaklar sunar. (css-tricks.com)
\n*   W3C CSS Current Work & Future:<\/strong> CSS standartlar\u0131n\u0131n gelece\u011fi hakk\u0131nda bilgi almak i\u00e7in W3C’nin resmi sayfalar\u0131n\u0131 takip edebilirsiniz. (www.w3.org\/Style\/CSS\/current-work)
\n*   Can I use…?:<\/strong> Belirli bir CSS \u00f6zelli\u011finin hangi taray\u0131c\u0131larda desteklendi\u011fini g\u00f6steren harika bir ara\u00e7t\u0131r. (caniuse.com)<\/p>\n
CSS3 ile yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 serbest b\u0131rak\u0131n ve web’i daha g\u00fczel, daha etkile\u015fimli ve daha eri\u015filebilir hale getirin!<\/p>\n","protected":false},"excerpt":{"rendered":"CSS3: H\u0131zl\u0131 Bir Giri\u015f\nGiri\u015f: CSS’ten CSS3’e Yolculuk\nWeb sayfalar\u0131n\u0131n g\u00f6rsel d\u00fczenini, renklerini, fontlar\u0131n\u0131 ve genel esteti\u011fini belir","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-33227","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCSS3: H\u0131zl\u0131 Bir Giri\u015f - 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\/css3-hizli-bir-giris\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3: H\u0131zl\u0131 Bir Giri\u015f\" \/>\n<meta property=\"og:description\" content=\"CSS3: H\u0131zl\u0131 Bir Giri\u015f  Giri\u015f: CSS'ten CSS3'e Yolculuk Web sayfalar\u0131n\u0131n g\u00f6rsel d\u00fczenini, renklerini, fontlar\u0131n\u0131 ve genel esteti\u011fini belir\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-31T05:41: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=\"22 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS3: H\u0131zl\u0131 Bir Giri\u015f\",\"datePublished\":\"2025-10-31T05:41:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/\"},\"wordCount\":3771,\"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\/css3-hizli-bir-giris\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/\",\"name\":\"CSS3: H\u0131zl\u0131 Bir Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-31T05:41:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3: H\u0131zl\u0131 Bir Giri\u015f\"}]},{\"@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":"CSS3: H\u0131zl\u0131 Bir Giri\u015f - 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\/css3-hizli-bir-giris\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS3: H\u0131zl\u0131 Bir Giri\u015f","og_description":"CSS3: H\u0131zl\u0131 Bir Giri\u015f  Giri\u015f: CSS'ten CSS3'e Yolculuk Web sayfalar\u0131n\u0131n g\u00f6rsel d\u00fczenini, renklerini, fontlar\u0131n\u0131 ve genel esteti\u011fini belir","og_url":"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-31T05:41:16+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"22 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS3: H\u0131zl\u0131 Bir Giri\u015f","datePublished":"2025-10-31T05:41:16+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/"},"wordCount":3771,"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\/css3-hizli-bir-giris\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/","url":"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/","name":"CSS3: H\u0131zl\u0131 Bir Giri\u015f - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-31T05:41:16+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css3-hizli-bir-giris\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS3: H\u0131zl\u0131 Bir Giri\u015f"}]},{"@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\/33227","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=33227"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33227\/revisions"}],"predecessor-version":[{"id":33228,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33227\/revisions\/33228"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}