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ş
  • CSS kodu ile yüksek çözünürlüklü cam (glass) efektinin nasıl uygulanacağını sunuyor
  • blur, parlaklık (brightness), doygunluk (saturate) gibi görsel filtreler ve çok katmanlı gölgeler uygular
  • pseudo-element kullanarak ön ve arka yüz için katman efektleri ile doku (texture) işlemesini hayata geçirir
  • Yalnızca tek ve sade bir CSS sınıfıyla çeşitli UI'lara uygulanabilir ve özelleştirilebilir
  • Yüksek çözünürlüklü cam efektini web projelerine hızlı ve modern biçimde dahil etmek için elverişlidir

Giriş

Bu CSS kodu, web UI'da yüksek çözünürlüklü cam (glass) efekti oluşturmak için özelleştirilmiş bir yapılandırmadır. Mevcut glassmorphism efektlerine göre daha ince ayarlı ve daha derinlikli bir görünüm sunar; CSS'te tek bir sınıf uygulanarak sonuç doğrudan görülebilir.

Başlıca içerik

  • .glass3d sınıfında blur (32px), parlaklık (0.85), doygunluk (2.5) gibi çeşitli görsel filtre efektleri ile renk ve gürültü dokusu eklenir
  • Birden çok aşamalı box-shadow yapısıyla gerçekçi, üç boyutlu bir cam hissi oluşturulur
  • ::before pseudo-element içinde backdrop-filter, renkler ve gürültü arka plan görseli üst üste bindirilerek arka plan saydamlığı ve üç boyutlu doku hissi verilir
  • ::after pseudo-element içinde iç (inset) gölge eklenerek gerçek cam yüzeyinde ışık yansıyormuş etkisi sağlanır
  • z-index ayrımıyla katmanların birbirinin efektleriyle çakışmadan düzgün görüntülenmesi için yapılandırılmıştır
  • .glass3d > * seçicisiyle alt öğelerin içerik kısmı her zaman en üstte görünecek şekilde ayarlanır

Kullanım bağlamı ve avantajlar

  • Kütüphane ya da harici bağımlılık olmadan yalnızca tek bir CSS sınıfı ile modern ve trend bir cam efektli UI oluşturulabilir
  • UI tasarım sistemleri, kartlar, açılır pencereler ve butonlara kolayca uygulanıp genişletilebildiği için web frontend geliştiricileri açısından oldukça kullanışlıdır
  • Gerçek desen görselleriyle oluşturulan doku, farklı renk kombinasyonları ve çok aşamalı gölge efektleri sayesinde mevcut glassmorphism tekniklerine kıyasla derinlik ve ışık-gölge ifadesinde güçlüdür

İlgili okumalar

