Serimizin en estetik ve modern dersine geldik. Tasarımları standart bir blog görünümünden çıkarıp, premium bir teknoloji/tasarım sitesi havasına sokacak harika bir efekt öğreneceğiz.
5. Dersimizde, son yılların en popüler tasarım trendlerinden biri olan Glassmorphism (Cam Efekti) mantığını inceleyecek ve özellikle yazılım/tasarım bloglarında çok ihtiyaç duyulan, arka planı buzlu cam gibi gösteren modern bir Kod Kutusu (Code Box) bileşeni tasarlayacağız.
📚 5. Ders: Glassmorphism (Cam Efekti) ve Premium Kod Kutusu Tasarımı
Glassmorphism, sanki ekranın üzerinde yarı saydam, arkasını hafifçe bulanıklaştıran pürüzsüz bir cam katmanı varmış hissi uyandıran bir tasarım dilidir. Bu efekti yakalamak için CSS'in en güçlü görsel silahlarından biri olan backdrop-filter özelliğini kullanacağız.
1. Cam Efektinin 4 Altın Kuralı
Kusursuz bir cam efekti oluşturmak için sadece arka planı şeffaf yapmak yetmez. Şu 4 CSS kuralını bir arada kullanmalıyız:
Yarı Saydam Arka Plan:
rgba()kullanarak rengin opaklığını (alfa değerini) düşürürüz. (Örn:rgba(255, 255, 255, 0.4))Buzlu Cam Arkalığı (
backdrop-filter): Kutunun arkasında kalan elementleri bulanıklaştırır. (Örn:backdrop-filter: blur(10px);)İnce Parlak Kenarlık: Caminin sınırlarını belli etmek için çok ince, yarı saydam beyaz bir çizgi çekeriz.
Yumuşak Gölge (
box-shadow): Kutunun derinlik kazanıp havada duruyormuş gibi görünmesini sağlar.
2. Pratik Uygulama: Blogger İçin Glassmorphic Kod Kutusu
Blog yazılarınızda paylaştığınız kodların (HTML, CSS, JavaScript) şık, okunaklı ve modern görünmesi için tamamen saf CSS ile bu efekti uygulayalım.
CSS Kodlarımız:
/* Kod Kutusunun Ana Kapsayıcısı */
.glass-code-box {
background: rgba(255, 255, 255, 0.06); /* Çok hafif şeffaf beyaz arkalık */
backdrop-filter: blur(12px); /* Arkadaki içeriği bulanıklaştıran sihirli dokunuş */
-webkit-backdrop-filter: blur(12px); /* Safari tarayıcı desteği */
border: 1px solid rgba(255, 255, 255, 0.12); /* Caminin parlayan kenarlığı */
border-radius: 12px;
padding: 20px;
margin: 20px 0;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); /* Derinlik hissi veren gölge */
position: relative;
overflow: hidden;
}
/* Kod Kutusunun Üst Barı (Mac Tarzı Kapat/Simge Durumu Butonları) */
.glass-code-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
margin-bottom: 15px;
}
/* Sol üstteki 3 renkli buton simülasyonu (Saf CSS) */
.glass-code-dots {
display: flex;
gap: 6px;
}
.glass-code-dots::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff5f56; /* Kırmızı buton */
box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f; /* Sarı ve Yeşil butonlar */
}
/* Sağ üstteki Dil Etiketi */
.glass-code-lang {
font-family: 'Courier New', Courier, monospace;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Kodların Yazıldığı Alan */
.glass-code-box pre {
margin: 0;
padding: 0;
overflow-x: auto; /* Kodlar uzarsa yatay kaydırma çubuğu çıksın */
}
.glass-code-box code {
font-family: 'Fira Code', 'Courier New', Courier, monospace;
font-size: 14px;
color: #f8f8f2; /* Okunabilir açık gri/beyaz tonu */
line-height: 1.6;
display: block;
}
💡 Tasarım İpucu: Glassmorphism efektinin kendini tam anlamıyla gösterebilmesi için, blogunuzun genel arka planında (veya bu kutunun arkasında) renkli, geçişli (gradient) veya hareketli bir görselin olması gerekir. Bembeyaz bir arka planda blur (bulanıklık) etkisi fark edilmeyecektir.
🛠️ Ders Sonu Ödevi
Blogger'da yeni bir yazı yazarken veya test makalende HTML Görünümüne geç ve paylaşmak istediğin bir kod bloğunu şu şekilde sarmalla:
<div class='glass-code-box'>
<div class='glass-code-header'>
<div class='glass-code-dots'></div>
<div class='glass-code-lang'>CSS</div>
</div>
<pre><code>.blogger-arsivim {
display: flex;
background: var(--main-color);
}</code></pre>
</div>
Ardından CSS kodlarını ekle ve yazının arkasındaki renklerin, kod kutusunun arkasından nasıl buzlu bir cam gibi süzüldüğünü izle! glassmorphism,ders,css
Hiç yorum yok:
Yorum Gönder