CSS Animasyonlu Formlar ile İletişime Olanak Sağlamak

Adı : CSS Animasyonlu Formlar ile İletişime Olanak Sağlamak

CSS Animasyonlu Formlar ile İletişime Olanak Sağlamak

İnternet siteleri, firmalar ya da kişilerin kendilerini tanıtmak ve hizmetlerini duyurmak için kullandıkları en iyi ortamlardan biridir. Bir siteyi kullanacak kişinin oradaki formları doldurarak iletişimde bulunması, sitenin sahibi için oldukça önemlidir. Bu nedenle, iletişim formuna farklı bir hava katmak için CSS animasyonlar kullanılabilir.

CSS Animasyonlar Nedir?

CSS animasyonlar, bir HTML sayfasına hareket katmak için kullanılan bir yöntemdir. CSS kodları ile tasarlanan animasyonlar, farklı özelliklerde görsel hareketler ve efektler oluşturarak sayfayı daha cazip hale getirirler.

Animasyonlu Formlar Nasıl Kullanılır?

İletişim formu için kullanılabilecek animasyonlu öğelerden bazıları şunlardır:

1. Placeholderlar: Placeholderlar, form alanlarında kullanıcının yazacağı bilgileri gösteren kısa açıklamalardır. Animasyonlu placeholderlar, kullanıcıya bilgi girme konusunda yön gösterir ve formun daha kullanıcı dostu olmasını sağlar.

2. Butonlar: Butonları, formda işlemleri onaylamak veya göndermek için kullanılır. Animasyonlu butonlar sayfada daha canlı bir görüntü oluşturur. Örneğin butona tıklandığında renk değiştirme veya bir şekil değiştirme efekti vermek kullanıcının işlem yapmasını sağlayabilir.

3. Borderlar: Form alanlarına çerçeve çizmek, alanların sınırlarını belirlemek için kullanılır. Animasyonlu borderlar, form alanlarının daha dikkat çekici hale gelmesini sağlar. Örneğin, etrafına gezinen bir komut verildiğinde form alanlarının daha hoş görünebilir.

Örnekler

Örnek 1:
HTML kodları içerisinde formun oluşturulduktan sonra CSS kodları eklenebilir. Örnek olarak form alanlarında placeholder kullanımına dikkat çekebiliriz. Şu şekildedir:

input[type=\"text\"]:placeholder-shown + label {
opacity: 0;
pointer-events: none;
font-size: 16px;
transform: translate(-30%, 40%);
transition: all 0.3s;
}

input[type=\"text\"]:not(:placeholder-shown) + label,
input[type=\"email\"]:not(:placeholder-shown) + label,
input[type=\"tel\"]:not(:placeholder-shown) + label,
textarea:not(:placeholder-shown) + label {
opacity: 1;
pointer-events: all;
transform: translate(-30%, -175%);
}

Örnek 2:
Bir örnek daha vermek gerekirse, butonlara farklı animasyonlar uygulanabilir. Aşağıdaki kod bankometro.com.tr adresimizde kullanılmıştır.
.btn{
display: inline-block;
padding: 10px 20px;
border-radius: 25px;
letter-spacing: 1px;
color: #fff;
background-color: #e95420;
border: none;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
}

.btn:hover{
transform: scale(1.05);
box-shadow: 20px 20px 40px rgba(0,0,0,0.2);
}

.btn:focus{
outline:none;
}
.btn:active{
transform: scale(0.9);
}

Sık Sorulan Sorular

1. Animasyonlu formlar, kullanıcılara ne gibi avantajlar sağlar?

Cevap: Animasyonlu formlar, kullanıcıların daha fazla etkileşim kurmasını sağlar. Kullanıcılara daha görsel ve estetik bir deneyim yaşattığı için kullanıcıların sitede daha fazla zaman geçirmesini sağlar.

2. Animasyonlu formların oluşturulması için ne gibi beceriler gereklidir?

Cevap: Animasyonlu formların tasarlanması için temel HTML, CSS ve JavaScript becerilerine ihtiyacınız vardır. Ayrıca, animasyonlu formların oluşturulması için biraz yaratıcılık gereklidir.

3. Animasyonlu formların oluşturulması ile ilgili kaynaklara nerelerden ulaşabilirim?

Cevap: İnternet üzerinde birçok kaynak var. Bunlar arasında Youtube'da eğitici videolar, Udemy ve Lynda gibi platformlarda kurslar, CSS Animasyon örnekleri veren siteler vb. yer alabilir."