1 yorum

 
GN⁺ 2025-07-04
Hacker News yorumu

  • JavaScript ile sayfadaki öğelere gerçek kırılma efekti uygulayan bir sürüm yapılmış, bakmanızı öneririm: https://real-glass.vercel.app/

  • Bu efektin, yalnızca yüzeyin hemen arkasındaki pikselleri bulanıklaştırma gibi bir sınırı var; bu durumu iyi açıklayan Josh Comeau yazısına (https://www.joshwcomeau.com/css/backdrop-filter/#the-issue) ve Hacker News tartışmasına (https://news.ycombinator.com/item?id=42302907) bakmanızı öneririm. Arka plan hareketliyse bu epey önemli bir mesele, ama sabitse genelde çok önemli olmuyor.

    • Josh'un harika yazısını okuyup öğreticiyi izleyerek uygulamaya çalıştım, ama SVG maskesiyle border-radius uygularken sorun yaşadım. Sabit kodlanmış öğelerde iyi çalıştı, ancak marka/container query'lerine göre border-radius'ı değişen tüm bir bileşen kütüphanesinde kullanmak için hâlâ bir yöntem arıyorum.
    • Josh'un çözümü sezgisel olarak da biraz yanlış hissettiriyor; çevredeki öğelerin ışık yayan maddeler olduğunu varsayıyor ama bunun web'deki bir "material"ın temel fiziksel özelliği olduğunu düşünmüyorum. Ben varsayılan olarak material'ın kâğıda daha yakın olduğunu düşünüyorum.

  • Oldukça iyi yapılmış gibi görünüyor, ama camın kırılma efekti olmayınca Liquid Glass'ın güçlü katmanlı görsel ayrışma hissi kayboluyor. Material'ın tasarım kaynaklarına bakarsanız, uygulamanın tutarlı biçimde hareket eden 3D katmanlardan oluşması gerektiğini vurguluyor. Ama bunu pratikte 2D olarak uygulayıp tüm öğeleri birbirine karıştırınca, katmanları ayırt etmek çok zorlaşıyor; insanlar köşelerdeki aksiyon butonlarını sık sık bulamıyor. Hareket, chrome ile içeriği ayırmaya yardımcı oluyor ama görsel olarak pek öne çıkmıyor. Bence Liquid Glass'ın en büyük avantajı edge distortion. İçerik hareket ettiğinde insan görmesinin anında yakaladığı doğrusal olmayan bir hareket üretiyor ve hareket varken katman ayrımı daha belirgin oluyor. Buradaki önemli kırılma bileşeni eksik. SVG filtreleriyle edge distortion yapmak kolay değil ve sonuçta oldukça karmaşık bir iş. Karmaşıklığı görmek için https://atlaspuplabs.com/blog/liquid-glass-but-in-css/… adresindeki adım adım açıklamaya bakabilirsiniz. Ayrıca Liquid Glass için çeşitli uygulama denemelerini toplayan bir CodePen Spark koleksiyonu da buldum; sabit kodlanmış SVG ile fena olmayan bir referans da öneririm: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Apple'ın Liquid Glass ile akıllı bir giriş bariyeri yarattığını düşünüyorum. Herkes kolayca ucuz bir sürüm yapabilir ama onu gerçekten gerçek gibi gösterecek şekilde düzgün yapmak çok zor. Gerçek camı her gün gördüğümüz için "gerçek ve sahte"yi sezgisel olarak ayırt edebiliyoruz. Bu yüzden taklit ürünler kendini belli ediyor ve Apple da "premium hissi"ni koruyabiliyor.
    • Liquid Glass'ın edge distortion'ını gerçekten çok etkileyici buluyorum; bir gün mutlaka yeniden yapmayı planlıyorum. Şu an üzerinde çalıştığım proje, ayrıntıları ince ince düzeltmeye, tarayıcı uyumluluğunu gözetmeye ve gerçek 3D kullanmadan malzeme benzeri bir uygulama üretmeye odaklanıyor. Ayrıca katmanlar sabit bir arka plan üzerinde hareket ettiğinde etkinin daha belirgin olduğuna katılıyorum. Şu anda geliştirdiğim demo sitede bu tür efektler var, ama henüz tamamlanmış değil. Güzel kaynaklar paylaştığınız için teşekkürler.
    • Camın kırılma efektinin katmanlı görsel ayrışma sağladığı görüşüne katılıyorum. Ama bana göre kırılma efekti fazla dikkat dağıtıyor ve bazı ortamlarda iyi görünmüyor. Bu gerçek camın fiziksel bir özelliği olsa da mutlaka gerekli değil. Sanki skeuomorphism'de en sevmediğim öğe büyütülüp her yere uygulanmış gibi geliyor. Bu arada ben iOS 7 öncesi tasarımı daha çok seviyordum.

  • Efektin kendisi güzel ama bana pek cam hissi vermiyor. Hemen fark edilen şey, ışığın bevel'e hiç tepki vermemesi. Ayrıca ışığın camdan yansıyarak aydınlatmayı/rengi etkilemesini de beklersiniz; bunu yalnızca blur efektiyle yapmak zor. Cam aynı zamanda kendine özgü gölgeler de üretebilir, özellikle de caustics, ama Apple bile bu kısma pek odaklanmamış gibi görünüyor. Şu anki gölgeler basit bir drop shadow gibi duruyor, bu da 3D bir nesneden çok düz bir kart hissini güçlendiriyor. Bu, son trendin özünden sapıyor. Böyle bir şeyi yalnızca CSS ile yapmak zor; bunu GPU'da shader olarak çalıştırmak daha uygun olabilir.

    • CSS ile yapılamıyorsa alternatifin ne olduğunu merak ediyorum. GPU shader efektlerini sıradan bir div'e uygulamak mümkün mü ondan da emin değilim. Temel HTML'e doğrudan GPU efektleri ekleyemiyorsak, o zaman özel bir canvas benzeri yapıyla baştan yeni bir render motoru yazmak daha mantıklı olabilir. Zaten HTML artık anlamını kaybetti, <p> etiketiyle metni verip geri kalan her şeyi reklama çevirdik; belki de yalnızca <p>'yi bırakıp GPU entegrasyonu daha iyi olan tamamen yeni bir başlangıç gerekiyor.

  • Bu tür tasarım örneklerini topluyorum: https://github.com/swyxio/spark-joy
    Bununla ilgili birkaç kaynak daha önereyim:

    • https://ui.glass/generator/ : glassmorphism tarzı için ücretsiz CSS üreticisi
    • frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/
    • glassmorphism pen örnekleri codepen, bağlam içinde
    • blur+rotation efektine dair bir CSS örneği 
      .blur-and-rotate {
 border-radius: 20px;
 backdrop-filter: blur(20px) hue-rotate(120deg);
 -webkit-backdrop-filter: hue-rotate(120deg);
}
    • Bu projeyi spark-joy listesine eklediğiniz için teşekkür eden bir not
    • Spark Joy'ın çok havalı bir kaynak olduğunu düşünüyorum
    • Bir ASCII Font generator buldum ama spark-joy'da görünmüyor; bunun yerine sık kullandığım bir aracı önereyim: https://patorjk.com/software/taag/…

  • Mobilde kutuları gizleme ya da daraltma seçeneği olsaydı kullanılabilirlik çok daha iyi olurdu diye düşünüyorum. Kutular tüm ekranı kapladığı için arkadaki etki pek görünmüyor. Yine de ilginç geldi, büyük ekranda tekrar denemeyi düşünüyorum. Kutuları gizleme seçeneği çok yardımcı olurdu.

  • Benim glass uygulamama benzer bir teknik kullanılmış gibi görünüyor: https://news.ycombinator.com/item?id=42225481 Özellikle box shadow'u yoğun kullanan yaklaşım benziyor.

    • Projeniz gerçekten çok güzel. Gölge katmanlarını derinlik hissi verecek şekilde tekrar tekrar kullanan tek geliştirici ben değilmişim, buna sevindim. Light Rays ekleme fikri özellikle etkileyiciydi.

  • Web arka planı olarak etkili kullanılmış.

  • Benim telefonda kaydırma oldukça yavaş. Acaba bilerek eklenmiş başka bir yavaş kaydırma efekti mi var, yoksa glass efektinin bir yan etkisi mi merak ettim.

    • İlginç bir tespit. Sayfada herhangi bir kaydırma efekti yok. Mümkünse hangi cihazı, tarayıcıyı ve ağ koşullarını kullandığınızı paylaşabilir misiniz?
    • Bende M4, 128GB RAM olan cihazda sorunsuz çalışıyor.

  • Gerçekten çok iyi yapılmış. Bilgisayar grafiğinin "özel tek bir yöntem" değil de aslında "üst üste binmiş 5 kat hile" olması beni her seferinde şaşırtıyor. Tarayıcılar arası destek de büyük bir meydan okuma. En çok hangi kısmın kaynak tükettiğine dair bir fikriniz var mı? Tahminim backdrop-filter olabilir.

    • Ben de bu kadar çok hile gerekeceğini düşünmemiştim. En ağır kısım, backdrop-filter içindeki blur işlemi. Blur değeri yükseldikçe, render için çevredeki daha fazla piksel bilgisinin incelenmesi gerekiyor. Bir diğer kaynak tüketen bölüm de sayfa kaydırılırken ya da video arka plan değişirken glass görünümünün gerçek zamanlı olarak güncellenmesi.
    • Bazen sadece bir şeyi "ortalamak" için bile "5 kat hile" kullanmak gerekiyor.