İlk blok alanı bir bölüm etiketine sarılır, böylece mizanpajı yan yana götürebiliriz. Sol sütun tüm bu girişleri içerir: metin, e-posta, URL ve telefon numarası. Telefonunuzda gezinirken, mobil klavye ekranı giriş türüne göre uyum sağlamalıdır. Bugünlerde herkes hareket halindeyken çalıştığından, bu özellikleri mobil cihazlar için desteklemenin birçok iyi nedeni var..
Textarea öğesinde ayrıca, pageload'da tanımlanan bir yer tutucu metin de olabilir. Bu, kullanıcı alana bir metin girdiğinde kaybolan bir etikete benzer. Taşınmayan özellik Otomatik tamamlama çünkü textareas genellikle ilgili içeriği doldurmaz.
Kenar Çubuğu Kontrolleri Bu formu, vitrinleri yeniden boyutlandırmaya uygun şekilde cevap verebilecek şekilde oluşturmak istedim. Pencere yeterince dolu olduğunda, her iki giriş sütunu da yan yana yüzer. Ancak genişlik hafifçe kesilirse, sağ kenar çubuğu ana içeriğin altına düşer.
İşte kenar çubuğu alanı için HTML kodum:
Alıcı: Site personeli Genel Yayın Yönetmeni Teknik Departman Halkla ilişkiler Genel Destek Bu kod aslında kafa karıştırıcı bir şey değil. Sadece basit bir seçenek menü ve bazı radyo düğmelerini seçin. Ek olarak, bu nesnelerden sonra bölümün sonuna doğru bir sıfırla ve gönder düğmesini yerleştirdim.
Bunların hepsi iyi ve iyi görünüyor, bu yüzden şimdi bazı CSS özelliklerine geçelim. Form öğeleri üzerinde çalışırken uygulayabileceğiniz çok sayıda özelleştirme vardır. Çok fazla düşünerek kendini eğlendirmemeye çalış ve eğlen!
Animasyonlu Kutu Gölgeler Renkli bir dış gölgeyi canlandırdığım ana giriş öğelerinin her birini sektiğinizde fark edeceksiniz. Google Chrome, benzer bir şey yapan, ancak abartılı olmayan bir anahat özelliğine sahiptir. Arayüzün bu küçük kısmı ilk kez gelen ziyaretçileri cezbedecek.
/ ** form öğeleri ** / # hongkiat-form box-sizing: border-box; # hongkiat-form .txtinput ekran: blok; font-family: "Helvetica Neue", Arial, sans-serif; sınır tarzı: katı; sınır genişliği: 1 piksel; kenarlık rengi: #dedede; marj-alt: 20 piksel; yazı tipi boyutu: 1.55em; dolgu maddesi: 11px25px; sol doldurma: 55 piksel; genişlik:% 90; renk: # 777; kutu-gölge: 0 1 piksel 3 piksel rgba (0, 0, 0, 0,1) eki; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) eki; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) eki; geçiş: sınır 0.15s doğrusal 0s, kutu gölge 0.15s doğrusal 0s, renk 0.15s doğrusal 0s; -webkit-geçişi: sınır 0.15s doğrusal 0s, kutu gölge 0.15s doğrusal 0s, renk 0.15s doğrusal 0s; -moz-geçiş: sınır 0.15s doğrusal 0s, kutu gölge 0.15s doğrusal 0s, renk 0.15s doğrusal 0s; -o-geçişi: sınır 0.15s doğrusal 0s, kutu gölge 0.15s doğrusal 0s, renk 0.15s doğrusal 0s; # hongkiat-form .txtinput: focus color: # 333; kenarlık rengi: rgba (41, 92, 161, 0.4); kutu-gölge: 0 1 piksel 3 piksel rgba (0, 0, 0, 0,1) ek, 0 0 8 piksel rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ek, 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ek, 0 0 8px rgba (41, 92, 161, 0.6); anahat: 0 yok; Her bir metin öğesini hedeflemek için sınıfı kullandım .TxtInput. Geçiş özelliklerinin her biri kenarlık, kutu gölgesi ve renk üzerinde çalışır. kullanıyorum kutu boyutlandırma: kenarlık kutusu; form kabının üzerinde dolguyu duyarlı tasarımımızla karıştırmaz.
Aynı stilleri kopyalayıp, metin için biraz düzenlemeliydim. Dolgu ve kenar boşluklarından bazılarını değiştirdim ve benzersiz bir arka plan simgesi ekledim.
# hongkiat-form textarea ekran: blok; font-family: "Helvetica Neue", Arial, sans-serif; sınır tarzı: katı; sınır genişliği: 1 piksel; kenarlık rengi: #dedede; marj-alt: 15 piksel; yazı tipi boyutu: 1.5em; dolgu maddesi: 11px25px; sol doldurma: 55 piksel; genişlik:% 90; yükseklik: 180px; renk: # 777; kutu-gölge: 0 1 piksel 3 piksel rgba (0, 0, 0, 0,1) eki; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) eki; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) eki; geçiş: sınır 0.15s doğrusal 0s, kutu gölge 0.15s doğrusal 0s, renk 0.15s doğrusal 0s; -webkit-geçişi: sınır 0.15s doğrusal 0s, kutu gölge 0.15s doğrusal 0s, renk 0.15s doğrusal 0s; -moz-geçiş: sınır 0.15s doğrusal 0s, kutu gölge 0.15s doğrusal 0s, renk 0.15s doğrusal 0s; -o-geçişi: sınır 0.15s doğrusal 0s, kutu gölge 0.15s doğrusal 0s, renk 0.15s doğrusal 0s; # hongkiat-form textarea: focus color: # 333; kenarlık rengi: rgba (41, 92, 161, 0.4); kutu-gölge: 0 1 piksel 3 piksel rgba (0, 0, 0, 0.1) ek, 0 0 8 piksel rgba (40, 90, 160, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ek, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ek, 0 0 8px rgba (40, 90, 160, 0.6); anahat: 0 yok; # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-tekrar; Kenar Çubuğu Girişleri Radyo düğmeleri ve menü seçeneklerinin seçimi çok daha kolaydır. Bu elemanlara dış ışıma efektleri ve benzeri alt gölgeler uygulayabilirsiniz, ancak her zaman iyi görünmez. Alternatif olarak tasarımcılar özel kullanıcı arayüzleri oluşturacak ve bunları arkaplan görüntüleri olarak ekleyecektir. Ancak, seçeneklerin düzgün görüntülenmesini sağlamak için bir jQuery geçici çözümü gerekebilir.
span.radiobadge ekran: blok; marj-alt: 8 piksel; span.radiobadge etiketi font-size: 1.2em; alt dolgu: 4px; select.selmenu font-size: 17px; renk: # 676767; dolgu: 9px! önemli; kenarlık: 1px katı #aaa; genişlik: 200px; Bunları ana girdi öğelerinden uzaklaştırmak için çok şey yapmadım. Bol miktarda fazladan dolgu maddesi önemlidir, bu nedenle kullanıcılarınızın formla etkileşimde rahat hissetmelerini sağlayın. Metin çok küçük olduğunda, sadece her bölümü doldurmak için bir mücadele olabilir. Yazı tipinizi büyük tutun, ancak sayfanın üzerine gelmeyecek kadar büyük değil.
Özel Düğmeler Sıfırla ve gönder düğmeleri kendi sınıfında tasarlanmıştır. Form alanlarımızdaki mavi vurgularla eşleşmesi için bir dizi ışık gradyanı oluşturdum.
Aşağıda standart ve asılı durumdaki gönder düğmesinin CSS kodum var.
#buttons #submitbtn display: block; şamandıra: sol; yükseklik: 3em; dolgu maddesi: 0 1em; sınır: 1px katı; taslak: 0; yazı tipi ağırlığı: kalın; yazı tipi boyutu: 1.3em; renk: #fff; metin-gölge: 0px 1px 0px # 222; beyaz boşluk: nowrap; sözcük kaydırma: normal; dikey hizalama: orta; imleç: işaretçi; -moz-sınır yarıçapı: 2px; -webkit-border-radius: 2px; sınır yarıçapı: 2 piksel; kenarlık rengi: # 5e890a # 5e890a # 000; -moz-box-shadow: iç içe geçmiş 0 1px 0 rgba (256,256,256,35); -ms-box-shadow: gömülü 0 1px 0 rgba (256,256,256,35); -webkit-box-shadow: iç içe geçmiş 0 1px 0 rgba (256,256,256, .35); kutu-gölge: gömülmüş 0 1px 0 rgba (256,256,256, .35); arkaplan rengi: rgb (226,238,175); arka plan görüntüsü: -moz-lineer-gradyan (üst, rgb (226,238,175)% 3, rgb (188,216,77)% 3, rgb (144,176,38)% 100); background-image: -webkit-gradyanı (doğrusal, sol üst, sol alt, renk durdurma (% 3, rgb (226,238,175))), renk durdurma (% 3, rgb (188,216,77)), renk durdurma (100 % RGB (144,176,38))); arka plan görüntüsü: -webkit-linear-gradyan (üst, rgb (226,238,175)% 3, rgb (188,216,77)% 3, rgb (144,176,38)% 100); arka plan görüntüsü: -o-lineer-gradyan (üst, rgb (226,238,175)% 3, rgb (188,216,77)% 3, rgb (144,176,38)% 100); arkaplan-görüntü: -ms-doğrusal-gradyan (üst, rgb (226, 238, 175)% 3, rgb (188.216,77)% 3, rgb (144,176,38)% 100); arka plan görüntüsü: doğrusal gradyan (üst, rgb (226,238,175)% 3, rgb (188,216,77)% 3, rgb (144,176,38)% 100); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #submitbtn: etkin kenarlık rengi: # 7c9826 # 7c9826 # 000; renk: #fff; -moz-box-shadow: iç içe 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -ms-box-shadow: gömülü 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -webkit-box-shadow: gömülü 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); kutu-gölge: gömülmüş 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); arkaplan: rgb (228,237,189); arkaplan: -moz-lineer-gradyan (üst, rgb (228,237,189)% 2, rgb (207,219,120)% 3, rgb (149,175,54)% 100); arkaplan: -webkit-gradyan (doğrusal, sol üst, sol alt, renk durdurma (% 2, rgb (228,237,189)), renk durdurma (% 3, rgb (207,219,120)), renk durdurma (% 3, rgb (rgb) 149,175,54))); arkaplan: -webkit-linear-gradyan (üst, rgb (228,237,189)% 2, rgb (207,219,120)% 3, rgb (149,175,54)% 100); arkaplan: -o-doğrusal-gradyan (üst, rgb (228,237,189)% 2, rgb (207,219,120)% 3, rgb (149,175,54)% 100); arkaplan: -ms-doğrusal-gradyan (üst, rgb (228,237,189)% 2, rgb (207,219,120)% 3, rgb (149,175,54)% 100); arkaplan: doğrusal gradyan (üst, rgb (228,237,189)% 2, rgb (207,219,120)% 3, rgb (149,175,54)% 100); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Bu tip seçiciyi temiz tutmak neredeyse imkansız! Eski tarayıcıların çoğu için listelemeniz ve desteklemeniz gereken çok fazla özellik var. Internet Explorer bu degradeleri uygun filtrelerle bile oluşturabilir. Arka plan degradelerinin yanı sıra, yeni bir kenarlık rengi, yuvarlatılmış köşeler ve dururken bir kutu gölgesi ekledim..
Sıfırlama düğmesi benzer görünüyor ancak renk şemasıyla tamamen farklı bir rotaya geçtim. Açık gri, parlak yeşil renklere kıyasla arka plana düşme eğilimindedir. Sıfırlama düğmemiz büyük olasılıkla çok fazla kullanılmayacak, bu nedenle tüm dikkatlere ihtiyacı yok.
#buttons #resetbtn display: block; şamandıra: sol; renk: # 515151; metin-gölge: -1 piksel 1 piksel 0 piksel #fff; kenar boşluğu: 20 piksel; yükseklik: 3em; dolgu maddesi: 0 1em; taslak: 0; yazı tipi ağırlığı: kalın; yazı tipi boyutu: 1.3em; beyaz boşluk: nowrap; sözcük kaydırma: normal; dikey hizalama: orta; imleç: işaretçi; -moz-sınır yarıçapı: 2px; -webkit-border-radius: 2px; sınır yarıçapı: 2 piksel; arkaplan rengi: #fff; arkaplan-görüntü: -moz-lineer-gradyan (üst, rgb (255, 255, 255)% 2, rgb (240,240,240)% 2, rgb (222,222,222)% 100); arkaplan resmi: -webkit-gradyanı (doğrusal, sol üst, sol alt, renk durdurma (% 2, rgb (255,255,255))), renk durdurma (% 2, rgb (240,240,240)), renk durdurma (% 2, RGB (222.222.222))); arka plan görüntüsü: -webkit-linear-gradyan (üst, rgb (255, 255, 255)% 2, rgb (240,240,240)% 2, rgb (222,222,222)% 100); arka plan görüntüsü: -o-lineer-gradyan (üst, rgb (255, 255, 255)% 2, rgb (240,240,240)% 2, rgb (222,222,222)% 100); arkaplan-görüntü: -ms-lineer-gradyan (üst, rgb (255, 255, 255)% 2, rgb (240,240,240)% 2, rgb (222,222,222)% 100); arka plan görüntüsü: doğrusal gradyan (üst, rgb (255, 255, 255)% 2, rgb (240,240,240)% 2, rgb (222,222,222)% 100); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); sınır: 1px katı # 969696; kutu-gölge: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-kutu-gölge: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); metin-gölge: 0 1 piksel 1 piksel rgba (255, 255, 255, 0,75); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); renk: # 818181; arkaplan rengi: #fff; arkaplan-görüntü: -moz-lineer-gradyan (üst, rgb (255, 255, 255)% 2, rgb (244, 244, 244),% 2, rgb (229, 229, 229),% 100); arkaplan resmi: -webkit-gradyanı (doğrusal, sol üst, sol alt, renk durdurma (% 2, rgb (255,255,255))), renk durdurma (% 2, rgb (244,244,244)), renk durdurma (% 100, RGB (229.229.229))); arka plan görüntüsü: -webkit-linear-gradyan (üst, rgb (255.255, 255)% 2, rgb (244.244,244)% 2, rgb (229, 229, 229)% 100); 255, 255, 255)% 2, rgb (244,244,244)% 2, rgb (229,229,229)% 100); arkaplan-görüntü: -ms-lineer-gradyan (üst, rgb (255, 255, 255)% 2, rgb (244, 244, 244),% 2, rgb (229, 229, 229),% 100); arka plan görüntüsü: doğrusal gradyan (üst, rgb (255, 255, 255)% 2, rgb (244, 244, 244)% 2, rgb (229, 229, 229)% 100); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); kenarlık rengi: #aeaeae; kutu-gölge: gömülmüş 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); Sıfırlama türünü bile düşürebilir ve bu beyaz / gri renk düzenini ana gönderim düğmeniz olarak kullanabilirsiniz. İç etiket için bir metin gölgesinin yanı sıra aynı degrade stillerinin ve alt gölge efektlerinin çoğunu kullandım. Kesinlikle kullanıcı deneyimine farklı bir his veriyor..
Duyarlı Düzen Değişiklikleri Diğer CSS dosyama taşındığında, kurduğum basit yanıt veren medya sorgularına bakabiliriz. 800px üzerindeki herhangi bir tarayıcı penceresi tam kenar çubuğu arayüzünü deneyimleyecektir. Bu eşiğin altına düştüğünüzde sol sütun% 100 genişliğe genişler ve kenar çubuğu öğelerinin aşağı indiğini görürsünüz.
@ media screen ve (maksimum genişlik: 800px) body dolgu: 10px 15px; #container genişlik:% 100; # hongkiat-form #aligned width: 100%; şamandıra: yok; Ekran bloğu; # hongkiat-form #aside genişlik:% 100; Ekran bloğu; şamandıra: yok; # hongkiat-form .txtinput, # hongkiat-form textarea genişlik:% 85; #prioritycase float: left; Ekran bloğu; #recipientcase float: left; Ekran bloğu; sağ kenar boşluğu: 55px; Boyut olarak yaklaştıkça giriş formlarının her birini uyarlamaya çalışıyorum. Width özelliği, web sayfasının kendisinden daha uzun sürebilir ve daha sonra kenarların dışına yapışan girdi formlarımız vardır. Bu, bir sonraki sorguyu kırdığım 550px civarında, dikey ve yatay olarak iPhone ekran çözünürlükleriyle birlikte.
/ * daha küçük ekran bırakması ******* / @media sadece ekran ve (en-genişlik: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea genişlik:% 80; / * iPhone Landscape ******** / @media sadece ekran ve (maksimum genişlik: 480 piksel) body dolgu: 10 piksel 0 piksel; select.selmenu genişlik: 190px; / * iPhone portre ******* / @media sadece ekran ve (maksimum genişlik: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea genişlik:% 70; # hongkiat-form #aligned overflow: hidden; select.selmenu genişlik: 160px; #recipientcase margin-right: 30px; Yatay manzara modu hala her şeyi bir arada tutuyor. Radyo düğmelerine yer açmak için yalnızca açılır menü seçimini biraz daha incelttim. Portre görünümünde, tüm elemanları daha küçük genişliklerde yeniden boyutlandırdım. Artık kodumuz yeniden boyutlandırılmış tarayıcı pencerelerinde bile bozulmayacak. Ancak iOS / Android akıllı telefonlar için destek almak güzel.
gösteri Kaynak Kodunu İndir Sonuç Umarım bu eğitimde web formlarınızda ne kadar yapabileceğiniz açıklanmaktadır. Yeni CSS3 özellikleri, sadece birkaç kod satırı ile tamamen işleyen animasyonlar oluşturabilecek kadar güçlü. Web geliştirme alanında çalışmak ve bu trendleri takip etmek gerçekten heyecan verici bir zaman..
Eğitim koduyla ilgili fikir veya önerileriniz varsa, bunları aşağıdaki yorum kutusunu kullanarak bizimle paylaşmaktan çekinmeyin.
