Herhangi bir web sitesinin en önemli bölümlerinden biri, birkaç basit alan ve bu girilen bilgileri göndermek için bir düğme eklemek kadar basit olabilen iletişim formudur, ancak her zaman biraz daha ileri gidebilir ve yaratıcıysak, bir uygulama uygulayabiliriz. sadece kendine has işlevselliğini yerine getirmekle kalmayan, aynı zamanda görsel ve kullanıcı dostu bir etki sağlayan iletişim formu.
Şimdi, fare imlecini gezdirirken kullanıcının verileri bir harf olacak şekilde doldurmasına izin verecek bir zarfı simüle edecek bu formun uygulanması için izlenecek adımları görelim ve tüm bunlar HTML Y CSS3.
Varlıklar veya kaynaklar
Öncelikle zarfımızın mektubumuzun gideceği yere sahip olmamız gerekiyor, bunun için biri zarfın üstünden diğeri alttan olmak üzere iki farklı resim kullanacağız, geçişlerle birleşince bize istediğimiz efekti verecek.
Gördüğümüz gibi, hiç de karmaşık değiller, ancak bu görüntüler, bu örnek için oluşturulan depodadır ve öğreticinin sonunda, indirmek için ilgili bağlantıda bulacaksınız.
Form yapımı
İlk önce çağrılacak bir HTML dosyası oluşturacağız. contact_form.html bizim formumuzu ve stillerini ve geçişlerini işlemekten sorumlu olacak .css dosyasının dahil edilmesini içerecek olan, nasıl göründüğünü görelim:
İletişim FormuŞimdi sadece adı verilen .css'imizi oluşturmamız gerekiyor. stiller.css ve orada formumuz için stiller yerleştirin ve istenen efekti oluşturmak için geçişleri kullanın, önce vücudumuzun görünümünü biraz değiştirip ona bir harf görünümü vereceğiz:Merhaba!
İleti:Bilgilerinizi girin
İsim: E-posta:
gövde {arka plan: #ccc url ('img / bg_carta_fuera.png.webp'); renk: # 7c7873; font-family: 'helvetica';} p {metin-gölge: 0 1px 0 #fff; yazı tipi boyutu: 24 piksel;} # sarma {genişlik: 530 piksel; kenar boşluğu: 20 piksel otomatik 0; yükseklik: 1000 piksel;} h1 {alt kenar boşluğu: 20 piksel; metin hizalama: merkez; yazı tipi boyutu: 48 piksel; metin gölgesi: 0 1px 0 # ede8d9; }Bu yapıldıktan sonra, bunun için kullanacağımız formu içeren div'deki geçişleri uygulayacağız. geçiş her tarayıcı için farklı varyantlarında ve değerle giriş-çıkış kolaylığı Size yavaş bir başlangıç ve bitişin etkisini vereceğiz:
#form_wrap {taşma: gizli; yükseklik: 446 piksel; pozisyon: göreceli; üst: 0 piksel; -webkit-geçiş: tüm 1'ler giriş-çıkış kolaylığı .3'ler; -moz geçişi: tüm 1'ler giriş çıkış kolaylığı .3'ler; -o-geçiş: tüm 1'ler giriş-çıkış kolaylığı .3'ler; geçiş: tüm 1'ler giriş-çıkış kolaylığı .3'ler;}Şimdi sözde unsurlarla önce Y despues de zarftan çıkan mektubun etkisini tamamlayacağız, bakalım:
#form_wrap: önce {içerik: ""; pozisyon: mutlak; alt: 128 piksel; sol: 0 piksel; arkaplan: url ('img / Before.png.webp'); genişlik: 530 piksel; yükseklik: 316 piksel;} #form_wrap: {içerik: ""; konum: mutlak; alt: 0 piksel; sol: 0; arkaplan: url ('img / after.png.webp'); genişlik: 530 piksel; yükseklik: 260 piksel; }Son olarak, hem ekranı hem de üzerindeki efektleri kontrol etmek için gönder düğmesine bazı stiller ekliyoruz:
#form_wrap giriş [tür = gönder] {konum: göreceli; yazı tipi ailesi: 'helvetica'; yazı tipi boyutu: 24 piksel; renk: # 7c7873; metin gölgesi: 0 1px 0 #fff; genişlik: %100; metin hizalama: merkez; opaklık: 0; arka plan: yok; imleç: işaretçi; -moz-border-radius: 3px; -webkit-border-radius: 3px; sınır yarıçapı: 3 piksel; -webkit-geçiş: opaklık .6s giriş-çıkış kolaylığı 0s; -moz-geçişi: opaklık .6s giriş-çıkış kolaylığı 0s; -o-geçiş: opaklık .6s giriş-çıkış kolaylığı 0s; geçiş: opaklık .6s giriş-çıkış kolaylığı 0s; } #form_wrap: fareyle üzerine gelin [tür = gönder] {z-endeksi: 1; opaklık: 1; -webkit-geçiş: opaklık .5s giriş-çıkış kolaylığı 1.3s; -moz-geçiş: opaklık .5s giriş-çıkış kolaylığı 1.3s; -o-geçiş: opaklık .5s giriş-çıkış kolaylığı 1.3s; geçiş: opaklık .5s giriş-çıkış kolaylığı 1,3s;}Şimdi ilk iletişim formumuzu tarayıcıda çalıştırdığımızda nasıl göründüğüne bakalım:
BÜYÜT
Fare imlecini üzerine getirdiğimizde, verileri girip gönderebilmek için formun görüntülendiği işlevselliği göreceğiz:
BÜYÜT
Gördüğümüz gibi, bu formun yapımı oldukça basitti ve hepsinden iyisi, herhangi bir harici kütüphaneye bağlı olmadığımız için herhangi bir web sitesinde uygulanması oldukça basit, sadece örneği genişletmek ve gerçekleştirmek için herkese kalıyor. gibi bazı programlama dillerini kullanarak gönderdiğim işlevi PHP, yakut, piton ya da Node.js.
