Sitenize Modern 'Cam Efekti' (Glassmorphism) Ekleyerek Tasarımı Şahlandırın 🎨

Web tasarım trendleri sürekli değişiyor, ancak son dönemde Apple'ın macOS arayüzünde de bolca kullandığı Glassmorphism (Cam Efekti) popülerliğini hiç yitirmedi. Yarı saydam bir arka plan, hafif bir bulanıklık ve incecik kenarlıklarla elementlerinize inanılmaz premium bir hava katabilirsiniz.

Bunu yapmak için karmaşık kütüphanelere ihtiyacınız yok. Sadece birkaç satır saf CSS ile harikalar yaratabiliriz!

Sihirli CSS Kodu

Bir div elementine .glass-kart class'ını verdiğinizi varsayalım. İşte o div'i buzul bir cama dönüştürecek o jilet CSS kodu:

.glass-kart {
   /* Arka planı yarı saydam beyaz yapıyoruz */
   background: rgba(255, 255, 255, 0.1);
   
   /* Arka planı bulanıklaştırıyoruz (İşin sırrı burada) */
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   
   /* İnce, zarif bir cam kenarlığı ekliyoruz */
   border: 1px solid rgba(255, 255, 255, 0.2);
   
   /* Köşeleri yumuşatıp gölge veriyoruz */
   border-radius: 20px;
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
   
   /* İç boşluk */
   padding: 30px;
}

Bu tasarımı özellikle admin panellerinde, giriş formlarında veya kullanıcı profili kartlarında kullandığınızda, sitenizin kalitesi ziyaretçinin gözünde anında 10 katına çıkacaktır. Sadece arkasında renkli bir arka plan (veya degradeli şekiller) olduğundan emin olun ki cam efekti kendini belli etsin!