{"id":30604,"date":"2025-09-29T18:41:01","date_gmt":"2025-09-29T15:41:01","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30604"},"modified":"2025-09-29T18:41:01","modified_gmt":"2025-09-29T15:41:01","slug":"html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/","title":{"rendered":"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme"},"content":{"rendered":"

<\/p>\n

HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme<\/h2>\n

Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve kullan\u0131c\u0131 deneyimi, bir web sayfas\u0131n\u0131n ba\u015far\u0131s\u0131nda kritik rol oynar. CSS (Cascading Style Sheets), HTML elementlerine stil kazand\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Bu ara\u00e7lar aras\u0131nda kenarl\u0131klar (borders), g\u00f6lgeler (shadows) ve d\u0131\u015f \u00e7izgiler (outlines), elementlere derinlik, boyut ve estetik bir dokunu\u015f katman\u0131n en yayg\u0131n ve etkili yollar\u0131ndand\u0131r. Bu makalede, bu \u00fc\u00e7 temel CSS \u00f6zelli\u011fini ayr\u0131nt\u0131l\u0131 olarak inceleyecek, nas\u0131l kullan\u0131ld\u0131klar\u0131n\u0131, farkl\u0131 varyasyonlar\u0131n\u0131 ve web tasar\u0131mlar\u0131n\u0131zda nas\u0131l ustaca uygulayabilece\u011finizi \u00f6rneklerle a\u00e7\u0131klayaca\u011f\u0131z. Amac\u0131m\u0131z, okuyucular\u0131n bu \u00f6zelliklerin potansiyelini tam olarak anlamalar\u0131n\u0131 ve web projelerinde yarat\u0131c\u0131 bir \u015fekilde kullanabilmelerini sa\u011flamakt\u0131r.<\/p>\n

Kenarl\u0131klar (Borders)<\/h3>\n

Kenarl\u0131klar, bir HTML elementinin etraf\u0131na \u00e7izilen \u00e7izgilerdir ve elementin g\u00f6rsel s\u0131n\u0131rlar\u0131n\u0131 belirler. Bir elementin i\u00e7eri\u011fini di\u011ferlerinden ay\u0131rmak, vurgulamak veya gruplamak i\u00e7in kullan\u0131labilirler. CSS’te kenarl\u0131klar, geni\u015flik, stil ve renk olmak \u00fczere \u00fc\u00e7 ana \u00f6zellikle kontrol edilir.<\/p>\n

Kenarl\u0131k Geni\u015fli\u011fi (border-width<\/code>)<\/h4>\n

border-width<\/code> \u00f6zelli\u011fi, bir elementin kenarl\u0131\u011f\u0131n\u0131n kal\u0131nl\u0131\u011f\u0131n\u0131 belirler. Bu \u00f6zellik i\u00e7in d\u00f6rt farkl\u0131 de\u011fer t\u00fcr\u00fc kullanabilirsiniz:<\/p>\n

* Anahtar Kelimeler:<\/strong> thin<\/code>, medium<\/code>, thick<\/code>. Bunlar taray\u0131c\u0131ya g\u00f6re de\u011fi\u015fen \u00f6nceden tan\u0131mlanm\u0131\u015f kal\u0131nl\u0131klard\u0131r.
\n* Uzunluk Birimleri:<\/strong> px<\/code> (piksel), em<\/code> (g\u00f6receli birim), rem<\/code> (root em), %<\/code> (y\u00fczde) gibi birimlerle tam olarak kontrol edebilirsiniz.<\/p>\n

border-width<\/code> \u00f6zelli\u011fi tek bir de\u011fer, iki de\u011fer, \u00fc\u00e7 de\u011fer veya d\u00f6rt de\u011fer alabilir:<\/p>\n

* Tek De\u011fer:<\/strong> T\u00fcm d\u00f6rt kenar i\u00e7in ayn\u0131 geni\u015fli\u011fi ayarlar.<\/p>\n

.element-1 {\n    border-width: 2px; \/ T\u00fcm kenarlar 2 piksel <\/em>\/\n    border-style: solid;\n    border-color: black;\n}\n<\/code><\/pre>\n
*   \u0130ki De\u011fer:<\/strong> \u0130lk de\u011fer \u00fcst ve alt kenarlar i\u00e7in, ikinci de\u011fer sa\u011f ve sol kenarlar i\u00e7indir.<\/p>\n
.element-2 {\n    border-width: 5px 10px; \/ \u00dcst\/Alt 5px, Sa\u011f\/Sol 10px <\/em>\/\n    border-style: solid;\n    border-color: blue;\n}\n<\/code><\/pre>\n
*   \u00dc\u00e7 De\u011fer:<\/strong> \u0130lk de\u011fer \u00fcst kenar, ikinci de\u011fer sa\u011f ve sol kenarlar, \u00fc\u00e7\u00fcnc\u00fc de\u011fer alt kenar i\u00e7indir.<\/p>\n
.element-3 {\n    border-width: 1px 4px 2px; \/ \u00dcst 1px, Sa\u011f\/Sol 4px, Alt 2px <\/em>\/\n    border-style: solid;\n    border-color: green;\n}\n<\/code><\/pre>\n
*   D\u00f6rt De\u011fer:<\/strong> S\u0131ras\u0131yla \u00fcst, sa\u011f, alt ve sol kenarlar i\u00e7indir (saat y\u00f6n\u00fcnde).<\/p>\n
.element-4 {\n    border-width: 1px 2px 3px 4px; \/ \u00dcst 1px, Sa\u011f 2px, Alt 3px, Sol 4px <\/em>\/\n    border-style: solid;\n    border-color: red;\n}\n<\/code><\/pre>\n
Kenarl\u0131k Stili (border-style<\/code>)<\/h4>\n
border-style<\/code> \u00f6zelli\u011fi, kenarl\u0131\u011f\u0131n g\u00f6rsel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirler. CSS, \u00e7e\u015fitli kenarl\u0131k stilleri sunar:<\/p>\n
*   none<\/code>: Kenarl\u0131k yok.
\n*   hidden<\/code>: none<\/code> ile ayn\u0131d\u0131r, ancak tablo kenarl\u0131k \u00e7ak\u0131\u015fmalar\u0131nda farkl\u0131 davran\u0131r.
\n*   dotted<\/code>: Noktal\u0131 kenarl\u0131k.
\n*   dashed<\/code>: Kesikli \u00e7izgi kenarl\u0131k.
\n*   solid<\/code>: D\u00fcz, tek \u00e7izgi kenarl\u0131k.
\n*   double<\/code>: \u0130ki \u00e7izgili kenarl\u0131k. Geni\u015flik, iki \u00e7izginin ve aralar\u0131ndaki bo\u015flu\u011fun toplam\u0131d\u0131r.
\n*   groove<\/code>: \u00dc\u00e7 boyutlu, oyuklu bir g\u00f6r\u00fcn\u00fcm. border-color<\/code> ile g\u00f6lgeli bir etki yarat\u0131r.
\n*   ridge<\/code>: \u00dc\u00e7 boyutlu, \u00e7\u0131k\u0131nt\u0131l\u0131 bir g\u00f6r\u00fcn\u00fcm. groove<\/code>‘un tersidir.
\n*   inset<\/code>: Elementin i\u00e7eri\u011finin i\u00e7eri do\u011fru g\u00f6m\u00fclm\u00fc\u015f gibi g\u00f6r\u00fcnmesini sa\u011flar.
\n*   outset<\/code>: Elementin i\u00e7eri\u011finin d\u0131\u015far\u0131 do\u011fru \u00e7\u0131k\u0131nt\u0131l\u0131 gibi g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n
border-width<\/code> gibi, border-style<\/code> da tek, iki, \u00fc\u00e7 veya d\u00f6rt de\u011fer alabilir ve her bir kenara farkl\u0131 stiller atayabilir.<\/p>\n
.dotted-border {\n    border-style: dotted;\n    border-width: 2px;\n    border-color: #333;\n}\n\n.mixed-border {\n    border-style: solid dashed dotted double; \/ \u00dcst: solid, Sa\u011f: dashed, Alt: dotted, Sol: double <\/em>\/\n    border-width: 3px;\n    border-color: #666;\n}\n<\/code><\/pre>\n
Kenarl\u0131k Rengi (border-color<\/code>)<\/h4>\n
border-color<\/code> \u00f6zelli\u011fi, kenarl\u0131\u011f\u0131n rengini ayarlar. Renk de\u011ferleri i\u00e7in CSS’in destekledi\u011fi t\u00fcm formatlar\u0131 kullanabilirsiniz:<\/p>\n
*   \u0130simli Renkler:<\/strong> red<\/code>, blue<\/code>, green<\/code>, black<\/code>, vb.
\n*   Hex Kodlar\u0131:<\/strong> #RRGGBB<\/code> veya #RGB<\/code> format\u0131nda (\u00f6rne\u011fin, #FF0000<\/code> veya #F00<\/code>).
\n*   RGB\/RGBA Fonksiyonlar\u0131:<\/strong> rgb(k\u0131rm\u0131z\u0131, ye\u015fil, mavi)<\/code> veya rgba(k\u0131rm\u0131z\u0131, ye\u015fil, mavi, alfa)<\/code>. Alfa de\u011feri saydaml\u0131\u011f\u0131 kontrol eder.
\n*   HSL\/HSLA Fonksiyonlar\u0131:<\/strong> hsl(ton, doygunluk, a\u00e7\u0131kl\u0131k)<\/code> veya hsla(ton, doygunluk, a\u00e7\u0131kl\u0131k, alfa)<\/code>.<\/p>\n
border-color<\/code> da tek, iki, \u00fc\u00e7 veya d\u00f6rt de\u011fer alarak her bir kenara farkl\u0131 renkler ataman\u0131za olanak tan\u0131r.<\/p>\n
.colored-border {\n    border-style: solid;\n    border-width: 3px;\n    border-color: #007bff; \/ Tek renk <\/em>\/\n}\n\n.gradient-border-color {\n    border-style: solid;\n    border-width: 4px;\n    border-color: red green blue yellow; \/ \u00dcst: k\u0131rm\u0131z\u0131, Sa\u011f: ye\u015fil, Alt: mavi, Sol: sar\u0131 <\/em>\/\n}\n<\/code><\/pre>\n
K\u0131salt\u0131lm\u0131\u015f Kenarl\u0131k \u00d6zelli\u011fi (border<\/code> Shorthand)<\/h4>\n
Tek tek border-width<\/code>, border-style<\/code> ve border-color<\/code> \u00f6zelliklerini ayarlamak yerine, border<\/code> k\u0131saltma \u00f6zelli\u011fini kullanarak \u00fc\u00e7\u00fcn\u00fc tek bir sat\u0131rda tan\u0131mlayabilirsiniz. S\u0131ra genellikle width style color<\/code> \u015feklindedir.<\/p>\n
.shorthand-border {\n    border: 2px solid #3498db; \/ Geni\u015flik, Stil, Renk <\/em>\/\n}\n<\/code><\/pre>\n
Bu k\u0131saltma, en \u00e7ok kullan\u0131lan kenarl\u0131k tan\u0131mlama y\u00f6ntemidir.<\/p>\n
Bireysel Kenar Kenarl\u0131klar\u0131 (Individual Side Borders)<\/h4>\n
Bazen sadece belirli bir kenara kenarl\u0131k uygulamak veya her kenar\u0131n farkl\u0131 \u00f6zelliklere sahip olmas\u0131n\u0131 istersiniz. Bunun i\u00e7in CSS, her kenar i\u00e7in \u00f6zel \u00f6zellikler sunar:<\/p>\n
*   border-top<\/code>: \u00dcst kenar i\u00e7in k\u0131saltma.
\n*   border-right<\/code>: Sa\u011f kenar i\u00e7in k\u0131saltma.
\n*   border-bottom<\/code>: Alt kenar i\u00e7in k\u0131saltma.
\n*   border-left<\/code>: Sol kenar i\u00e7in k\u0131saltma.<\/p>\n
Bu k\u0131saltmalar\u0131n her biri, kendi width<\/code>, style<\/code> ve color<\/code> alt \u00f6zelliklerine sahiptir (\u00f6rn: border-top-width<\/code>, border-left-color<\/code>).<\/p>\n
.individual-borders {\n    border-top: 5px dotted purple;\n    border-right: 2px solid orange;\n    border-bottom-width: 1px;\n    border-bottom-style: dashed;\n    border-bottom-color: black;\n    border-left: none; \/ Sol kenarl\u0131k yok <\/em>\/\n}\n<\/code><\/pre>\n
Yuvarlak K\u00f6\u015feler (border-radius<\/code>)<\/h4>\n
border-radius<\/code> \u00f6zelli\u011fi, bir elementin k\u00f6\u015felerini yuvarlayarak daha yumu\u015fak ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131r\u0131r. Bu \u00f6zellik, tek bir de\u011fer, iki de\u011fer veya d\u00f6rt de\u011fer alabilir:<\/p>\n
*   Tek De\u011fer:<\/strong> T\u00fcm d\u00f6rt k\u00f6\u015fe i\u00e7in ayn\u0131 yuvarlama yar\u0131\u00e7ap\u0131n\u0131 ayarlar.<\/p>\n
.rounded-corners {\n    border: 2px solid #2ecc71;\n    border-radius: 10px; \/ T\u00fcm k\u00f6\u015feler 10px yuvarlak <\/em>\/\n}\n<\/code><\/pre>\n
*   \u0130ki De\u011fer:<\/strong> \u0130lk de\u011fer sol \u00fcst ve sa\u011f alt k\u00f6\u015feler i\u00e7in, ikinci de\u011fer sa\u011f \u00fcst ve sol alt k\u00f6\u015feler i\u00e7indir.<\/p>\n
.half-rounded {\n    border: 2px solid #f39c12;\n    border-radius: 10px 30px; \/ Sol \u00fcst\/Sa\u011f alt 10px, Sa\u011f \u00fcst\/Sol alt 30px <\/em>\/\n}\n<\/code><\/pre>\n
*   D\u00f6rt De\u011fer:<\/strong> S\u0131ras\u0131yla sol \u00fcst, sa\u011f \u00fcst, sa\u011f alt ve sol alt k\u00f6\u015feler i\u00e7indir (saat y\u00f6n\u00fcnde).<\/p>\n
.custom-rounded {\n    border: 2px solid #e74c3c;\n    border-radius: 5px 15px 25px 35px; \/ Her k\u00f6\u015fe farkl\u0131 <\/em>\/\n}\n<\/code><\/pre>\n
*   Y\u00fczdelik De\u011ferler:<\/strong> Y\u00fczdelik de\u011ferler kullanmak, elementin boyutuna g\u00f6re dinamik yuvarlama sa\u011flar. \u00d6zellikle 50%<\/code> de\u011feri, kare bir elementi daireye, dikd\u00f6rtgen bir elementi ise elipse d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
.circle {\n    width: 100px;\n    height: 100px;\n    background-color: #9b59b6;\n    border-radius: 50%; \/ Daire yapar <\/em>\/\n}\n<\/code><\/pre>\n
border-radius<\/code> ayr\u0131ca her k\u00f6\u015fe i\u00e7in iki yar\u0131\u00e7ap de\u011feri (yatay ve dikey) alarak elips \u015feklinde yuvarlamalar yapman\u0131za da olanak tan\u0131r: border-radius: 10px \/ 20px;<\/code> veya border-radius: 10px 20px 30px 40px \/ 50px 60px 70px 80px;<\/code>.<\/p>\n
Kenarl\u0131k Resmi (border-image<\/code>)<\/h4>\n
border-image<\/code> \u00f6zelli\u011fi, geleneksel kenarl\u0131k renkleri veya stilleri yerine bir resim kullanarak daha karma\u015f\u0131k ve estetik kenarl\u0131klar olu\u015fturman\u0131z\u0131 sa\u011flar. Bu \u00f6zellik, border-image-source<\/code>, border-image-slice<\/code>, border-image-width<\/code>, border-image-outset<\/code> ve border-image-repeat<\/code> gibi alt \u00f6zelliklerden olu\u015fur. Genellikle bir k\u0131saltma olarak kullan\u0131l\u0131r.<\/p>\n
.image-border {\n    border: 15px solid transparent; \/ Kenarl\u0131k geni\u015fli\u011fini ve saydaml\u0131\u011f\u0131n\u0131 ayarla <\/em>\/\n    border-image: url('border-pattern.png') 30 round;\n    \/ Kaynak resim, dilimleme, tekrar etme stili <\/em>\/\n    \/ border-image-source: url('border-pattern.png'); <\/em>\/\n    \/ border-image-slice: 30; <\/em>\/\n    \/ border-image-repeat: round; <\/em>\/\n}\n<\/code><\/pre>\n
border-image<\/code> geli\u015fmi\u015f bir konu olup, resmin nas\u0131l dilimlenece\u011fini ve kenarlara nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131ca anlamay\u0131 gerektirir.<\/p>\n
G\u00f6lgeler (Shadows)<\/h3>\n
G\u00f6lgeler, elementlere derinlik ve \u00fc\u00e7 boyutlu bir etki katman\u0131n harika bir yoludur. CSS’te iki ana g\u00f6lge t\u00fcr\u00fc bulunur: kutu g\u00f6lgeleri (box-shadow<\/code>) ve metin g\u00f6lgeleri (text-shadow<\/code>).<\/p>\n
Kutu G\u00f6lgeleri (box-shadow<\/code>)<\/h4>\n
box-shadow<\/code> \u00f6zelli\u011fi, bir HTML elementinin kutusuna g\u00f6lge ekler. S\u00f6zdizimi olduk\u00e7a esnektir ve birden fazla g\u00f6lge tan\u0131mlaman\u0131za olanak tan\u0131r:<\/p>\n
box-shadow: offset-x offset-y blur-radius spread-radius color inset;<\/code><\/p>\n
*   offset-x<\/code> (Gerekli):<\/strong> G\u00f6lgenin yatay ofseti. Pozitif de\u011ferler sa\u011fa, negatif de\u011ferler sola kayd\u0131r\u0131r.
\n*   offset-y<\/code> (Gerekli):<\/strong> G\u00f6lgenin dikey ofseti. Pozitif de\u011ferler a\u015fa\u011f\u0131, negatif de\u011ferler yukar\u0131 kayd\u0131r\u0131r.
\n*   blur-radius<\/code> (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> G\u00f6lgenin bulan\u0131kl\u0131k yar\u0131\u00e7ap\u0131. De\u011fer ne kadar b\u00fcy\u00fck olursa, g\u00f6lge o kadar bulan\u0131k ve yay\u0131lm\u0131\u015f olur. S\u0131f\u0131r, keskin bir g\u00f6lge olu\u015fturur.
\n*   spread-radius<\/code> (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> G\u00f6lgenin yay\u0131lma yar\u0131\u00e7ap\u0131. Pozitif de\u011ferler g\u00f6lgeyi b\u00fcy\u00fct\u00fcr, negatif de\u011ferler k\u00fc\u00e7\u00fclt\u00fcr.
\n*   color<\/code> (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> G\u00f6lgenin rengi. Herhangi bir CSS renk de\u011feri olabilir. Belirtilmezse, taray\u0131c\u0131ya g\u00f6re de\u011fi\u015fen varsay\u0131lan bir renk (genellikle siyah) kullan\u0131l\u0131r.
\n*   inset<\/code> (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> Bu anahtar kelime kullan\u0131ld\u0131\u011f\u0131nda, g\u00f6lge elementin i\u00e7ine do\u011fru \u00e7izilir (i\u00e7 g\u00f6lge). Varsay\u0131lan olarak g\u00f6lge d\u0131\u015far\u0131 do\u011frudur (d\u0131\u015f g\u00f6lge).<\/p>\n
\u00d6rnekler:<\/strong><\/p>\n
*   Basit D\u0131\u015f G\u00f6lge:<\/strong><\/p>\n
.simple-shadow {\n    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);\n    \/ 5px sa\u011fa, 5px a\u015fa\u011f\u0131, 10px bulan\u0131kl\u0131k, %30 saydam siyah renk <\/em>\/\n}\n<\/code><\/pre>\n
*   \u0130\u00e7 G\u00f6lge:<\/strong><\/p>\n
.inset-shadow {\n    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\n    \/ \u0130\u00e7eri do\u011fru, ofset yok, 10px bulan\u0131kl\u0131k, %50 saydam siyah <\/em>\/\n}\n<\/code><\/pre>\n
*   Yay\u0131lm\u0131\u015f G\u00f6lge:<\/strong><\/p>\n
.spread-shadow {\n    box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.4);\n    \/ Ofset yok, 15px bulan\u0131kl\u0131k, 5px yay\u0131lma, mavi renk <\/em>\/\n}\n<\/code><\/pre>\n
*   Birden Fazla G\u00f6lge:<\/strong> Birden fazla g\u00f6lgeyi virg\u00fclle ay\u0131rarak tan\u0131mlayabilirsiniz. \u0130lk g\u00f6lge en \u00fcstte, son g\u00f6lge en altta \u00e7izilir.<\/p>\n
.multiple-shadows {\n    box-shadow:\n        2px 2px 5px rgba(0, 0, 0, 0.2), \/ \u0130lk g\u00f6lge <\/em>\/\n        -2px -2px 5px rgba(255, 255, 255, 0.5); \/ \u0130kinci g\u00f6lge (hafif vurgu) <\/em>\/\n}\n<\/code><\/pre>\n
box-shadow<\/code> \u00f6zelli\u011fi, d\u00fc\u011fmeler, kartlar, resimler ve di\u011fer UI elementlerine g\u00f6rsel derinlik katmak i\u00e7in \u00e7ok y\u00f6nl\u00fc bir ara\u00e7t\u0131r.<\/p>\n
Metin G\u00f6lgeleri (text-shadow<\/code>)<\/h4>\n
text-shadow<\/code> \u00f6zelli\u011fi, metinlere g\u00f6lge ekler. Bu, metni daha okunur hale getirebilir, ona derinlik katabilir veya \u00f6zel efektler olu\u015fturabilir. S\u00f6zdizimi box-shadow<\/code>‘a benzer, ancak spread-radius<\/code> ve inset<\/code> parametreleri yoktur:<\/p>\n
text-shadow: offset-x offset-y blur-radius color;<\/code><\/p>\n
*   offset-x<\/code> (Gerekli):<\/strong> G\u00f6lgenin yatay ofseti.
\n*   offset-y<\/code> (Gerekli):<\/strong> G\u00f6lgenin dikey ofseti.
\n*   blur-radius<\/code> (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> G\u00f6lgenin bulan\u0131kl\u0131k yar\u0131\u00e7ap\u0131.
\n*   color<\/code> (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> G\u00f6lgenin rengi.<\/p>\n
\u00d6rnekler:<\/strong><\/p>\n
*   Basit Metin G\u00f6lgesi:<\/strong><\/p>\n
.text-shadow-basic {\n    color: #fff;\n    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n    \/ 2px sa\u011fa, 2px a\u015fa\u011f\u0131, 4px bulan\u0131kl\u0131k, %50 saydam siyah <\/em>\/\n}\n<\/code><\/pre>\n
*   Kabartmal\u0131 Metin Efekti:<\/strong><\/p>\n
.embossed-text {\n    color: #eee;\n    text-shadow:\n        1px 1px 0 #ccc, \/ A\u00e7\u0131k renkli g\u00f6lge <\/em>\/\n        -1px -1px 0 #aaa; \/ Koyu renkli g\u00f6lge <\/em>\/\n    \/ \u0130ki g\u00f6lge ile kabartma efekti <\/em>\/\n}\n<\/code><\/pre>\n
*   Neon Efekti:<\/strong><\/p>\n
.neon-text {\n    color: #fff;\n    text-shadow:\n        0 0 5px #0f0,\n        0 0 10px #0f0,\n        0 0 20px #0f0,\n        0 0 40px #0f0;\n    \/ Farkl\u0131 bulan\u0131kl\u0131k ve yay\u0131lma ile birden fazla g\u00f6lge <\/em>\/\n}\n<\/code><\/pre>\n
text-shadow<\/code> \u00f6zelli\u011fi, ba\u015fl\u0131klar\u0131, logolar\u0131 veya \u00f6zel metin bloklar\u0131n\u0131 \u00f6ne \u00e7\u0131karmak i\u00e7in etkili bir yoldur.<\/p>\n
D\u0131\u015f \u00c7izgiler (Outlines)<\/h3>\n
D\u0131\u015f \u00e7izgiler (outline<\/code>), kenarl\u0131klara benzer \u015fekilde bir elementin etraf\u0131na \u00e7izilen \u00e7izgilerdir, ancak \u00f6nemli farklar\u0131 vard\u0131r. outline<\/code> \u00f6zelli\u011fi, elementin kutu modelini etkilemez; yani yer kaplamaz ve di\u011fer elementlerin d\u00fczenini de\u011fi\u015ftirmez. Genellikle bir elementin odakland\u0131\u011f\u0131n\u0131 (\u00f6rne\u011fin, bir form alan\u0131 t\u0131kland\u0131\u011f\u0131nda) belirtmek i\u00e7in eri\u015filebilirlik amac\u0131yla kullan\u0131l\u0131r.<\/p>\n
outline<\/code> \u00f6zelli\u011fi de border<\/code> gibi \u00fc\u00e7 ana \u00f6zellikle tan\u0131mlan\u0131r: geni\u015flik, stil ve renk.<\/p>\n
D\u0131\u015f \u00c7izgi Geni\u015fli\u011fi (outline-width<\/code>)<\/h4>\n
outline-width<\/code> \u00f6zelli\u011fi, d\u0131\u015f \u00e7izginin kal\u0131nl\u0131\u011f\u0131n\u0131 belirler. border-width<\/code> gibi, thin<\/code>, medium<\/code>, thick<\/code> anahtar kelimelerini veya px<\/code>, em<\/code> gibi uzunluk birimlerini kullanabilirsiniz.<\/p>\n
.outline-example {\n    outline-width: 3px;\n    outline-style: solid;\n    outline-color: blue;\n}\n<\/code><\/pre>\n
D\u0131\u015f \u00c7izgi Stili (outline-style<\/code>)<\/h4>\n
outline-style<\/code> \u00f6zelli\u011fi, d\u0131\u015f \u00e7izginin g\u00f6rsel stilini belirler. border-style<\/code> ile ayn\u0131 de\u011ferleri al\u0131r: none<\/code>, dotted<\/code>, dashed<\/code>, solid<\/code>, double<\/code>, groove<\/code>, ridge<\/code>, inset<\/code>, outset<\/code>.<\/p>\n
.dashed-outline {\n    outline-style: dashed;\n    outline-width: 2px;\n    outline-color: #f00;\n}\n<\/code><\/pre>\n
D\u0131\u015f \u00c7izgi Rengi (outline-color<\/code>)<\/h4>\n
outline-color<\/code> \u00f6zelli\u011fi, d\u0131\u015f \u00e7izginin rengini ayarlar. Herhangi bir CSS renk de\u011feri kullan\u0131labilir. Ayr\u0131ca, invert<\/code> anahtar kelimesi, d\u0131\u015f \u00e7izginin arka plan rengine g\u00f6re otomatik olarak ters bir renk almas\u0131n\u0131 sa\u011flar, bu da her zaman g\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 garanti eder.<\/p>\n
.inverted-outline {\n    background-color: #ccc; \/ Arka plan rengine g\u00f6re ters renk al\u0131r <\/em>\/\n    outline-style: solid;\n    outline-width: 2px;\n    outline-color: invert;\n}\n<\/code><\/pre>\n
K\u0131salt\u0131lm\u0131\u015f D\u0131\u015f \u00c7izgi \u00d6zelli\u011fi (outline<\/code> Shorthand)<\/h4>\n
border<\/code> \u00f6zelli\u011fine benzer \u015fekilde, outline<\/code> k\u0131saltmas\u0131 da geni\u015flik, stil ve rengi tek bir sat\u0131rda tan\u0131mlaman\u0131za olanak tan\u0131r. S\u0131ra genellikle width style color<\/code> \u015feklindedir.<\/p>\n
.shorthand-outline {\n    outline: 2px dotted #008000;\n}\n<\/code><\/pre>\n
D\u0131\u015f \u00c7izgi Ofseti (outline-offset<\/code>)<\/h4>\n
outline-offset<\/code> \u00f6zelli\u011fi, d\u0131\u015f \u00e7izginin elementin kenarl\u0131\u011f\u0131ndan ne kadar uzakta \u00e7izilece\u011fini belirler. Pozitif bir de\u011fer d\u0131\u015f \u00e7izgiyi elementten uzakla\u015ft\u0131r\u0131r, negatif bir de\u011fer ise kenarl\u0131\u011f\u0131n i\u00e7ine do\u011fru \u00e7eker.<\/p>\n
.offset-outline {\n    border: 1px solid #999;\n    outline: 2px solid #ff5733;\n    outline-offset: 5px; \/ D\u0131\u015f \u00e7izgi, kenarl\u0131ktan 5px uzakta <\/em>\/\n}\n<\/code><\/pre>\n
Kenarl\u0131klar ve D\u0131\u015f \u00c7izgiler Aras\u0131ndaki Farklar<\/h4>\n
*   Kutu Modeli Etkisi:<\/strong> border<\/code> elementin kutu modelinin bir par\u00e7as\u0131d\u0131r ve elementin kaplad\u0131\u011f\u0131 alan\u0131 art\u0131r\u0131r. outline<\/code> ise kutu modelini etkilemez, yer kaplamaz ve sayfa d\u00fczenini de\u011fi\u015ftirmez. Bu, \u00f6zellikle odaklanma durumlar\u0131nda (\u00f6rne\u011fin, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda) d\u00fczenin kaymamas\u0131n\u0131 sa\u011flar.
\n*   \u015eekil:<\/strong> Kenarl\u0131klar border-radius<\/code> ile yuvarlak k\u00f6\u015felere sahip olabilirken, d\u0131\u015f \u00e7izgiler her zaman dikd\u00f6rtgen veya kare \u015feklini korur (elementin \u015fekli ne olursa olsun).
\n*   Konum:<\/strong> Kenarl\u0131klar elementin i\u00e7inde yer al\u0131rken, d\u0131\u015f \u00e7izgiler kenarl\u0131\u011f\u0131n d\u0131\u015f\u0131na \u00e7izilir.
\n*   Eri\u015filebilirlik:<\/strong> outline<\/code> \u00f6zelli\u011fi, \u00f6zellikle klavye navigasyonu kullanan kullan\u0131c\u0131lar i\u00e7in bir elementin odakland\u0131\u011f\u0131n\u0131 belirtmek amac\u0131yla \u00e7ok \u00f6nemlidir. Bu nedenle, outline: none;<\/code> kullanmaktan ka\u00e7\u0131n\u0131lmal\u0131 veya yerine eri\u015filebilir bir alternatif sa\u011flanmal\u0131d\u0131r.<\/p>\n
En \u0130yi Uygulamalar ve Eri\u015filebilirlik<\/h3>\n
Kenarl\u0131klar, g\u00f6lgeler ve d\u0131\u015f \u00e7izgiler, web tasar\u0131m\u0131na estetik ve i\u015flevsellik katmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Ancak bunlar\u0131 kullan\u0131rken baz\u0131 en iyi uygulamalar\u0131 ve eri\u015filebilirlik konular\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir.<\/p>\n
*   Tutarl\u0131l\u0131k:<\/strong> Tasar\u0131m\u0131n\u0131zda kenarl\u0131k ve g\u00f6lge stillerini tutarl\u0131 bir \u015fekilde kullan\u0131n. \u00d6rne\u011fin, t\u00fcm etkile\u015fimli d\u00fc\u011fmelerin ayn\u0131 g\u00f6lge efekti veya form alanlar\u0131n\u0131n ayn\u0131 kenarl\u0131k stili olmas\u0131, kullan\u0131c\u0131 deneyimini iyile\u015ftirir.
\n*   Performans:<\/strong> \u00d6zellikle animasyonlu g\u00f6lgeler veya \u00e7ok karma\u015f\u0131k border-image<\/code> kullan\u0131mlar\u0131, sayfa performans\u0131n\u0131 etkileyebilir. A\u015f\u0131r\u0131ya ka\u00e7maktan ka\u00e7\u0131n\u0131n ve gerekti\u011finde performans\u0131 optimize edin.
\n*   Eri\u015filebilirlik (Accessibility):<\/strong>
\n    *   Odak G\u00f6stergeleri:<\/strong> outline<\/code> \u00f6zelli\u011fi, klavye ile gezinme yapan kullan\u0131c\u0131lar i\u00e7in bir elementin odakland\u0131\u011f\u0131n\u0131 belirten varsay\u0131lan ve kritik bir g\u00f6stergedir. outline: none;<\/code> kullanmak, bu kullan\u0131c\u0131lar i\u00e7in ciddi eri\u015filebilirlik sorunlar\u0131 yaratabilir. E\u011fer varsay\u0131lan d\u0131\u015f \u00e7izgiyi kald\u0131r\u0131rsan\u0131z, mutlaka box-shadow<\/code> veya border<\/code> gibi ba\u015fka bir g\u00f6rsel odak g\u00f6stergesi sa\u011flamal\u0131s\u0131n\u0131z.
\n    *   Renk Kontrast\u0131:<\/strong> G\u00f6lge renklerini se\u00e7erken, metin veya arka plan rengiyle yeterli kontrast sa\u011flad\u0131\u011f\u0131n\u0131zdan emin olun. \u00d6zellikle text-shadow<\/code> kullan\u0131rken, metnin okunabilirli\u011fini azaltmamaya dikkat edin.
\n    *   G\u00f6rsel Efektlerin Anlam\u0131:<\/strong> G\u00f6lgeler ve kenarl\u0131klar sadece estetik de\u011fil, ayn\u0131 zamanda i\u015flevsel de olabilir. \u00d6rne\u011fin, bir kart\u0131n y\u00fckseltilmi\u015f gibi g\u00f6r\u00fcnmesini sa\u011flayan bir g\u00f6lge, o kart\u0131n t\u0131klanabilir oldu\u011funu ima edebilir. Bu t\u00fcr g\u00f6rsel ipu\u00e7lar\u0131n\u0131n anlaml\u0131 ve tutarl\u0131 oldu\u011fundan emin olun.
\n*   Duyarl\u0131 Tasar\u0131m:<\/strong> Farkl\u0131 ekran boyutlar\u0131nda kenarl\u0131klar\u0131n, g\u00f6lgelerin ve d\u0131\u015f \u00e7izgilerin nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc test edin. Baz\u0131 durumlarda, k\u00fc\u00e7\u00fck ekranlarda daha ince kenarl\u0131klar veya daha az belirgin g\u00f6lgeler tercih edilebilir.<\/p>\n
Sonu\u00e7<\/h3>\n
CSS’in kenarl\u0131klar, g\u00f6lgeler ve d\u0131\u015f \u00e7izgiler \u00f6zellikleri, web tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricilerine HTML elementlerini g\u00f6rsel olarak zenginle\u015ftirmek i\u00e7in muazzam bir esneklik sunar. Kenarl\u0131klar, elementlerin s\u0131n\u0131rlar\u0131n\u0131 belirlerken, border-radius<\/code> ile modern ve yumu\u015fak ge\u00e7i\u015fler sa\u011flayabilir. box-shadow<\/code> ve text-shadow<\/code>, elementlere ve metinlere derinlik, boyut ve dramatik efektler katarken, outline<\/code> \u00f6zelli\u011fi \u00f6zellikle eri\u015filebilirlik a\u00e7\u0131s\u0131ndan \u00f6nemli bir odak g\u00f6stergesi olarak hizmet eder.<\/p>\n
Bu \u00f6zelliklerin her birinin inceliklerini anlamak ve bunlar\u0131 yarat\u0131c\u0131 bir \u015fekilde kullanmak, web sitelerinizin sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda estetik a\u00e7\u0131dan da \u00e7ekici olmas\u0131n\u0131 sa\u011flar. Do\u011fru kullan\u0131ld\u0131\u011f\u0131nda, bu basit CSS \u00f6zellikleriyle kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir ve tasar\u0131mlar\u0131n\u0131za profesyonel bir dokunu\u015f katabilirsiniz. Unutmay\u0131n, en iyi sonu\u00e7lar deneme, pratik yapma ve eri\u015filebilirlik standartlar\u0131na uyma ile elde edilir. Bu bilgiler \u0131\u015f\u0131\u011f\u0131nda, web projelerinizde bu g\u00fc\u00e7l\u00fc CSS \u00f6zelliklerini ustaca kullanarak harikalar yaratmaya ba\u015flayabilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme\nWeb tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve kullan\u0131c\u0131 deneyimi,","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-30604","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nHTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme - 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\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme\" \/>\n<meta property=\"og:description\" content=\"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve kullan\u0131c\u0131 deneyimi,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-29T15:41:01+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=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme\",\"datePublished\":\"2025-09-29T15:41:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/\"},\"wordCount\":2142,\"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\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/\",\"name\":\"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-29T15:41:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme\"}]},{\"@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":"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme - 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\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme","og_description":"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve kullan\u0131c\u0131 deneyimi,","og_url":"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-29T15:41:01+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme","datePublished":"2025-09-29T15:41:01+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/"},"wordCount":2142,"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\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/","url":"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/","name":"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-29T15:41:01+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-elementlerini-css-ile-kenarliklar-golgeler-ve-dis-cizgilerle-sekillendirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Elementlerini CSS ile Kenarl\u0131klar, G\u00f6lgeler ve D\u0131\u015f \u00c7izgilerle \u015eekillendirme"}]},{"@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\/30604","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=30604"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30604\/revisions"}],"predecessor-version":[{"id":30605,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30604\/revisions\/30605"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}