{"id":36952,"date":"2025-12-25T11:31:23","date_gmt":"2025-12-25T08:31:23","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/"},"modified":"2025-12-25T11:31:23","modified_gmt":"2025-12-25T08:31:23","slug":"css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/","title":{"rendered":"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin"},"content":{"rendered":"

CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin<\/h2>\n

Web tasar\u0131m\u0131nda derinlik, boyut ve g\u00f6rsel \u00e7ekicilik katman\u0131n en etkili yollar\u0131ndan biri g\u00f6lgeleri kullanmakt\u0131r. CSS’in box-shadow<\/code> ve text-shadow<\/code> \u00f6zellikleri, aray\u00fcz elemanlar\u0131n\u0131za ve metinlerinize hayat vererek s\u0131radan tasar\u0131mlar\u0131 etkileyici sanat eserlerine d\u00f6n\u00fc\u015ft\u00fcrmenizi sa\u011flar. Bu makalede, bu g\u00fc\u00e7l\u00fc CSS \u00f6zelliklerini derinlemesine inceleyecek, pratik \u00f6rneklerle uygulayacak ve web sitenizin esteti\u011fini bir \u00fcst seviyeye ta\u015f\u0131yacak ipu\u00e7lar\u0131n\u0131 payla\u015faca\u011f\u0131z. Haz\u0131r olun, g\u00f6lgelerin b\u00fcy\u00fcl\u00fc d\u00fcnyas\u0131na dal\u0131yoruz!<\/p>\n

CSS G\u00f6lgelerine Giri\u015f: Neden Kullanmal\u0131y\u0131z?<\/h3>\n

G\u00f6rsel Derinlik ve Hiyerar\u015fi<\/h3>\n

G\u00f6lgeler, iki boyutlu bir ekranda \u00fc\u00e7 boyutlu bir alg\u0131 yaratarak elemanlar\u0131n \u00f6ne \u00e7\u0131kmas\u0131n\u0131 sa\u011flar. Bu, kullan\u0131c\u0131lar\u0131n dikkatini \u00f6nemli i\u00e7eriklere \u00e7ekmeye ve bir aray\u00fczdeki hiyerar\u015fiyi net bir \u015fekilde belirlemeye yard\u0131mc\u0131 olur. Kullan\u0131c\u0131, hangi elemanlar\u0131n etkile\u015fimli oldu\u011funu veya daha \u00f6nemli oldu\u011funu g\u00f6lgeler sayesinde daha kolay anlar.<\/p>\n

Kullan\u0131c\u0131 Deneyimi ve Estetik<\/h3>\n

\u0130yi tasarlanm\u0131\u015f g\u00f6lgeler, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc daha sezgisel ve \u00e7ekici hale getirir. D\u00fc\u011fmelerin bas\u0131labilirli\u011fini, kartlar\u0131n ayr\u0131k elemanlar oldu\u011funu ve etkile\u015fimli \u00f6\u011felerin fark edilebilirli\u011fini art\u0131r\u0131r. Estetik a\u00e7\u0131dan da modern, temiz ve profesyonel bir g\u00f6r\u00fcn\u00fcm sunarak kullan\u0131c\u0131 memnuniyetini y\u00fckseltir.<\/p>\n

Marka Kimli\u011fi ve Modern Tasar\u0131m<\/h3>\n

G\u00f6lgeler, markan\u0131z\u0131n g\u00f6rsel kimli\u011fini g\u00fc\u00e7lendirmek i\u00e7in kullan\u0131labilir. Minimalist, Materyal Tasar\u0131m veya Neumorphism gibi g\u00fcncel tasar\u0131m trendlerinin temelini olu\u015ftururlar. Do\u011fru g\u00f6lge kullan\u0131m\u0131, sitenize \u00e7a\u011fda\u015f ve sofistike bir hava katarak markan\u0131z\u0131n dijital d\u00fcnyadaki alg\u0131s\u0131n\u0131 olumlu y\u00f6nde etkiler.<\/p>\n

Box-Shadow \u00d6zelli\u011fi: Kutu G\u00f6lgelerine Derinlemesine Bak\u0131\u015f<\/h3>\n

Temel S\u00f6zdizimi ve Parametreler<\/h3>\n

box-shadow<\/code> \u00f6zelli\u011fi, bir HTML eleman\u0131n\u0131n etraf\u0131na g\u00f6lge eklemek i\u00e7in kullan\u0131l\u0131r. Temel s\u00f6zdizimi ve parametreleri \u015funlard\u0131r:<\/p>\n

box-shadow: offset-x offset-y blur-radius spread-radius color inset;<\/pre>\n
<\/code><\/p>\n
    \n
  • offset-x<\/code>: G\u00f6lgenin yatay kayd\u0131rma miktar\u0131 (pozitif sa\u011fa, negatif sola).<\/li>\n
  • offset-y<\/code>: G\u00f6lgenin dikey kayd\u0131rma miktar\u0131 (pozitif a\u015fa\u011f\u0131ya, negatif yukar\u0131ya).<\/li>\n
  • blur-radius<\/code>: G\u00f6lgenin bulan\u0131kl\u0131k yar\u0131\u00e7ap\u0131. De\u011fer artt\u0131k\u00e7a g\u00f6lge daha yayg\u0131n ve yumu\u015fak olur.<\/li>\n
  • spread-radius<\/code>: G\u00f6lgenin yay\u0131lma yar\u0131\u00e7ap\u0131. De\u011fer artt\u0131k\u00e7a g\u00f6lge boyutu artar veya azal\u0131r (negatif de\u011ferler i\u00e7in).<\/li>\n
  • color<\/code>: G\u00f6lgenin rengi (HEX, RGB, RGBA, HSL, HSLA veya isimler).<\/li>\n
  • inset<\/code>: (Opsiyonel) G\u00f6lgenin kutunun i\u00e7ine do\u011fru olu\u015fmas\u0131n\u0131 sa\u011flar. Varsay\u0131lan olarak outset<\/code> (d\u0131\u015fa do\u011fru).<\/li>\n<\/ul>\n
    \u00d6rnek:<\/strong><\/p>\n
    Bu bir kutu.<\/div><\/pre>\n
    <\/code><\/p>\n
    .kutu-golge {\n    width: 200px;\n    height: 100px;\n    background-color: #f0f0f0;\n    margin: 50px;\n    border-radius: 8px;\n    box-shadow: 5px 5px 15px 2px rgba(0, 0, 0, 0.3); \/* Sa\u011f 5px, A\u015fa\u011f\u0131 5px, Bulan\u0131kl\u0131k 15px, Yay\u0131lma 2px, Yar\u0131 Saydam Siyah *\/\n}<\/pre>\n
    <\/code><\/p>\n
    \u00c7oklu G\u00f6lgeler Kullan\u0131m\u0131<\/h3>\n
    box-shadow<\/code> \u00f6zelli\u011fi, virg\u00fclle ay\u0131rarak birden fazla g\u00f6lge tan\u0131mlaman\u0131za olanak tan\u0131r. Bu teknik, daha karma\u015f\u0131k, katmanl\u0131 ve derinlikli efektler yaratmak i\u00e7in idealdir. \u00d6rne\u011fin, bir eleman\u0131n havada s\u00fcz\u00fcl\u00fcyormu\u015f gibi g\u00f6r\u00fcnmesini sa\u011flayabilirsiniz.<\/p>\n
    \u00d6rnek:<\/strong><\/p>\n
    .coklu-golge {\n    width: 200px;\n    height: 100px;\n    background-color: #f0f0f0;\n    margin: 50px;\n    border-radius: 8px;\n    box-shadow: 0 1px 1px rgba(0,0,0,0.1), \/* Yak\u0131n ve hafif g\u00f6lge *\/\n                0 2px 2px rgba(0,0,0,0.1),\n                0 4px 4px rgba(0,0,0,0.1),\n                0 8px 8px rgba(0,0,0,0.1),\n                0 16px 16px rgba(0,0,0,0.1); \/* Uzak ve daha yayg\u0131n g\u00f6lge *\/\n}<\/pre>\n
    <\/code><\/p>\n
    Yarat\u0131c\u0131 Box-Shadow Uygulamalar\u0131 (Neumorphism, Kart Tasar\u0131mlar\u0131)<\/h3>\n
    box-shadow<\/code>, modern web tasar\u0131m\u0131nda bir\u00e7ok yarat\u0131c\u0131 efekt i\u00e7in kullan\u0131l\u0131r:<\/p>\n
      \n
    • Neumorphism:<\/strong> Elemanlar\u0131n \"yumu\u015fak\" veya \"kabartmal\u0131\" g\u00f6r\u00fcnmesini sa\u011flayan bu trend, genellikle a\u00e7\u0131k renkli bir arka plan \u00fczerinde, eleman\u0131n kendisiyle ayn\u0131 renkte, biri a\u00e7\u0131k di\u011feri koyu iki z\u0131t g\u00f6lge kullan\u0131larak elde edilir.<\/li>\n
    • Kart Tasar\u0131mlar\u0131:<\/strong> Modern web sitelerinin vazge\u00e7ilmezi olan kartlar, box-shadow<\/code> ile kolayca ayr\u0131\u015ft\u0131r\u0131labilir, dikkat \u00e7ekici hale getirilebilir ve hiyerar\u015fi olu\u015fturulabilir.<\/li>\n<\/ul>\n
      Neumorphism \u00d6rne\u011fi:<\/strong><\/p>\n
      .neumorphic-button {
      \n    width: 150px;
      \n    height: 50px;
      \n    background-color: #e0e0e0;
      \n    border-radius: 10px;
      \n    box-shadow: 6px 6px 12px #bebebe, \/* Koyu g\u00f6lge *\/
      \n                -6px -6px 12px #ffffff; \/* A\u00e7\u0131k g\u00f6lge *\/
      \n    transition: all 0.2s ease-in-out;
      \n}
      \n.neumorphic-button:hover {
      \n    box-shadow: inset 2px 2px 5px #bebebe<\/p>\n","protected":false},"excerpt":{"rendered":"G\u00f6lgeler, iki boyutlu bir ekranda \u00fc\u00e7 boyutlu bir alg\u0131 yaratarak elemanlar\u0131n \u00f6ne \u00e7\u0131kmas\u0131n\u0131 sa\u011flar. Bu, kullan\u0131c\u0131lar\u0131n dikkatini \u00f6nemli i\u00e7erikl…","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-36952","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin\" \/>\n<meta property=\"og:description\" content=\"G\u00f6lgeler, iki boyutlu bir ekranda \u00fc\u00e7 boyutlu bir alg\u0131 yaratarak elemanlar\u0131n \u00f6ne \u00e7\u0131kmas\u0131n\u0131 sa\u011flar. Bu, kullan\u0131c\u0131lar\u0131n dikkatini \u00f6nemli i\u00e7erikl...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-25T08:31:23+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=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin\",\"datePublished\":\"2025-12-25T08:31:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/\"},\"wordCount\":635,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/\",\"name\":\"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-25T08:31:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin","og_description":"G\u00f6lgeler, iki boyutlu bir ekranda \u00fc\u00e7 boyutlu bir alg\u0131 yaratarak elemanlar\u0131n \u00f6ne \u00e7\u0131kmas\u0131n\u0131 sa\u011flar. Bu, kullan\u0131c\u0131lar\u0131n dikkatini \u00f6nemli i\u00e7erikl...","og_url":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-25T08:31:23+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"4 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin","datePublished":"2025-12-25T08:31:23+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/"},"wordCount":635,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/","url":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/","name":"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-25T08:31:23+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-shadows-mastery-box-shadow-ve-text-shadow-ile-web-tasariminizi-yukseltin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Shadows Mastery: Box-Shadow ve Text-Shadow ile Web Tasar\u0131m\u0131n\u0131z\u0131 Y\u00fckseltin"}]},{"@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\/36952","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=36952"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36952\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}