Yüksek çözünürlüklü cam efekti için CSS oluşturucu

 (glass3d.dev)
5 puan yazan GN⁺ 2025-07-04 | 1 yorum | WhatsApp'ta paylaş
  • glass3d generator, ayar değerlerini değiştirerek cam dokusu CSS'sini anında önizleyip kopyalayabileceğiniz bir araçtır
  • Temel ayarlar, backdrop-filter içindeki blur, brightness, saturation ile renk ve doku seçiminden oluşur
  • Renkler HSL ve alfa değeriyle ele alınır; örnek değer hsl(189 80% 10% / 0.2) şeklindedir
  • Doku olarak rice paper, egg shell, ink jet, coarse, topology arasından seçim yapılabilir
  • Üretilen CSS, .glass3d, ::before, ::after ve alt öğelerin z-index'ini birleştirerek arka plan filtresi, gürültü dokusu, iç gölge ve içerik katmanını ayırır

glass3d generator'da ayarlanabilen değerler

  • Ayarları değiştirdiğinizde sonuç doğrudan arayüzün kendisine yansır
  • Tamamlanan CSS kopyalanıp kullanılabilir
  • Başlıca ayar öğeleri şunlardır
    • backdrop-filter
    • blur
    • brightness
    • saturation
    • color
    • texture

Üretilen CSS yapısı

  • .glass3d sınıfı, CSS değişkenlerini ve katman referansını tanımlar
    • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
    • --color-glass3d: hsl(189 80% 10% / 0.2)
    • --noise-glass3d: transparenttextures.com üzerindeki egg-shell.png
    • position: relative, z-index: 4 ve birden fazla aşamalı box-shadow kullanır
  • .glass3d::before, arka plan filtresi ve dokuyu uygular
    • -webkit-backdrop-filter ve backdrop-filter için var(--filter-glass3d) kullanır
    • background-color ve background-image içinde sırasıyla renk değişkeni ve gürültü değişkeni yer alır
    • background-size: 100px, background-repeat: repeat ayarlanır
  • .glass3d::after, iç vurgu gölgesi ekler
    • Birden fazla inset box-shadow değeri kullanır
  • .glass3d > *, içeriğin üstte görünmesi için position: relative ve z-index: 6 uygular

İlgili okumalar

