CSS ile Yapışkan ‘Goo’ Öğeler

Merhaba, bugün sizlerle birlikte CSS kullanarak iki veya daha fazla öğenin birbirine yapışık gibi davranmasını sağlayacağız. Bu teknik ile ilgili internette daha fazla araştırma yapmak isterseniz aramanız gereken anahtar kelimeler Gooey, Sticky veya Liquid.

ÖRNEĞİ GÖRÜNTÜLE

---

CSS ile birbirine geçen, yapışkan öğeler nasıl yapılır?

Temel teknik iki veya daha fazla nesneyi birlikte bulanıklaştırmak ve kontrastı arttırmaktır. Birkaç örnek ile devam edelim.

Ancak bir takım sınırlandırmalar var. Örneğin bir kapsayıcı eleman kullanmak zorunda olduğumuz için şeffaf zeminlerde çalışmamakta. Ayrıca siyah ve beyazın dışında herhangi bir renkte yapmak biraz çetrefilli.

Şimdi kendi örneğimizi hazırlayalım.

---

HTML Kodları

İlk olarak bir tane kapsayıcı öğe ve iki adet daire oluşturalım.

<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
</div>

CSS Kodları

Şimdi .wrapper öğesine blur ve ya contrast filtreleri ekleyeceğiz. Bu efektler iki obje arasındaki geçişleri görünür kılacak.

.wrapper {
background-color: white;
display: block;
text-align: center;
filter: blur(5px) contrast(50);
padding: 20px;
}

Sıradaki ilk işlemimiz: .circle elemanlarını yuvarlak hale getirmek, birazdan hazırlayacağımız animasyonu eklemek ve beyaz koyu tonda bir arkaplan rengi atamak.

.wrapper .circle {
display: inline-table;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #212121;
animation: gooey 2s infinite ease;
}

Çok basit bir animasyon hazırlayalım. Sağ ve soldan margin vererek iki öğeyi birbirine yakınlaştırıp uzaklaştıran döngü bir hareket hazırlayalım.

@keyframes gooey {
0% {
margin: 0 10px;
}
50% {
margin: 0 -10px;
}
100% {
margin: 0 10px;
}
}

---

Bitirmeden önce

Bu tekniği kullanarak web sayfalarınız ve mobil uygulamalarınız için ilgi çekici animasyonlar ve tasarımlar oluşturabilirsiniz. Renk ve saydamlık sizin için çok büyük bir problem ise aynı işlemi SVG ile de yapabileceğinizi unutmayın. Bu konuya daha sonra değineceğiz.

Üstte hazırladığımız örnek tasarımı görüntülemek için burayı tıklayabilirsiniz.

İyi çalışmalar.