Glassmorphism Oluşturucu
Gorsel CSS ureticiyle etkileyici cam efektleri olusturun. Opakligi, bulanikligi, doygunlugu ve ton rengini ayarlayarak mukemmel buzlu cam gorunumu elde edin.
Öne çıkan özellikler
- Ayarlanabilir opaklık, bulanıklık ve doygunluk
- Özel renk tonu seçimi
- Gradyan arka planlar üzerinde canlı önizleme
- Kopyalamaya hazır CSS çıktısı
Guide
Cammosfizm (glassmorphism), arayüz öğelerinin renkli bir arka plan üzerinde süzülen buzlu cam paneller olarak göründüğü bir görsel tasarım stilidir. Etki, birlikte çalışan üç CSS özelliğine dayanır: arka plan şeffaflığı (düşük alfa ile rgba veya hsla), arka plan bulanıklığı (backdrop-filter: blur()) ve panel kenarını tanımlayan ince bir kenarlık veya gölge. Stil, Apple'ın macOS Big Sur ile 2020'de öne çıktı ve o zamandan beri modern web ve mobil arayüz tasarımında bir temel haline geldi. Bu kılavuz, cammosfizmi etkili şekilde kullanmak için teknik uygulamayı, performans etkilerini, tasarım ilkelerini ve pratik desenleri ele almaktadır. Bir cammosfizm panelinin çekirdek CSS'i üç bildirim gerektirir. Birincisi, yarı saydam bir arka plan: açık bir cam etkisi için background: rgba(255, 255, 255, 0.15) veya koyu bir cam etkisi için background: rgba(0, 0, 0, 0.25). İkincisi, bir arka plan bulanıklığı: backdrop-filter: blur(12px). Üçüncüsü, ışığı yakalayan bir kenarlık: border: 1px solid rgba(255, 255, 255, 0.2). Şeffaf arka plan, bulanık arka plan ve parlak kenarlığın birleşimi buzlu cam illüzyonunu yaratır. Bu üç bileşenden herhangi biri olmadan etki düzleşir. Bulanıklık olmadan şeffaf bir arka plan renkli bir kaplama gibi görünür. Şeffaflık olmadan bulanıklık öğenin arkasındaki hiçbir şeyi göstermez. Ve kenarlık olmadan, panel kenarları arka plan içinde kaybolur. backdrop-filter özelliği, bir öğenin arkasındaki alana grafik efektleri uygular. CSS filter özelliğiyle aynı filtre fonksiyonlarını destekler: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() ve drop-shadow(). Cammosfizm için blur() birincil fonksiyondur. Bulanıklık yarıçapı buzlu efektin yoğunluğunu kontrol eder: blur(4px) hafif bir yumuşaklık, blur(12px) orta derecede bir buzlanma ve blur(24px) arka plan detaylarının zar zor görüldüğü ağır bir buzlanma yaratır. Birden çok fonksiyonu birleştirebilirsiniz: backdrop-filter: blur(12px) saturate(180%), bulanık arka plana renk canlılığı ekler ve camın arkasındaki renkleri daha canlı gösterir. Bulanıklık yarıçapı değeri, panelin ne kadar camsı veya katı göründüğünü belirler. Düşük değerler (4px ila 8px) daha fazla arka plan detayı korur ve daha hafif hissettirir. Orta değerler (10px ila 16px) klasik buzlu cam görünümünü yaratır. Yüksek değerler (20px+) arka planı neredeyse tamamen gizler; bu noktada cam metaforunu kaybedersiniz ve panel katı, yarı saydam bir yüzey gibi görünür. Çoğu arayüz uygulaması için 8px ila 16px, görsel ilgi ile içerik okunaklılığı arasında doğru dengeyi yakalar. Seçtiğiniz bulanıklık yarıçapını gerçek arka plan içeriğinizle test ederek efektin amaçlandığı gibi çalıştığını doğrulayın. Arka plan alfası (şeffaflık), bulanıklık yarıçapıyla gerilim içinde çalışır. Çok düşük alfalı (0.05 ila 0.10) bir arka plan, bulanık arka planın daha fazlasını gösterir ve daha hafif, daha şeffaf bir his yaratır. Daha yüksek alfalı (0.25 ila 0.40) bir arka plan, arka planın daha fazlasını gizler ve daha katı, opak bir his yaratır. Doğru kombinasyon, cam panelin arkasında ne olduğuna bağlıdır. Meşgul, renkli bir arka planda, metnin okunabilir kalmasını sağlamak için daha yüksek alfa ve daha güçlü bulanıklık kullanılır. Basit, yumuşatılmış bir arka planda, daha düşük alfa ve daha hafif bulanıklık daha zarif bir etki yaratır. Tek bir doğru kombinasyon yoktur. Her tasarım bağlamı, görsel etki ile kullanılabilirlik arasındaki dengeyi bulmak için test gerektirir. Kenarlık ve gölge, cam panelin kenarını tanımlar ve illüzyonun çalışması için önemlidir. Kenarlık olmadan, panel çevresine karışır ve boyutsal niteliğini kaybeder. Açık bir cam panelde rgba(255, 255, 255, 0.18) veya koyu bir cam panelde rgba(255, 255, 255, 0.08) kullanılan ince bir kenarlık, gerçek camın kenarında ışık yakalanmasını taklit eder. Box-shadow derinlik ekler: hafif bir gölge için box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) veya daha dramatik bir yükseltme için box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37). Gölge, panelin arka plan üzerinde süzüldüğünü güçlendirir. Bazı uygulamalar ek boyut için ikinci bir iç gölge ekler. backdrop-filter'ın performansı, üretim kullanımı için en önemli değerlendirmedir. Arka plan bulanıklığı, tarayıcı öğenin arkasındaki içeriği oluşturmak, oluşturulan bu içeriğe bulanıklık filtresi uygulamak ve ardından yarı saydam öğenin altına bulanık sonucu birleştirmek zorunda olduğundan GPU yoğundur. Cam panelin arkasındaki herhangi bir şey değişirse (kaydırma, animasyonlar, video) bu her karede gerçekleşir. Üst düzey masaüstü GPU'larda bu pürüzsüzdür. Düşük uçlu mobil cihazlarda, önemli kare düşüşlerine ve pil tüketimine neden olabilir. Performans maliyeti, bulanıklık yarıçapı ve bulanıklaştırılan alan ile ölçeklenir. blur(8px) ile küçük bir cam kart, blur(20px) ile tam genişlikte bir cam gezinme çubuğundan çok daha ucuzdur. Performans optimizasyon stratejileri arasında, aynı anda görünen cam öğelerin sayısını sınırlamak (50 öğeli bir ızgaradaki her karta cam panel koymaktan kaçının), mobilde bulanıklık yarıçapını azaltmak (daha küçük ekranlarda blur(20px) yerine blur(8px)), mobilde animasyonlu veya video arka planlar üzerinde cam efektlerinden kaçınmak ve tarayıcıya GPU kaynaklarını hazırlaması için bir ipucu olarak will-change: backdrop-filter kullanmak bulunur. Ayrıca birleştirme kapsamını sınırlamak için cam öğede contain: paint özelliğini kullanabilirsiniz. Yalnızca geliştirme makinenizde değil, gerçek düşük uçlu cihazlarda test edin. Bir MacBook Pro'da iyi performans gösteren bir cam efekti, Adreno 505 GPU'ya sahip bir ekonomik Android telefonda takılabilir. backdrop-filter için tarayıcı desteği artık yaygındır. Chrome, Edge, Safari ve Firefox'un tümü bunu destekler. -webkit- öneki (-webkit-backdrop-filter) 18'den önceki Safari sürümleri için hala gereklidir. Internet Explorer bunu desteklemez. Desteği olmayan tarayıcılar için yedek, bulanıklık olmadan düz yarı saydam bir arka plandır. Bunu varsayılan olarak tanımlayın ve bulanıklığı üzerine katmanlayın: yedek olarak background: rgba(255, 255, 255, 0.7) (bulanıklık olmadan okunaklılığı korumak için daha opak), ardından yetenekli tarayıcılar için @supports (backdrop-filter: blur(1px)) { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); }. Yedek, cam efektinin pahasına kullanılabilirliği korur. Eksiksiz bir cammosfizm CSS parçacığı şöyle görünür. Temel stiller için: backdrop-filter desteği olmayan tarayıcılar için yedek olarak background: rgba(255, 255, 255, 0.7). Ardından bir @supports bloğunun içinde: background: rgba(255, 255, 255, 0.15), ardından backdrop-filter: blur(12px) ve -webkit-backdrop-filter: blur(12px). @supports bloğunun dışında border: 1px solid rgba(255, 255, 255, 0.2), box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) ve border-radius: 16px ekleyin. Bu desen, zarif bozulmayla tüm tarayıcıları kapsar. Cam efektinin renk sıcaklığı modu belirler. Sıcak cam, hafifçe renk tonu verilmiş arka planlar kullanır: rgba(255, 200, 150, 0.15) sıcak bir kehribar tonu ekler. Soğuk cam mavi tonlar kullanır: rgba(100, 150, 255, 0.15). Nötr cam çeşitli opaklıklarda beyaz veya siyah kullanır. Ton, camın arkasındaki renklerle etkileşime girdiğinden, algılanan renk arka plan değiştikçe değişir. Bu dinamik nitelik, cammosfizmin canlı ve bağlama duyarlı hissetmesinin bir parçasıdır. Marka renkli cam için, yarı saydam efekti korurken marka kimliğini güçlendirmek amacıyla marka renginizi çok düşük alfada (0.05 ila 0.15) kullanın. Koyu mod cammosfizmi yaklaşımı tersine çevirir. Renkli bir arka plan üzerinde açık cam yerine, daha açık bir kenarlıkla (rgba(255, 255, 255, 0.08)) koyu cam (rgba(0, 0, 0, 0.40) veya rgba(17, 25, 40, 0.60)) kullanın. Arka plan bulanıklığı aynı şekilde çalışır. Koyu cam paneller, hafif renk gradyanları veya ortam ışığı efektleriyle koyu arka planlar üzerinde sofistike görünür. Apple'ın iOS'taki Kontrol Merkezi, koyu cammosfizmin klasik bir örneğidir. Koyu mod için, kenarlık rengi kayması önemlidir: kenarlığın çok parlak görünmeden cam kenarını korumak için beyaz kenarlıklardan koyu arka planın biraz daha açık sürümlerine geçin. Cam panellerdeki metin okunaklılığı dikkatli dikkat gerektirir çünkü cammosfizmin en sık başarısız olduğu yer burasıdır. Yarı saydam, bulanık arka plan, etkili arka plan renginin panelin arkasında olan şeye bağlı olarak değişmesi anlamına gelir. Beyaz metin, panel arka planın koyu bir alanı üzerindeyken okunabilir olabilir, ancak (örneğin kaydırma sırasında) açık bir alana geçtiğinde okunamaz hale gelebilir. Çözümler arasında, arkada olan şeyden bağımsız olarak minimum kontrast sağlamak için daha yüksek arka plan alfası kullanmak, ek ayrım için bir text-shadow eklemek (text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)), daha kalın font ağırlıkları kullanmak (400 yerine 600 veya 700) ve cam panellerin arkasındaki arka planın kontrol edilmiş ve parlaklıkta çok çeşitli olmamasını sağlamak bulunur. Katmanlı cam, farklı bulanıklık seviyeleri ve opaklıklara sahip birden çok cam paneli istifleyerek derinlik yaratır. Ağır bulanıklık ve düşük opaklığa sahip bir arka plan cam katmanı, daha hafif bulanıklık ve biraz daha yüksek opaklığa sahip bir ön plan cam panelinin arkasında yer alır. Bu, bir derinlik ve hiyerarşi hissi yaratır. Apple bunu macOS ve iOS'ta kapsamlı şekilde kullanır. z-index katmanlamasıyla uygulayın: arka plan katmanı daha yüksek bir bulanıklık yarıçapına (blur(20px)), ön plan katmanı ise biraz daha fazla opaklıkla daha düşük bir bulanıklık yarıçapına (blur(8px)) sahiptir. Üç veya daha fazla katman mümkündür ama nadirdir ve her katman oluşturma maliyetine eklenir. Cammosfizm belirli arayüz desenleri için en iyi çalışır: içerik üzerinde süzülen gezinme çubukları, modal diyaloglar ve kaplamalar, bildirim panelleri, kenar çubukları, hero bölümleri üzerindeki kart öğeleri, albüm kapağı üzerinde medya oynatıcı kontrolleri, araç ipucu ve açılır pencere öğeleri ve veri görselleştirmeleri üzerindeki pano widget'ları. Yoğun içerik alanları (makale metni, veri tabloları, birçok alan içeren formlar) için, camın arkasındaki değişen arka plan içerikten dikkati dağıttığından kötü çalışır. Cam efektlerini sayfadaki her şey için varsayılan yüzey işlemesi olarak değil, vurgu olarak kullanın. Cam panelin arkasındaki arka plan, camın kendisi kadar önemlidir. Cammosfizm, pürüzsüz geçişlerle renkli, gradyan arka planlar üzerinde en iyi görünür. Koyu mordan okyanus mavisine veya sıcak turuncudan pembeye bir gradyan, bulanıklık efekti için ideal arka plan sağlar. Cam panel bu renkleri güzel şekilde yumuşatır ve dağıtır. Düz beyaz veya düz siyah bir arka plan üzerinde, bulanıklaştırılacak bir şey olmadığından cam efekti görünmezdir. Keskin detaylara sahip meşgul fotoğrafik bir arka plan üzerinde, bulanıklık bulanık bir sonuç üretir. Arka planınızı ve cam panellerinizi bir sistem olarak birlikte tasarlayın. Cammosfizmi diğer tasarım öğeleriyle birleştirmek etkiyi artırır. Cam panel arka planında hafif gradyanlar (rgba(255,255,255,0.2)'den rgba(255,255,255,0.05)'e bir linear-gradient), yönlü ışık ekler. İç gölgeler (box-shadow: inset 0 1px 0 rgba(255,255,255,0.2)), ışığın camın üst kenarına çarpmasını taklit eder. border-radius paneli yumuşatır (16px ila 24px cammosfizm tasarımlarında yaygındır). Birlikte, bu detaylar camı daha fiziksel ve üç boyutlu hissettirir. Cam öğelerle animasyon pürüzsüz ve amaçlı olmalıdır. Cam panelleri opaklık geçişleriyle soldurun. Bunları transform çevirileriyle konumlarına kaydırın. backdrop-filter bulanıklık değerinin kendisini canlandırmaktan kaçının, çünkü bulanıklık yarıçapını her karede değiştirmek tarayıcıyı bulanık arka planı yeniden oluşturmaya zorlar ve bu son derece pahalıdır. Bir bulanıklık animasyonuna ihtiyacınız varsa, bir pseudo-element üzerinde CSS filter: blur() kullanarak ayrı bir bulanık arka plan katmanını canlandırmayı düşünün; bu, backdrop-filter'dan tarayıcıların optimize etmesi daha kolaydır. Cam öğelerde transform ve opaklık animasyonları, bulanıklığı yeniden hesaplamayı gerektirmediğinden iyi performans gösterir. Cammosfizmin tasarım sistemi entegrasyonu, bir dizi cam belirteci tanımlamayı gerektirir: açık ve koyu opaklıklarda cam arka plan renkleri, cam kenarlık renkleri, cam gölge değerleri ve farklı bağlamlar için cam bulanıklık yarıçapları. Yeniden kullanılabilir CSS sınıfları veya bileşen varyantları oluşturun: .glass-light, .glass-dark, .glass-subtle, .glass-prominent. Hangi cam varyantlarının hangi arka plan türlerinde çalıştığını belgeleyin. Bu, kod tabanı boyunca geçici cam değerlerinin tutarsızlığını önler ve efektin desteklenmeyen tarayıcılarda tutarlı şekilde bozulmasını sağlar. React, Vue ve diğer bileşen çerçevelerindeki cammosfizm tipik olarak yeniden kullanılabilir bir bileşen veya bir CSS yardımcı program sınıfı olarak uygulanır. React'te bir GlassPanel bileşeni, bulanıklık yoğunluğu, opaklık, ton rengi ve kenarlık görünürlüğü için props kabul eder ve hesaplanan stillerle bir div oluşturur. Tailwind CSS, cammosfizmi yardımcı program sınıflarıyla basit hale getirir: bg-white/15 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg. Bileşen düzeyinde uygulama, uygulama genelinde tutarlı cam efektleri sağlar ve tasarım gereksinimleri değiştiğinde efekti güncellemek için tek bir yer sağlar. Cammosfizme yönelik erişilebilirlik endişeleri metin okunaklılığı ve hareket hassasiyeti etrafında merkezleşir. Bahsedildiği gibi, cam panellerin arkasındaki değişen arka plan metnin okunmasını zorlaştırabilir. Ek olarak, bulanıklık efekti, özellikle cam paneller değişen arka planlar üzerinde kaydırıldığında vestibüler bozuklukları olan bazı kullanıcılar tarafından yönlendirme kaybına neden olabilecek bir görsel efektin kendisidir. prefers-reduced-transparency ve prefers-reduced-motion medya sorgularına saygı gösterin. Azaltılmış şeffaflık tercih eden kullanıcılar için düz opak bir arka plana geri dönün. Azaltılmış hareket tercih eden kullanıcılar için cam panelleri canlandırmaktan kaçının. Diğer tasarım eğilimleriyle karşılaştırıldığında cammosfizm belirli bir niş doldurur. Neumorphism (yumuşak arayüz), aynı renkli arka planlar üzerinde kabarık ve basık efektler yaratmak için hafif gölgeler kullanır. Zayıf kontrast ve erişilebilirlik sorunlarından muzdariptir. Düz tasarım, derinlik efektleri olmayan düz renkler kullanır. Material Design, opak yüzeylerde yükseltme ve gölgeler kullanır. Cammosfizm, düz tasarım ile material tasarım arasında yer alır ve yalnızca gölgeden ziyade şeffaflık yoluyla derinlik ekler. En iyi bir vurgu stili olarak çalışır. Tamamı cammosfizm olan bir uygulama görsel olarak gürültülü hale gelir. Seçici kullanım (gezinme, modallar, öne çıkan kartlar), kullanıcıyı bunaltmadan görsel ilgi yaratır. Cammosfizm uygulamalarının gerçek dünyadaki örnekleri referans noktaları sağlar. Apple, cammosfizmi macOS'ta (menü çubuğu, kenar çubukları, bildirim merkezi) ve iOS'ta (Kontrol Merkezi, widget'lar, uygulama değiştirici) kapsamlı şekilde kullanır. Microsoft, Windows 11'de (Başlat menüsü, görev çubuğu, ayarlar panelleri) bir gürültü dokusu katmanıyla cammosfizmin bir varyasyonu olan Acrylic materyali kullanır. Bu uygulamalar, cammosfizmin işletim sistemi veya uygulama arka plan içeriğini kontrol ettiğinde, tutarlı bir bulanıklık ve kontrast seviyesi sağlayarak en iyi çalıştığını gösterir. Hem arka planı hem de cam panelleri kontrol ettiğiniz web'de aynı kontrol seviyesine sahipsiniz. Gürültü dokusu katmanı, cam panellere onları daha fiziksel buzlu cam gibi gösteren hafif bir tane ekler. Gerçek buzlu cam pürüzsüz bir bulanıklık değil, hafifçe pürüzlü bir dokuya sahiptir. Bu dokuyu çok düşük opaklıkta (yüzde 2 ila 5) bir gürültü PNG'si veya SVG filtresi kullanarak bir pseudo-element ile ekleyebilirsiniz. Gürültü, camın çok dijital olarak temiz görünmesini önler. Microsoft'un Acrylic materyali bu tekniği kullanır. Uygulama: arka plan olarak küçük döşeli bir gürültü görüntüsü içeren bir ::before pseudo-element ekleyin, paneli doldurmak için mutlak konumlandırın ve opaklığı 0.03 ila 0.05'e ayarlayın. Kaydırma sırasında cammosfizm dikkatli uygulama gerektirir. Kaydırılan içerik üzerinde sabit bir cam gezinme çubuğu, farklı içerik arkasından geçerken sürekli değişen bir bulanıklık efekti yaratır. Bu harika görünür ama kaydırma sırasında her karede backdrop-filter'ın yeniden hesaplanması gerektiğinden performans açısından yoğundur. Ağır kaydırma tabanlı bulanıklığa sahip uzun sayfalar için, mobilde daha basit bir etki (düz yarı saydam arka plan) kullanmayı ve GPU gücünün tipik olarak yeterli olduğu masaüstü için tam cam efektini ayırmayı düşünün. Cammosfizmi camın arkasındaki farklı içerik türleriyle test etmek, uygulamanızın ne kadar sağlam olduğunu ortaya çıkarır. Cam panelin arkasından metin içeriği, görüntüler, videolar, düz renkler, gradyanlar ve karışık içerik geçerken test edin. Her içerik türü farklı bulanıklık sonuçları üretir. Cam arkasındaki yoğun metin gri bir bulanıklık yaratır. Renkli görüntüler canlı, değişen renkler yaratır. Video sürekli değişen bulanıklık yaratır. Cam panelinizin tüm bu senaryolarda metin okunaklılığını ve görsel çekiciliği koruması veya cam öğelerin arkasında hangi içeriğin görünebileceğini kısıtlamanız gerekir. Cammosfizmi buzlu kenar çubuğu desenleriyle birleştirmek, kendine has bir uygulama düzeni yaratır. Ana içerik alanı üzerinde bir cam kenar çubuğu, içeriği tamamen gizlemeden gezinme sağlar. Kenar çubuğunun üzerine gelindiğinde veya genişletildiğinde cam efektinin daha fazlası ortaya çıkar. Bu desen, kenar çubuğunun ikincil bir öğe olduğu panolar ve yönetim panelleri için iyi çalışır. Cam stillerini taşıyan sabit veya yapışkan bir kenar çubuğu öğesiyle, uygun z-index ile ana içerik alanı üzerinde konumlandırılarak uygulayın. backdrop-filter için yalnız-CSS alternatifleri, eski tarayıcılar veya performans kısıtlı durumlar için mevcuttur. İçeriğin arkasına konumlandırılmış bir pseudo-element (::before), sayfayla aynı arka plan görüntüsünü kullanarak background-attachment: fixed ile arka planın bulanık bir kopyasını taşıyabilir, artı bir CSS filter: blur() ekleyebilir. Bu yaklaşım, öğenin arkasındaki gerçek içeriği bulanıklaştırmaz (bunun yerine sabit bir arka plan görüntüsünü bulanıklaştırır), bu nedenle yalnızca dinamik içerik için değil, sabit arka planlar için çalışır. Bu sınırlamaya rağmen, bulanıklık statik bir görüntüye bir kez uygulandığından ve her karede yeniden hesaplanmadığından, backdrop-filter'dan daha iyi tarayıcı desteği ve performansla ikna edici bir cam efekti üretir. cammosfizm üreteci aracı, arka plan rengini, opaklığı, bulanıklık yarıçapını, kenarlığı ve gölgeyi gerçek zamanlı olarak ayarlarken sonucu örnek bir arka plan üzerinde önizlemenize olanak tanır. Oluşturulan CSS'i doğrudan stil sayfanıza kopyalayın. Üretilen değerlerle bir temel olarak başlayın, ardından bunları gerçek arka planınız ve içeriğinizle bağlamda rafine edin. Üreteç, Safari uyumluluğu için -webkit- öneki ve backdrop-filter desteği olmayan tarayıcılar için @supports yedeği dahil sözdizimini yönetir.
Sık sorulan sorular
Cam morfizmi (glassmorphism) nedir?
Cam morfizmi, arka plan bulanıklığı ve ince kenarlıklarla yarı saydam, buzlu cam benzeri öğeler içeren bir UI tasarım eğilimidir.
Cam morfizmi tüm tarayıcılarda çalışır mı?
backdrop-filter özelliği Chrome, Firefox, Safari ve Edge dahil tüm modern tarayıcılarda desteklenir.
