Shadow ve hover kodları ile ters animasyon

Button ve text-box'lara css üzerinde hover koduyla verdiğimiz gölgenin tersini uygulamaya çalıştık. Üzerlerine gelindiğinde gölge kodu çalışıyor, denediğimiz şey imleci üzerinden çektiğimizde yeni bir görünüm ve animasyonu nasıl sağlayabiliriz?

Merhaba Kaan,

Öncelikle Jotform Destek ile iletişime geçtiğiniz için teşekkür ederiz. Maalesef imleci butonun üzerinden çektiğinizde butona yeni bir görünüm sağlamak mümkün değil. Ancak CSS kodları ile hem imleç butonun üzerine geldiğinde hem de butonun üzerinden çıkarken bir animasyon devreye sokabilirsiniz. Bunun için animasyonları 'hover' etiketinin içerisine değil de direkt olarak elementin kendisine eklemelisiniz. Böylece hem imleç girişinde hem de çıkışında animasyon devreye girecektir.

Kullanmış olduğunuz kodlar içerisinde göstermiş olduğumuz gibi:

.form-submit-buttona:hover {

    border-color : #00008b;

    box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,

    0.19);

}





.form-submit-button:hover {

    color : white;

    background-color : #204787;

    box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(

    0, 0, 0, 0.19);

}





.form-submit-button {

    color : white;

    transition : 0.3s;

}





.form-textbox:hover {

    border-color : #515151;

    transition : 2s;

    box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 

    rgba(0, 0, 0, 0.1);

}

Direkt olarak ".form-submit-button" elementinin içerisine eklediğimiz "transition : 0.3s;" satırı sayesinde sadece imleç girişinde değil, çıkışında da animasyon devreye giriyor.

Aşağıdaki ekran görüntülerinde farkı görebilirsiniz:

Eski hali:

Yeni hali:

Bu değişiklikleri uygulamak için aşağıdaki adımları takip edebilirsiniz:

1. Formunuzu Form Oluşturucu'da açın.
2. Sağ taraftaki mavi Boya Rulosu ikonuna tıklayın.
3. Stiller sekmesini seçin ve aşağı kaydırın.
4. Tüm CSS kodlarını silip yukarıdaki kodları yapıştırı.
5. Kaydet butonuna tıklayın.

Daha fazla desteğe gereksinim duyduğunuzda bizimle iletişime geçmekten çekinmeyin.

Bu uygulamayı text-boxlara shadow ile uygulamamız mümkün mü?

Tekrardan merhaba Kaan,

Evet, text-box'lar için de aynısını uygulayabilirsiniz. Önceki cevabımda zaten border için geçerli kodlar vardı. Aşağıdaki kodları da background için aynı adımları uygulayarak ekleyebilirsiniz:

.form-textbox:hover {

    background-color: #555555;

    transition : 2s;

    box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 

    rgba(0, 0, 0, 0.1);

}

.form-textbox {

    transition : 2s;

}

Kodları ekleyip kaydettikten sonra şöyle bir görüntü elde edeceksiniz:

Eğer background-color değil de kenar çerçevelerini anime etmek isterseniz onun yerine border-color yazabilirsiniz.

Daha fazla desteğe gereksinim duyduğunuzda bizimle iletişime geçmekten çekinmeyin.

Teşekkürler uygulamayı tamamladım.