Trend olan buzlu cam UI efektleri oluşturun. Bulanıklığı, şeffaflığı ve kenarlıkları ayarlayın, ardından CSS'i doğrudan projenize kopyalayın. %100 ücretsiz. Kayıt gerekmez.
Modern web tasarımı için popüler buzlu cam efekti.
Kesin gizlilik, anında işlem ve sıfır engelleme için sıfırdan tasarlandı. Abonelik, ödeme duvarı veya üyelik gerekmez.
Cam efektinizi anında önizlemek için canlı bir arka plan üzerinde bulanıklığı, opaklığı ve doygunluğu gerçek zamanlı ayarlayın.
Safari, Chrome ve Firefox uyumluluğunu sağlamak için webkit ön ekli backdrop-filter kodunu otomatik oluşturur.
Standart CSS sınıfları oluşturun veya görsel tasarımınızı anında Tailwind CSS yardımcı sınıflarına dönüştürün.
%100 istemci tarafı çalışma sayesinde kaydırıcıları sürükleyin ve matematiksel CSS güncellemelerini sıfır gecikmeyle görün.
Yerel WebAssembly motorumuzu eski bulut araçlarıyla karşılaştırın.
| Özellik | Utiliome (Yerel Tarayıcı) | Eski Bulut Dönüştürücüler |
|---|---|---|
| Canlı Önizleme | Gerçek zamanlı etkileşimli alan | Statik kod oluşturucular |
| Kod Çıktısı | Vanilla CSS & Tailwind Yardımcı Sınıfları | Yalnızca CSS |
| Uyumluluk | Otomatik -webkit-backdrop-filter ekler | Manuel ön ek gerektirir |
| Maliyet | Reklamsız ve Sonsuza Dek Ücretsiz | Premium düzenler için ödeme duvarı |
Yazılım kurulumu gerekmez. Her şey doğrudan web tarayıcınızın içinde çalışır.
Cam kartınızın arkasındaki arka plan öğelerinin ne kadar bulanıklaşacağını belirlemek için bulanıklık kaydırıcısını kullanın.
Camınıza hafif koyu bir ton veya parlak beyaz buzlu bir görünüm vermek için arka plan rengi alfa kanalını değiştirin.
Kullanıma hazır CSS kodunu doğrudan panonuza kopyalamak için dışa aktar düğmesine tıklayın.
Hızlı Cevap: Glassmorphism, yoğun arka plan bulanıklığına (buzlu cam) sahip yarı saydam arka planlar, ince çok katmanlı gölgeler ve ince kenarlıklarla karakterize edilen modern bir arayüz tasarım trendidir. Dikey derinlik ve hiyerarşi hissi yaratır.
Ağırlıklı olarak macOS Big Sur, iOS ve Windows 11 Fluent Design ile ortaya çıkan Glassmorphism, modern ve premium web uygulamaları için fiili standart haline gelmiştir.
Temel felsefe "Z eksenine" dayanır. Tasarımcılar, üst katmanı yarı saydam yapıp altındaki canlı katmanları yoğun bir şekilde bulanıklaştırarak, sert gölgelere ihtiyaç duymadan görsel hiyerarşi oluştururlar. Bu, kullanıcıya aktif pencerenin "arkasında" ne olduğu hakkında bağlam sağlar.
Hızlı Cevap: backdrop-filter CSS özelliği, bir öğenin hemen arkasındaki alana bulanıklaştırma veya renk kaydırma gibi grafik efektleri uygular. Öğenin kendisini bulanıklaştıran standart 'filter'ın aksine, backdrop-filter yalnızca öğenin saydam arka planından görünen kısmı etkiler.
Glassmorphism efektini elde etmek için geliştiriciler tamamen backdrop-filter CSS kuralına güvenirler. Bir öğeyi yarı saydam bir arka plan rengine (ör. background: rgba(255, 255, 255, 0.2);) ayarlayıp backdrop-filter: blur(10px); uyguladığınızda, tarayıcının oluşturma motoru hemen arkadaki pikselleri alır, matematiksel olarak bulanıklaştırır ve öğenizin içine çizer.
Bu işlem, kullanıcı sayfayı kaydırdıkça tarayıcının pikselleri sürekli yeniden hesaplamasını gerektirdiğinden donanım hızlandırmalı bir özelliktir. Utiliome oluşturucusu, bu donanım ölçümlerini anında hesaplayarak performans etkisini gerçek zamanlı önizlemenizi sağlar.
Hızlı Cevap: Tailwind CSS, cam efektleri için yerleşik yardımcılar sunar. Özel CSS yazmadan buzlu cam görünümünü anında oluşturmak için 'backdrop-blur-md', 'bg-white/30' ve ince bir 'border-white/20' kombinasyonunu kullanabilirsiniz.
Özel CSS yazmak öğrenmek için harika olsa da, modern geliştiriciler genellikle Tailwind gibi yardımcı odaklı çerçeveleri tercih eder.
Tailwind'de bir cam kart oluşturmak için üç temel katmana ihtiyacınız vardır:
backdrop-blur-md veya backdrop-blur-lg kullanın.bg-white/20 (açık tema) veya bg-slate-900/40 (koyu tema) kullanın.border border-white/20 kullanarak ince 1 piksellik bir kenarlıkla simüle edin.Utiliome oluşturucusu, standart CSS veya mükemmel biçimlendirilmiş bir Tailwind sınıf dizesi elde etmeniz için bir geçiş seçeneği sunar.
Hızlı Cevap: Safari, tarihsel olarak arka plan filtreleri için '-webkit-' ön ekini gerektirmiştir. Bu ön eki unutursanız, cam efektiniz iOS ve macOS cihazlarda tamamen başarısız olur ve düz saydam bir kutuya dönüşür.
Junior geliştiricilerin glassmorphism uygularken karşılaştığı en büyük tuzak Apple cihazlarını unutmaktır. Chrome ve Firefox standart backdrop-filter özelliğini yerel olarak desteklerken, Safari (özellikle eski iOS sürümleri) bu ön eki kesinlikle gerektirir.
Eğer -webkit-backdrop-filter: blur(10px); kodunu eklemezseniz, Apple kullanıcıları yalnızca saydam bir div görecek ve metniniz arka plan önünde tamamen okunmaz hale gelecektir.
Utiliome CSS oluşturucu, gerekli WebKit ön eklerini çıktınıza otomatik olarak ekleyerek tasarımınızın tüm işletim sistemlerinde aynı görünmesini sağlar.
Hızlı Cevap: Glassmorphism, bulanık ve canlı bir arka plan üzerine yerleştirilen metinlerin WCAG kontrast oranlarını karşılayamaması nedeniyle sıkça erişilebilirlik sorunlarına yol açar. Metin renginizin camın ortalama tonuna karşı yeterince koyu (veya açık) olduğundan emin olmalısınız.
Glassmorphism trendine yönelik en yaygın eleştiri zayıf erişilebilirliktir. Renkli bir arka plan görseli cam kartın arkasında koyu maviden parlak sarıya kayarsa, beyaz metin aniden tamamen görünmez hale gelebilir.
Bunu düzeltmek için güçlü bir arka plan tonu (opaklık) uygulamalısınız. Örneğin beyaz metin kullanıyorsanız, cam arka plan renginizin rgba(0, 0, 0, 0.6) gibi olduğundan emin olun. Bu, arkadan hangi canlı görsel geçerse geçsin metnin yasal olarak gerekli 4.5:1 minimum kontrast oranını korumasını sağlar.
Hızlı Cevap: Bir yüzeyde düz duran buzlu cam paneli cam gibi görünmez. Onu arka plan katmanından ayırmak için çok hafif, geniş bir gölge (ör. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) kullanarak yükseltmelisiniz.
İnsan beyni derinliği yorumlamak için ışık ipuçlarına ihtiyaç duyar. Sadece arka planı bulanıklaştırırsanız, UI 'düz' görünebilir.
Camın öne çıkmasını sağlamak için onu Z ekseninde yükseltmeniz gerekir. Utiliome oluşturucusu, hafif bir box-shadow ayarlamanıza olanak tanır. Gölge opaklığını oldukça düşük tutarak (%10 civarı) ancak bulanıklık yarıçapını yüksek tutarak (32px), camı altındaki canlı arka plandan güzelce ayıran yumuşak bir ortam gölgeleme efekti yaratırsınız.
Utiliome'un ücretsiz çevrimiçi Glassmorphism CSS Oluşturucu aracı hakkında bilmeniz gereken her şey.
Safari '-webkit-backdrop-filter' ön ekini gerektirir. Utiliome, tarayıcı uyumluluğu için bu ön eki CSS dışa aktarımında otomatik olarak oluşturur.
Evet. Utiliome oluşturucusu, tasarımınızı Tailwind yardımcı sınıflarına (ör. backdrop-blur-md bg-white/30) dönüştüren bir anahtar içerir.
Evet, büyük öğelerde aşırı yüksek bulanıklık kullanımı, kaydırma sırasında GPU'yu pikselleri sürekli hesaplamaya zorladığından düşük donanımlı mobil cihazlarda gecikmeye neden olabilir.
Gerçek cam kenarlarında ışığı yansıtır. Bu kenar yansımasını simüle etmek için çok düşük opaklığa sahip (rgba(255, 255, 255, 0.2) gibi) 1px düz bir kenarlık ekleyin.
Evet, hiçbir sınır, reklam veya hesap kaydı olmadan %100 ücretsizdir.
Bir özellik isteğiniz mi var veya hata mı buldunuz? Discord'da bizimle doğrudan sohbet edin.