Input Alan Animasyonu – Transform & Translate

Front-end tasarımlarınıza renk katmak istediğinizde CSS olmazsa olmaz kaynaklarımızdan biri haline geliyor. Kullanılan tasarımlara göre farklı renkler ve standartlar benimsenmiş olsa da her zaman CSS ile daha fazlasına ulaşabilirsiniz. CSS farklı kütüphaneleri ile sizlere birçok işlemi hızlıca yapabilme şansı veriyor. Fakat daha fazla detaylandırmak için CSS kendi dinamiklerinden hayal gücünüzü birleştirmeniz gerek. Input alan animasyonu için detaylara başlamadan önce tasarımlarınızda kullanılabilecek css kütüphanelerini inceleyebilirsiniz.

CSS Kütüphane ve eklerinden bazıları aşağıdaki gibidir;

• Bootstrap
• Tailwind CSS
• Materialize
• Animate.css

Birçok framework ve teknoloji mevcut ben sadece en popüler olduklarını düşündüklerimi burada listelemek istedim. Tüm frameworkler sizlere işlerinizi yaparken daha pratik yoldan çözümler oluşturmak için her geçen gün gelişmeye devam etmektedir. Fakat bazı istediğiniz ufak dokunuşları eski dostumuz CSS kullanarak gerçekleştirmemiz gerekebiliyor. Sonuçta her şey için sorunlarımıza kütüphaneler yetişemiyor.

Input Alan Animasyonu

Inputlarınız için aktif bir animasyon css ile ekleyebiliriz. Bu sayede formalarımızı daha renkli ve güzel gösterebilir ve zenginleştiririz. Burada sizlere yapıyı anlatmaya çalışırken oluşturmuş olduğum bir html ekranı üzerinden CSS kodlarının eklemesini yapacağım. Siz kendi web sitelerinize ve yapılarınıza bu sistemi uygulamak istediğinizde yapıyı yorumlayarak kendi kodlarınızda ilgili yerlere entegre ederek ve size göre değerleri vererek değişiklik gerçekleştirebilirsiniz.

<div class="input-group">
    <label for="name">Ad Soyad</label>
    <input type="text" id="name">
</div>

Oluşturduğumuz bu yapıda en dış divimizde inputlarımızı tutmak için oluşturduğumuz açık ve net. Burada label kullanımı ile inputumuzu entegre ediyoruz. Bu tanımlamayı <label for=”input idsi”>İçerik</label> olarak belirtiyoruz. En üst div aracılığı ile de içeride bulunan input ve labellerımızı rahatlıkla yakalayabiliriz.

CSS olarak düzenlememizi eklemek istediğimizde de aşağıda bulunan kod bloğu bizlere yardımcı olacaktır.

.input-group{
    position: relative;
   
}
label{
    position: absolute;
    top:0;
    left:0;
    transform: translate(10px,10px);
    transform-origin: left;
    transition: transform .25s;
}
#name{
    padding:10px;
    border:none;
    border-radius: 4px;
    font:inherit;
    color:rgb(0, 0, 0);
    background-color: transparent;
    outline:2px solid white;
}

.input-group:focus-within label{

    transform: translate(0,-30px) scale(.8);
    color:black;
}
.input-group:focus-within #name{

    outline-color:red;
}

Genel divimize relative özelliğini veriyoruz. Relative özelliği divin bulunduğu konuma göre şekil almasını hareket etmesini sağlar. İçerisinde absolute kullandığımız vakit ilgili absolute olan alan relative dive göre hareket edecektir. Diğer alanlar için gördüğünüz düzenlemeler renk, çerçeve ve background gibi alanlar tamamen sizin tasarımınıza göre şekillendirebileceğiniz alanlar.

Burada bir seçici olan ” : ” kullanarak focus-within özelliğine göre işlem uygulanmaktadır. ” .input-group:focus-within label ” dediğimiz noktada focuslanıldığı noktada labelin yapacağı hareketi tanımlıyoruz. translate kodu ile ilgili yönlendirmeyi gerçekleştiriyoruz. Hareketin gerçekleşmesini sağladığımız alan focus-within label alanıdır. Bu alanda hayal gücünüze göre farklı denemelerde gerçekleştirebilirsiniz.

Label içerisinde verdiğimiz değerler labelin hareketten önce duracağı yeri ayarlamamız için belirtilen kısımdır.

Bu tarz CSS dokunuşlarını hayal gücünüzü kullanarak farklı noktalara taşıyabilirsiniz. Wordpress SEO konusunda detaylı bilgi almak isterseniz ilgili yazımı okuyabilirsiniz.