Organik Yumurta (Blob) Tasarımı

Proje Süreci, Neden Biz ve Teknoloji bölümlerindeki akışkan şekillerin sırrı

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:

STATİK

Klasik Organik

CANLI

Morphing Animasyon

GLASS

Buzlu Cam

GRADYANT

Canlı Geçişli

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ı

Büyük (220px)

Orta (150px)

Küçük (80px)

.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.

1
2
3
<!-- 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>

Sitemizdeki Kullanım Alanları

HYZSOFT projesinde bu tasarım şu bölümlerde aktif olarak kullanılmaktadır:

Dokümantasyon Ana Sayfasına Dön