Giriş
Modern web tasarımında "organic blobs" veya "egg shapes" olarak bilinen bu formlar, tasarımı katı geometrik yapılardan uzaklaştırıp daha insancıl ve dinamik bir havaya sokar. HYZSOFT projelerinde bu yapıyı özellikle "Proje Süreci" adımlarını vurgulamak için kullanıyoruz.
Nasıl Yapılır? (Teknik Altyapı)
Bu şekillerin temeli CSS3 border-radius özelliğinin az kullanılan "sekiz değerli" syntax yapısına dayanır. Klasik 4 değer yerine, eğik çizgiyle (/) ayrılan 8 değer kullanılarak yatay ve dikey yarıçaplar birbirinden bağımsız kontrol edilir.
/* Temel Syntax */
border-radius: [sol-üst-y] [sağ-üst-y] [sağ-alt-y] [sol-alt-y] / [sol-üst-d] [sağ-üst-d] [sağ-alt-d] [sol-alt-d];
Gerçek Bir Örnek:
.process-v2-blob {
width: 200px;
height: 200px;
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
background: #fff;
}
İpucu: Bu değerleri elle yazmak yerine
Fancy Border Radius Generator gibi araçlar kullanarak istediğiniz şekli sürükle-bırak yöntemiyle oluşturabilirsiniz.
Çeşitler ve Alternatifler
Sadece düz bir şekil değil, farklı efektlerle bu tasarımı zenginleştirebiliriz:
CANLI
Morphing (Keyframes)
1. Animasyonlu Bloblar (Morphing)
Şeklin sürekli yer değiştirmesi için @keyframes kullanarak birden fazla border-radius değeri arasında geçiş yapabiliriz.
@keyframes blobAnimation {
0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
50% { border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%; }
}
.blob { animation: blobAnimation 10s ease-in-out infinite; }
2. Glassmorphism Etkisi
Blobu bir arka planın üzerine koyarken modern bir görünüm için backdrop-filter kullanın.
.glass-blob {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
Boyut Varyasyonları
Hiyerarşiyi sağlamak için blobları farklı boyutlarda kullanabilirsiniz:
.blob-lg { width: 220px; height: 220px; }
.blob-md { width: 150px; height: 150px; }
.blob-sm { width: 80px; height: 80px; }
Kesik Çizgili (Process) Yapılar
"Proje Süreci" gibi bölümlerde, blobları birbirine bağlamak için SVG kesik çizgiler kullanılır.
<!-- Arka planda duran SVG -->
<svg class="dashed-line-svg" viewBox="0 0 1000 100">
<path d="M0,50 Q250,0 500,50 T1000,50"
stroke="#0085FE" stroke-dasharray="10,10" />
</svg>
Açıklamalı Blob (Neden Biz?)
"Neden Bizimle Yelken Açmalısınız?" tarzında, blobun altına başlık ve açıklama eklenen yapı.
Güvenli Altyapı
Projelerimizde her zaman en yüksek güvenlik standartlarını ve modern mimariyi kullanıyoruz.
<div class="blob-with-text">
<div class="blob-base blob-md blob-3">
<i class="fas fa-shield-alt"></i>
<h4>Başlık Bilgisi</h4>
</div>
<p>Açıklama metni yumurtanın altında kalabilir.</p>
</div>
Gerçek Uygulama (HYZSOFT Örneği)
Aşağıda, Proje Süreci bölümünde kullandığımız yapının birebir kodları yer almaktadır:
HTML Yapısı
<div class="process-v2-item">
<div class="process-v2-blob">
<span class="process-v2-number">01</span>
<div class="process-v2-icon">
<i class="fas fa-mouse-pointer"></i>
</div>
<h5 class="process-v2-title">Ücretsiz Keşif</h5>
</div>
</div>
CSS Yapısı
.process-v2-blob {
width: 200px;
height: 200px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* Yumurta Şekli */
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.process-v2-item:hover .process-v2-blob {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 20px 60px rgba(0, 133, 254, 0.12);
}
Sitemizdeki Kullanım Alanları
HYZSOFT projesinde bu tasarım şu bölümlerde aktif olarak kullanılmaktadır:
- Proje Süreci (Process V2): Adım numaralarının ve ikonların arkasındaki fon olarak.
- Neden Bizimle Yelken Açmalısınız?: Vurgulanması gereken başlık ikonlarının fonu olarak.
- Teknoloji Yetkinliklerimiz: Logo ve ikonların etrafında yumuşak geçişli alanlar oluşturmak için.