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

Merhaba, bugün sizlerle beraber CSS kullanarak iki yada daha çok öğenin birbirine yapışık benzer biçimde davranmasını sağlayacağız. Bu teknik ile ilgili internette daha çok araştırma yapmak isterseniz aramanız ihtiyaç duyulan anahtar kelimeler Gooey, Sticky yada Liquid.

ÖRNEĞİ GÖRÜNTÜLE

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

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

Sadece bir ekip sınırlandırmalar var. Mesela bir kapsayıcı eleman kullanmak zorunda olduğumuz için saydam zeminlerde çalışmamakta. Ek olarak siyah ve beyazın haricinde herhangi bir renkte yapmak birazcık çetrefilli.

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

HTML Kodları

İlk olarak bir tane kapsayıcı unsur ve iki tane 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;

Oldukça rahat 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 ilkin

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 oldukça büyük bir sorun ise aynı işlemi SVG ile de yapabileceğinizi ihmal etmeyin. Bu mevzuya hemen sonra değineceğiz.

Üstte hazırlamış olduğumuz örnek tasarımı görüntülemek için burayı tıklayabilirsiniz.

İyi emekler.