1 yorum

 
GN⁺ 2025-07-04
Hacker News yorumları

  • Bu yöntemin, bulanıklığı yalnızca yüzeyin hemen arkasındaki piksellere uygulama sorunu var; bu da https://www.joshwcomeau.com/css/backdrop-filter/#the-issue adresinde iyi gösteriliyor.
    https://news.ycombinator.com/item?id=42302907 tartışmasıyla birlikte okumaya değer. Arka plan alttan hareket ediyorsa yalnızca hemen arkadaki pikselleri bulanıklaştırma sorunu oldukça önemli; statik bir arka planda ise genellikle pek önemli değil.

    • Josh’un mükemmel yazısını okudum ve öğreticiyi de uyguladım, ama SVG maskesiyle border-radius işleme kısmında sorun yaşadım.
      Sabit kodlanmış öğelerde iyi çalıştı, fakat kullanıcının markalamasına ve container query’lere göre border-radius’un değiştiği bütün bir bileşen kütüphanesinde bunu nasıl çalıştıracağım hâlâ çözülmesi gereken bir konu.
    • Josh’un çözümü de sezgisel olarak yanlış görünüyor. Yakındaki öğelerin ışık yayan cisimler olduğunu varsayıyor gibi; web’deki “malzemenin” varsayılan olarak böyle fiziksel özelliklere sahip olduğunu söylemek zor.
      Ben daha çok varsayılan malzemenin kâğıda yakın olduğunu düşünüyorum.
    • Hangisinin daha doğru olduğunu söylemek zor. Varsayılan yöntem, buzlu camın hemen arkasındaki nesneleri yaklaşıklar; ayarlanmış yöntem ise çok daha uzaktaki nesneleri taklit eder.
      Bana göre ayarlanmış sürüm derinlik ipuçlarıyla çakıştığı için çok daha dikkat dağıtıcı ve daha yanlış görünüyor.

  • Oldukça iyi görünüyor, ama camın kırıcılığı eksik olduğunda Liquid Glass’ın en büyük katkısı olduğunu düşündüğüm güçlü katman ayrımı hissi kayboluyor.
    Material’da, bir uygulamanın tutarlı şekilde hareket eden katmanlardan oluşması gerektiğini yandan 3D olarak gösteren harika tasarımcı materyalleri var. Ama bunu 2D’ye birleştirince hangi işlevin nerede olduğunu bulmak çok zorlaşıyor. İnsanların köşedeki aksiyon düğmelerini gerçekten çok sık fark etmediği oluyor.
    Hareket, chrome ile içeriği ayırt etmeye biraz yardımcı oluyor, ancak bunu görsel olarak tanımlayan unsur çok az. Liquid Glass’ın en büyük avantajının kenar bozulması olduğunu düşünüyorum. İçerik hareket ettiğinde doğrusal olmayan bir hareket oluşuyor ve insan gözü bunu anında yakalıyor.
    Statik ekran görüntüleri her zaman iyi görünmüyor, ama hareket halindeyken öğeleri ayırt etme konusunda şimdiye kadar gördüklerimden çok daha iyi. İnsanların hareket algısından büyük ölçüde yararlanan temel kırılma öğesi burada eksik.
    Daha önce harika bir web demosu daha görmüştüm ama şimdi bulmak zor; onun yerine bu demo mobilde kötü performans gösteriyor ve görsel olarak da daha zayıf, fakat işin ne kadar karmaşık olduğunu adım adım iyi gösteriyor. Yalnızca SVG filtreleriyle kenar bozulması uygulamak epey zorlu bir yol: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
    Liquid Glass denemeleri derlemesini de (CodePen Spark) buldum; ikinci bağlantının, çok belirli şekilde önceden tanımlanmış sabit kodlu SVG ile oldukça iyi yapılmış bir örnek olduğunu düşünüyorum: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Apple’ın Liquid Glass ile akıllıca bir hendek oluşturduğunu düşünüyorum. Daha kötü sürümler kolayca yapılabilir, ama gerçekten doğru şekilde yapılması çok zor bir efekt seçmiş oldular.
      İnsanlar her gün gerçek cam gördüğü için neyin gerçekçi ve doğru olduğuna dair sezgileri var. Bu yüzden taklitler açıkça daha kötü görünüyor ve Apple “premium görünen” ürün imajını koruyabiliyor.
    • Liquid Glass’ın kenar bozulmasının havalı göründüğüne katılıyorum ve ileride kendim yeniden üretmeyi düşünüyorum.
      Mevcut projede hedef, cilalı hissettiren, tarayıcılar arasında tutarlı çalışan ve gerçek 3D kullanmayan bir malzeme oluşturmaktı. Sabit bir arka plan üzerinde hareket ederken efektin daha iyi göründüğü de doğru. Üzerinde çalıştığım kütüphane demo sitesinde bunu yapıyorum, ama henüz hazır değil.
    • Kırılma efektinin eksik olması bence iyi. Buzlu camı bile zaten muğlak buluyorum; kırılma efektinden ise gerçekten hoşlanmıyorum. Fazla dikkat dağıtıcı ve bazı durumlarda her zaman çirkin görünmek zorunda.
      Gerçek camın böyle davrandığını biliyorum ama bununla uğraşmak istemiyorum. Skeuomorphism’in en kötü kısımlarını seçip iki katına çıkarmışlar gibi; iOS 7 öncesini daha çok seven biri olarak bile böyle hissediyorum.

  • Güzel bir efekt, ama bana gerçek cam gibi gelmiyor.
    En hızlı fark edilen ayrım, ışığın bevel ile etkileşime girmemesi. Işığın camın içine yeniden girip aydınlatmayı ve rengi de etkilemesini beklerdim. Sadece bulanıklık eklemek yeterli değil.
    Ayrıca camın kendi gölgesi ve ilginç caustic desenleri olabilir. Burada gölge görünüyor, ama basit bir drop shadow gibi hissettiriyor; yeni akışın parçası olan 3D fiziksel bir nesneden çok düz bir kart gibi görünüyor.
    Her hâlükârda bunu yalnızca CSS ile taklit etmek kolay değil; GPU’da çalışan bir shader daha uygun görünüyor.

    • CSS ile olmuyorsa ne yapılması gerektiğini bilmiyorum. Sıradan bir dive GPU shader efektini nasıl uygulayabiliriz? GPU efektlerini temel HTML’ye uygulayamayıp bunu rastgele Canvas bileşimleri gibi özel öğeler üzerinde yapmak gerekiyorsa, GPU efektlerini uygulayabilen tamamen yeni bir rendering engine’i baştan yapmak daha iyi olabilir.
      HTML’nin öldüğünü düşünüyorum. Metin iletmek için birkaç tag yeterli; geri kalanların çoğu web sayfalarını reklam bombardımanına çevirmek için kullanılıyor. O yüzden bir <text> tag’i ve daha iyi GPU entegrasyonuyla yeniden başlamak, geri kalanları çıkarmak daha iyi olurdu.

  • Sayfadaki öğeleri gerçekten kıran bir JavaScript sürümü yaptım: https://real-glass.vercel.app/

    • Safari’de buzlu efekt çalışmıyor

  • Şunları topluyorum: https://github.com/swyxio/spark-joy
    Diğer kaynaklar arasında glassmorphism tasarım spesifikasyonuna dayalı ücretsiz CSS oluşturucu https://ui.glass/generator/, buzlu cam sabit başlık https://www.joshwcomeau.com/css/backdrop-filter/, glassy glassmorphism codepen ve in context var

    .blur-and-rotate {  
border-radius: 20px;  
backdrop-filter: blur(20px) hue-rotate(120deg);  
-webkit-backdrop-filter: hue-rotate(120deg);  
}

  • Gerçekten çok iyi yapılmış. Bilgisayar grafiklerinin “tek bir garip hile”den ziyade üst üste bindirilmiş 5 numaraya yakın olması beni hep şaşırtıyor
    Tarayıcılar arası uyumluluğu da tutturmak ayrı bir zorluk. En çok hangi kısmın kaynak tükettiğine dair bir fikrin var mı merak ediyorum. Basitçe düşününce backdrop-filter gibi geliyor

    • Evet, uygulama için bu kadar çok hile gerekeceğini bilmiyordum
      Sezgin doğru; en çok kaynak tüketen kısım backdrop-filter içindeki bulanıklaştırma. Bulanıklık değeri büyüdükçe, render öncesinde daha fazla komşu piksele “başvurmak” gerekiyor
      Bir diğer maliyetli unsur da kaydırma sırasında veya video arka planı camın görünümünü değiştirdiğinde sürekli yeniden çizim yapılması gerekmesi
    • Bazen bir şeyi “ortalamak” için bile 5 katmanlı hile gerekebiliyor

  • Benim cam uygulamamla benzer teknikler kullanıyor gibi: https://news.ycombinator.com/item?id=42225481
    Özellikle box-shadow’u aşırı kullanma kısmı benzer

    • Proje harika görünüyor. Gölgelere 5 katmandan fazla dalan tek kişinin ben olmaması sevindirici. Özellikle Light Rays eklemesi etkileyici

  • Küçük bir sorun: Üst bölüm ile toggle/kodun bulunduğu kaydırılabilir alan arasındaki gölge, aşağı kaydırınca kayboluyor. Muhtemelen başlangıçta gizli olup sonra görünmesi gerekiyor

    • İyi yakalamışsın. Bu bir fade-in sorunu değil; gölge düpedüz ekran dışına kayıp gidiyor
      O “taşan” box-shadow’lar bir öğeden aşağı doğru düşecek şekilde değil, öğenin içinde uygulanacak şekilde tasarlanmıştı; bu durumda ikinci tür gölgeyi uygulamam gerektiğini fark ettim

  • Telefonumda içerik kaydırması epey yavaş. Bilerek yavaşlatan başka bir kaydırma efekti mi var, yoksa cam efektinin yan etkisi mi merak ediyorum

    • İlginç ama sayfanın hiçbir yerinde kaydırma efekti yok. Kullandığın cihazı, tarayıcıyı ve internet bağlantı seviyeni söyleyebilir misin merak ediyorum
    • M4 ve 128GB RAM’de iyi çalışıyor

  • Ben kaçırmış olabilirim ama mobilde kutuyu gizleyebilmek ya da daraltabilmek çok daha kullanışlı olur gibi
    Şu anda tüm ekranı kaplıyor ve arkadaki efekti neredeyse hiç göremiyorsun. Yine de ilgimi çekti; daha sonra daha büyük bir ekranda tekrar denemeyi düşünüyorum ama kutuyu gizleme seçeneği olsa çok daha iyi olurdu

    • Kod önizleme alanından mı bahsediyorsun merak ettim
      İlk uygulamada oluşturucu arayüzünün üstüne küçük bir demo dikdörtgeni koymuştum, ama o küçük şey bile fazla yer kaplayıp arayüzü kullanmayı zorlaştırdı. Tüm sayfayı kaydırılabilir yapınca, düzenlenen dikdörtgeni görmek için en üste kaydırmak gerektiği açık olmadığı için insanlar frustrasyon yaşadı
      Bu araç esas olarak kodlama için olduğundan masaüstü deneyimine öncelik veriyorum; mobil tarafı ise daha çok hızlı önizleme ve mobilde de çalıştığını gösterme amaçlı. Yine de mobilde gerçekten iyi çalışan benzer bir arayüz biliyorsan bağlantısını görmek isterim