\nG\u00f6rsel Boyut<\/strong><\/td>\n| \u0130ki boyutlu (2D)<\/td>\n | Yumu\u015fak \u00fc\u00e7 boyutluluk (3D)<\/td>\n | Katmanl\u0131 \u00fc\u00e7 boyutluluk (3D)<\/td>\n<\/tr>\n | \nTemel Unsurlar<\/strong><\/td>\n| Basit ikonlar, parlak renkler, g\u00f6lgesiz<\/td>\n | \u0130\u00e7 ve d\u0131\u015f g\u00f6lgeler, tek renkli y\u00fczeyler<\/td>\n | \u015eeffafl\u0131k, arka plan bulan\u0131kl\u0131\u011f\u0131, ince kenarl\u0131klar<\/td>\n<\/tr>\n | \nYaratt\u0131\u011f\u0131 His<\/strong><\/td>\n| Minimalist, temiz, modern<\/td>\n | Yumu\u015fak, dokunsal, minimalist<\/td>\n | Havadar, \u015f\u0131k, teknolojik, katmanl\u0131<\/td>\n<\/tr>\n | \nOdak Noktas\u0131<\/strong><\/td>\n| \u0130\u00e7erik ve basitlik<\/td>\n | Aray\u00fcz elemanlar\u0131n\u0131n fiziksel hissi<\/td>\n | G\u00f6rsel hiyerar\u015fi ve derinlik<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/span>Glassmorphism Etkisinin Temel Bile\u015fenleri<\/span><\/h2>\nBa\u015far\u0131l\u0131 bir Glassmorphism tasar\u0131m\u0131 olu\u015fturmak i\u00e7in bir araya gelmesi gereken d\u00f6rt temel bile\u015fen vard\u0131r. Bu unsurlar\u0131n her biri, “cam” etkisinin inand\u0131r\u0131c\u0131l\u0131\u011f\u0131n\u0131 ve aray\u00fcz\u00fcn genel kullan\u0131labilirli\u011fini do\u011frudan etkiler. Bu bile\u015fenlerin uyum i\u00e7inde \u00e7al\u0131\u015fmas\u0131, estetik ve i\u015flevsellik aras\u0131nda m\u00fckemmel bir denge kurar.<\/p>\n <\/span>\u015eeffafl\u0131k (Transparency): Katmanlar Aras\u0131 G\u00f6rsel Ge\u00e7i\u015f<\/span><\/h3>\n\u015eeffafl\u0131k, Glassmorphism’in ruhudur. \u00d6n plandaki “cam” katman\u0131n, arkas\u0131ndaki arka plan\u0131 k\u0131smen g\u00f6stermesine olanak tan\u0131r. Genellikle CSS’teki RGBA veya HSLA renk tan\u0131mlamalar\u0131yla kontrol edilen bu \u00f6zellik, katman\u0131n ne kadar opak olaca\u011f\u0131n\u0131 belirler. Do\u011fru ayarlanm\u0131\u015f bir \u015feffafl\u0131k seviyesi, katmanlar aras\u0131nda yumu\u015fak bir g\u00f6rsel ba\u011flant\u0131 kurarak tasar\u0131ma derinlik katar.<\/p>\n <\/span>Arka Plan Bulan\u0131kl\u0131\u011f\u0131 (Background Blur): Odak Noktas\u0131 Yaratma<\/span><\/h3>\nGlassmorphism’in en ay\u0131rt edici \u00f6zelli\u011fi arka plan bulan\u0131kl\u0131\u011f\u0131d\u0131r. Bu efekt, cam panelin arkas\u0131ndaki \u00f6\u011felerin detaylar\u0131n\u0131 belirsizle\u015ftirerek, kullan\u0131c\u0131n\u0131n dikkatini cam panelin \u00fczerindeki i\u00e7eri\u011fe (metin, buton vb.) \u00e7eker. CSS’te `backdrop-filter: blur()` \u00f6zelli\u011fi ile uygulanan bu bulan\u0131kl\u0131k, okunabilirli\u011fi art\u0131r\u0131r ve da\u011f\u0131n\u0131k arka planlarda bile temiz bir odak alan\u0131 yarat\u0131r.<\/p>\n <\/span>\u00c7ok Katmanl\u0131 Yap\u0131: Derinlik ve Hiyerar\u015fi Alg\u0131s\u0131<\/span><\/h3>\nGlassmorphism, d\u00fcz bir ekranda derinlik ve hiyerar\u015fi hissi yaratmak i\u00e7in katmanlar\u0131 kullan\u0131r. En altta canl\u0131 bir arka plan, onun \u00fczerinde bir veya daha fazla “cam” panel ve en \u00fcstte de etkile\u015fimli i\u00e7erik bulunur. Bu katmanl\u0131 yap\u0131, kullan\u0131c\u0131lar\u0131n hangi \u00f6\u011fenin daha \u00f6nde ve \u00f6nemli oldu\u011funu sezgisel olarak anlamas\u0131na yard\u0131mc\u0131 olur. Katmanlar aras\u0131ndaki mesafe ve g\u00f6lgeler, bu derinlik alg\u0131s\u0131n\u0131 daha da g\u00fc\u00e7lendirir.<\/p>\n <\/span>\u0130nce Kenarl\u0131klar (Subtle Borders): Cam Hissiyat\u0131n\u0131 G\u00fc\u00e7lendirme<\/span><\/h3>\nBulan\u0131k ve \u015feffaf y\u00fczeylerin arka plandan ayr\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in genellikle ince ve hafif parlak bir kenarl\u0131k eklenir. Bu kenarl\u0131k, sanki \u0131\u015f\u0131k cam\u0131n kenarlar\u0131ndan yans\u0131yormu\u015f gibi bir etki yarat\u0131r. Genellikle 1 piksel kal\u0131nl\u0131\u011f\u0131nda ve hafif \u015feffaf beyaz bir renkte olan bu detay, cam panelin s\u0131n\u0131rlar\u0131n\u0131 belirginle\u015ftirir ve tasar\u0131m\u0131n daha rafine ve ger\u00e7ek\u00e7i g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n <\/span>Ba\u015far\u0131l\u0131 Bir Glassmorphism Tasar\u0131m\u0131 \u0130\u00e7in Dikkat Edilmesi Gerekenler<\/span><\/h2>\nGlassmorphism, do\u011fru uyguland\u0131\u011f\u0131nda son derece etkileyici sonu\u00e7lar verse de, dikkatsiz kullan\u0131ld\u0131\u011f\u0131nda okunabilirlik ve eri\u015filebilirlik sorunlar\u0131na yol a\u00e7abilir. Bu nedenle, bu esteti\u011fi projelerinize entegre ederken baz\u0131 \u00f6nemli kurallara uymak kritik \u00f6neme sahiptir.<\/p>\n <\/span>Do\u011fru Arka Plan Se\u00e7imi: Karma\u015f\u0131kl\u0131ktan Ka\u00e7\u0131nma<\/span><\/h3>\nGlassmorphism etkisinin en iyi \u015fekilde ortaya \u00e7\u0131kmas\u0131 i\u00e7in arkas\u0131ndaki arka plan\u0131n yeterince renkli ve canl\u0131 olmas\u0131 gerekir. Ancak \u00e7ok fazla detaya sahip veya karma\u015f\u0131k desenler i\u00e7eren arka planlar, bulan\u0131kl\u0131k efektine ra\u011fmen dikkat da\u011f\u0131t\u0131c\u0131 olabilir. Genellikle yumu\u015fak renk ge\u00e7i\u015flerine (gradient) sahip veya soyut \u015fekiller i\u00e7eren arka planlar en iyi sonu\u00e7lar\u0131 verir.<\/p>\n <\/span>Okunabilirlik ve Kontrast: Eri\u015filebilirlik \u0130lkeleri<\/span><\/h3>\nEn \u00f6nemli kural, esteti\u011fin asla okunabilirli\u011fin \u00f6n\u00fcne ge\u00e7memesidir. Cam panel \u00fczerindeki metinlerin ve ikonlar\u0131n arka planla yeterli kontrasta sahip oldu\u011fundan emin olun. Bulan\u0131kl\u0131k seviyesini ve panelin \u015feffafl\u0131\u011f\u0131n\u0131, metnin her zaman net ve kolay okunabilir olaca\u011f\u0131 \u015fekilde ayarlay\u0131n. Gerekirse metne hafif bir g\u00f6lge eklemek de okunabilirli\u011fi art\u0131rabilir.<\/p>\n <\/span>Katmanlar Aras\u0131 Bo\u015fluk ve Hiyerar\u015fi Y\u00f6netimi<\/span><\/h3>\nKatmanl\u0131 bir tasar\u0131mda \u00f6\u011feler aras\u0131ndaki bo\u015fluklar (padding ve margin) b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Cam panellerin kenarlar\u0131 ile i\u00e7erisindeki metin veya ikonlar aras\u0131nda yeterli bo\u015fluk b\u0131rakmak, s\u0131k\u0131\u015f\u0131k ve karma\u015f\u0131k bir g\u00f6r\u00fcn\u00fcm\u00fcn \u00f6n\u00fcne ge\u00e7er. \u00d6\u011feleri mant\u0131ksal bir hiyerar\u015fiye g\u00f6re d\u00fczenleyerek kullan\u0131c\u0131n\u0131n aray\u00fcz\u00fc kolayca taramas\u0131n\u0131 ve anlamas\u0131n\u0131 sa\u011flay\u0131n.<\/p>\n <\/span>Renk Paleti Kullan\u0131m\u0131: Canl\u0131 ve Parlak Vurgular<\/span><\/h3>\nGlassmorphism tasar\u0131mlar genellikle canl\u0131 ve parlak renklerle daha etkileyici g\u00f6r\u00fcn\u00fcr. Arka planda kullan\u0131lan canl\u0131 renkler, \u015feffaf katman\u0131n alt\u0131ndan s\u0131zarak tasar\u0131ma enerji katar. \u00d6n plandaki metinler ve butonlar i\u00e7in ise genellikle beyaz veya arka planla kontrast olu\u015fturacak parlak vurgu renkleri tercih edilir. Bu, hem esteti\u011fi g\u00fc\u00e7lendirir hem de \u00f6nemli eylem \u00e7a\u011fr\u0131lar\u0131n\u0131n (CTA) \u00f6ne \u00e7\u0131kmas\u0131n\u0131 sa\u011flar.<\/p>\n <\/span>Web Sitesinde CSS ile Ad\u0131m Ad\u0131m Glassmorphism Kart Uygulamas\u0131<\/span><\/h2>\nTeorik bilgileri prati\u011fe d\u00f6kmenin zaman\u0131 geldi. A\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyerek basit bir Glassmorphism kart tasar\u0131m\u0131n\u0131 kendi web projenize kolayca uygulayabilirsiniz. Bu \u00f6rnek, bir \u00fcr\u00fcn kart\u0131 veya profil kart\u0131 gibi bir\u00e7ok farkl\u0131 ama\u00e7 i\u00e7in kullan\u0131labilir.<\/p>\n <\/span>Gerekli HTML \u0130skeletinin Olu\u015fturulmas\u0131<\/span><\/h3>\n\u0130lk olarak, kart\u0131m\u0131z\u0131 ve arka plan\u0131m\u0131z\u0131 i\u00e7erecek temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Basit bir `div` yap\u0131s\u0131 yeterli olacakt\u0131r.<\/p>\n \u00d6rnek HTML Kodu:<\/b><\/p>\n<div class=\"container\">\n <div class=\"glass-card\">\n <h2>Glassmorphism Kart<\/h2>\n <p>Bu kart, CSS ile olu\u015fturulmu\u015f bir cam efektidir.<\/p>\n <a href=\"#\">Daha Fazla Bilgi<\/a>\n <\/div>\n<\/div><\/code><\/pre>\n<\/span>Arka Plan G\u00f6rseli ve Konteyner Ayarlar\u0131<\/span><\/h3>\nCam efektinin kendini g\u00f6sterebilmesi i\u00e7in renkli bir arka plana ihtiyac\u0131m\u0131z var. `container` s\u0131n\u0131f\u0131na bir arka plan g\u00f6rseli veya renk ge\u00e7i\u015fi (gradient) atayal\u0131m ve kart\u0131 ortalamak i\u00e7in temel flexbox stillerini ekleyelim.<\/p>\n \u00d6rnek CSS Kodu:<\/b><\/p>\nbody, html {\n margin: 0;\n padding: 0;\n font-family: 'Arial', sans-serif;\n}\n\n.container {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: linear-gradient(to right top, #65dfc9, #6cdbeb);\n}<\/code><\/pre>\n<\/span>Cam Efekti \u0130\u00e7in Temel Kart Stilinin Yaz\u0131lmas\u0131<\/span><\/h3>\n\u015eimdi en \u00f6nemli k\u0131sma geldik: `.glass-card` s\u0131n\u0131f\u0131na Glassmorphism \u00f6zelliklerini ekleyece\u011fiz. Bu ad\u0131m\u0131 alt \u00f6zelliklere ay\u0131rarak inceleyelim.<\/p>\n `background` \u00d6zelli\u011fi ile RGBA Renk ve \u015eeffafl\u0131k Verme<\/h4>\nKart\u0131n yar\u0131 \u015feffaf bir arka plana sahip olmas\u0131 i\u00e7in `background` \u00f6zelli\u011fini RGBA format\u0131nda kullanaca\u011f\u0131z. Son de\u011fer olan “alpha”, \u015feffafl\u0131\u011f\u0131 kontrol eder (0: tamamen \u015feffaf, 1: tamamen opak).<\/p>\n .glass-card {\n background: rgba(255, 255, 255, 0.25);\n}<\/code><\/pre>\n`backdrop-filter: blur()` \u00d6zelli\u011fi ile Arka Plan\u0131 Bulan\u0131kla\u015ft\u0131rma<\/h4>\n\u0130\u015fte sihirli dokunu\u015f! `backdrop-filter` \u00f6zelli\u011fi, eleman\u0131n arkas\u0131ndaki alan\u0131 bulan\u0131kla\u015ft\u0131r\u0131r. De\u011feri ne kadar y\u00fcksek olursa, bulan\u0131kl\u0131k o kadar artar.<\/p>\n .glass-card {\n \/* ... di\u011fer \u00f6zellikler ... *\/\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px); \/* Safari uyumlulu\u011fu i\u00e7in *\/\n}<\/code><\/pre>\n`border` ve `border-radius` ile Kenarlar\u0131 Belirginle\u015ftirme<\/h4>\nKarta yuvarlak k\u00f6\u015feler ve ince, parlak bir kenarl\u0131k ekleyerek cam hissini peki\u015ftirelim. `border-radius` k\u00f6\u015feleri yumu\u015fat\u0131rken, `border` kenarlar\u0131 tan\u0131mlar.<\/p>\n .glass-card {\n \/* ... di\u011fer \u00f6zellikler ... *\/\n border-radius: 15px;\n border: 1px solid rgba(255, 255, 255, 0.18);\n}<\/code><\/pre>\n`box-shadow` ile I\u015f\u0131k ve G\u00f6lge Efekti Ekleme<\/h4>\nSon olarak, karta hafif bir g\u00f6lge ekleyerek onu arka plandan biraz daha y\u00fckseltilmi\u015f gibi g\u00f6sterebiliriz. Bu, derinlik alg\u0131s\u0131n\u0131 art\u0131racakt\u0131r.<\/p>\n .glass-card {\n \/* ... di\u011fer \u00f6zellikler ... *\/\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n}<\/code><\/pre>\n<\/span>Kart \u0130\u00e7eri\u011finin (Metin, \u0130kon) Stillerinin Ayarlanmas\u0131<\/span><\/h3>\nKart\u0131n i\u00e7indeki metin ve di\u011fer \u00f6\u011felerin de okunabilir ve estetik g\u00f6r\u00fcnmesi i\u00e7in stil vermemiz gerekir. Genellikle beyaz veya a\u00e7\u0131k renkler tercih edilir.<\/p>\n \u00d6rnek CSS Kodu:<\/b><\/p>\n.glass-card h2, .glass-card p, .glass-card a {\n color: #fff;\n text-shadow: 0 1px 2px rgba(0,0,0,0.2);\n}\n\n.glass-card {\n padding: 30px;\n width: 300px;\n text-align: center;\n}<\/code><\/pre>\n
| | | | |