Η πρώτη περιοχή μπλοκ είναι τυλιγμένη σε ετικέτα τμήματος έτσι ώστε να μπορέσουμε να πλέξουμε τη διάταξη δίπλα-δίπλα. Η αριστερή στήλη περιέχει όλες αυτές τις εισόδους: κείμενο, ηλεκτρονικό ταχυδρομείο, διεύθυνση URL και αριθμό τηλεφώνου. Καθώς περνάτε από την καρτέλα στο τηλέφωνό σας, η οθόνη του πληκτρολογίου πρέπει να προσαρμόζεται ανάλογα με τον τύπο εισόδου. Υπάρχουν πολλοί εύλογοι λόγοι για να υποστηρίξετε αυτά τα χαρακτηριστικά για κινητά, δεδομένου ότι όλοι εργάζονται εν κινήσει αυτές τις μέρες.
Το στοιχείο textarea μπορεί επίσης να έχει ένα κείμενο με σύμβολο κράτησης θέσης που ορίζεται στο pageload. Αυτό είναι παρόμοιο με μια ετικέτα που εξαφανίζεται όταν ο χρήστης εισάγει κάποιο κείμενο στο πεδίο. Το χαρακτηριστικό που δεν μεταφέρεται είναι αυτόματη συμπλήρωση επειδή οι textareas συνήθως δεν συμπληρώνουν σχετικό περιεχόμενο.
Έλεγχοι πλευρικής γραμμής Ήθελα να οικοδομήσω αυτή τη μορφή έτσι ώστε να ανταποκρίνεται κατάλληλα στην αλλαγή μεγέθους των παραθύρων. Όταν το παράθυρο είναι αρκετά γεμάτο, τότε και οι δύο στήλες εισόδου κινούνται το ένα δίπλα στο άλλο. Αλλά αν το πλάτος ελαττωθεί ελαφρώς, τότε η δεξιά πλαϊνή μπάρα πέφτει κάτω από το κύριο περιεχόμενο.
Εδώ είναι το HTML μου για την περιοχή της πλευρικής γραμμής:
Παραλήπτης: Το προσωπικό του ιστότοπου Αρχισυντάκτης Τεχνικό Τμήμα Δημόσιες σχέσεις Γενική υποστήριξη Αυτός ο κώδικας δεν είναι κάτι πολύ συγκεχυμένο. Απλά μια απλή επιλογή μενού επιλογής και μερικά κουμπιά επιλογής. Επιπλέον, μετά από αυτά τα αντικείμενα έβαλα μια επαναφορά και έβαλα κουμπί προς το τέλος της ενότητας.
Όλα αυτά φαίνονται καλά και καλά, οπότε τώρα ας κινηθούμε σε κάποιες ιδιότητες του CSS. Υπάρχουν τόσες πολλές προσαρμογές που μπορείτε να εφαρμόσετε όταν εργάζεστε σε στοιχεία φόρμας. Προσπαθήστε να μην τυλίξετε τον εαυτό σας με πάρα πολλή σκέψη και διασκέδαση!
Σκιές κινούμενων κουτιών Θα παρατηρήσετε καθώς κάνετε καρτέλα μέσα από κάθε ένα από τα κύρια στοιχεία εισόδου που έχω animated μια πολύχρωμη εξωτερική σκιά. Το Google Chrome έχει μια ιδιότητα περιγράμματος που κάνει κάτι παρόμοιο, αλλά όχι τόσο εξωφρενικό. Αυτό το μικρό μέρος της διασύνδεσης είναι δελεαστικό για τους πρώτους επισκέπτες.
/ ** τα στοιχεία της φόρμας ** / # hongkiat-form μέγεθος κιβωτίου: border-box; # hongkiat-μορφή .txtinput εμφάνιση: μπλοκ; οικογένεια γραμματοσειράς: "Helvetica Neue", Arial, sans-serif; μεθοδικό στυλ: συμπαγές; πλάτος συνόρου: 1px; border-color: #dedede; περιθώριο-κάτω: 20px; μέγεθος γραμματοσειράς: 1.55em; συμπλήρωση: 11px 25px; padding-left: 55px; πλάτος: 90%. χρώμα: # 777; κουτί-σκιά: 0 1px 3px rgba (0, 0, 0, 0.1) ένθετο; -moz-box-σκιά: 0 1px 3px rgba (0, 0, 0, 0.1) ένθετο; -webkit-box-σκιά: 0 1px 3px rgba (0, 0, 0, 0,1) ένθετο; μετάβαση: σύνορο 0.15s γραμμική 0s, σκιά κουτιού 0.15s γραμμική 0s, χρώμα 0.15s γραμμική 0s; -περιοχή ιστού: οριακή 0,15s γραμμική 0s, σκιά κουτιού 0,15s γραμμική 0s, χρώμα 0,15s γραμμική 0s, -μετοχή μετάβασης: όριο 0.15s γραμμική 0s, κουτί-σκιά 0.15s γραμμική 0s, χρώμα 0.15s γραμμική 0s; -ο-μετάβαση: όριο 0.15s γραμμική 0s, κουτί σκιά 0.15s γραμμική 0s, χρώμα 0.15s γραμμική 0s; # hongkiat-φόρμα .txtinput: εστίαση χρώμα: # 333; Χρώμα περιγράμματος: rgba (41, 92, 161, 0.4). box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) ένθετο, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-σκιά: 0 1px 3px rgba (0, 0, 0, 0.1) ένθετο, 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) ένθετο, 0 0 8px rgba (41, 92, 161, 0.6); περίγραμμα: 0 κανένας; Για να στοχεύσω κάθε στοιχείο κειμένου έχω χρησιμοποιήσει την τάξη .txtinput. Κάθε μία από τις ιδιότητες μετάβασης λειτουργεί στα σύνορα, στη σκιά κουτιού και στο χρώμα. χρησιμοποιώ μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? στο εμπορευματοκιβώτιο φόρμας, έτσι ώστε η επένδυση να μην ανακατεύει το σχεδιασμό μας.
Έπρεπε να αντιγράψω πάνω από αυτά τα ίδια στυλ και να τα επεξεργαστώ ελαφρά για την textarea. Αλλάξα μερικά από τα παρεμβύσματα και τα περιθώρια και πρόσθεσα ένα μοναδικό εικονίδιο φόντου.
# hongkiat-textarea μορφής εμφάνιση: μπλοκ? οικογένεια γραμματοσειράς: "Helvetica Neue", Arial, sans-serif; μεθοδικό στυλ: συμπαγές; πλάτος συνόρου: 1px; border-color: #dedede; περιθώριο-κάτω: 15px; μέγεθος γραμματοσειράς: 1.5em; συμπλήρωση: 11px 25px; padding-left: 55px; πλάτος: 90%. ύψος: 180px; χρώμα: # 777; κουτί-σκιά: 0 1px 3px rgba (0, 0, 0, 0.1) ένθετο; -moz-box-σκιά: 0 1px 3px rgba (0, 0, 0, 0.1) ένθετο; -webkit-box-σκιά: 0 1px 3px rgba (0, 0, 0, 0,1) ένθετο; μετάβαση: σύνορο 0.15s γραμμική 0s, σκιά κουτιού 0.15s γραμμική 0s, χρώμα 0.15s γραμμική 0s; -περιοχή ιστού: οριακή 0,15s γραμμική 0s, σκιά κουτιού 0,15s γραμμική 0s, χρώμα 0,15s γραμμική 0s, -μετοχή μετάβασης: όριο 0.15s γραμμική 0s, κουτί-σκιά 0.15s γραμμική 0s, χρώμα 0.15s γραμμική 0s; -ο-μετάβαση: όριο 0.15s γραμμική 0s, κουτί σκιά 0.15s γραμμική 0s, χρώμα 0.15s γραμμική 0s; # hongkiat-textarea φόρμας: εστίαση χρώμα: # 333; Χρώμα περιγράμματος: rgba (41, 92, 161, 0.4). box-σκιά: 0 1px 3px rgba (0, 0, 0, 0.1) ένθετο, 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-σκιά: 0 1px 3px rgba (0, 0, 0, 0,1) ένθετο, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-σκιά: 0 1px 3px rgba (0, 0, 0, 0.1) ένθετο, 0 0 8px rgba (40, 90, 160, 0.6); περίγραμμα: 0 κανένας; # Χονγκ Κονγκ textarea.txtblock φόντο: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat; Είσοδοι πλευρικής γραμμής Τα κουμπιά επιλογής και τα στοιχεία μενού επιλέγονται πολύ πιο απλά. Μπορείτε να εφαρμόσετε εξωτερικά εφέ λάμψης και παρόμοιες σκιές στα σημεία αυτά, αλλά δεν φαίνονται πάντα καλά. Εναλλακτικά, οι σχεδιαστές θα δημιουργήσουν προσαρμοσμένες διεπαφές χρήστη και θα τις προσαρτήσουν ως εικόνες φόντου. Αλλά αυτό μπορεί να απαιτήσει μια jQuery λύση για να κρατήσει τις επιλογές εμφανίζονται σωστά.
span.radiobadge εμφάνιση: μπλοκ; περιθώριο-κάτω: 8px; ετικέτα span.radiobadge font-size: 1.2em; padding-bottom: 4px; επιλογή.περιοχή font-size: 17px; χρώμα: # 676767; padding: 9px! σύνορα: 1px στερεά # aaa; πλάτος: 200px; Δεν έχω κάνει πολλά για να τα απομακρύνω από τα κύρια στοιχεία εισόδου. Πολλή επιπλέον επένδυση είναι σημαντική, ώστε οι χρήστες σας αισθάνονται άνετα να αλληλεπιδρούν με τη φόρμα. Όταν το κείμενο είναι πολύ μικροσκοπικό, μπορεί να είναι ένας αγώνας μόνο για να συμπληρωθεί κάθε κομμάτι. Κρατήστε τη γραμματοσειρά σας μεγάλη, αλλά όχι τόσο μεγάλη ώστε να ξεπερνά τη σελίδα.
Προσαρμοσμένα κουμπιά Τα κουμπιά επαναφοράς και αποστολής έχουν σχεδιαστεί σε μια δική τους κλάση. Έχω χτίσει ένα σύνολο ελαφρών κλίσεων για να ταιριάζει καλά με τα μπλε αξιοθέατα στα πεδία φόρμας μας.
Παρακάτω είναι ο κωδικός μου CSS για το κουμπί "Υποβολή" σε κανονική κατάσταση και κατάσταση αιωρήματος.
#buttons #submitbtn εμφάνιση: μπλοκ? float: αριστερά. ύψος: 3εκ. συμπλήρωση: 0 1εμ. σύνορα: 1px στερεά? περίγραμμα: 0; γραμματοσειρά-βάρος: έντονα. μέγεθος γραμματοσειράς: 1.3em; χρώμα: #fff; σκιά κειμένου: 0px 1px 0px # 222; λευκό-διάστημα: τώρα; word-wrap: κανονική; κατακόρυφη-ευθυγράμμιση: μεσαία? δρομέας: δείκτης; -moz-border-radius: 2px; -webkit-ακτίνα-ακτίνα: 2px; ακτίνα ακτίνων: 2px; Χρώμα περιγράμματος: # 5e890a # 5e890a # 000; -moz-box-σκιά: ένθετο 0 1px 0 rgba (256,256,256, .35); -ms-box-σκιά: ένθετο 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: ένθετο 0 1px 0 rgba (256,256,256, .35); κουτί-σκιά: ένθετο 0 1px 0 rgba (256,256,256, .35); Χρώμα φόντου: rgb (226,238,175); Εικόνα φόντου: -moz-γραμμική κλίση (κορυφή, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%). (3%, rgb (226,238,175)), έγχρωμη διακοπή (3%, rgb (188,216,77)), έγχρωμη διακοπή (100% %, rgb (144,176,38)). Εικόνα φόντου: -webkit-γραμμική κλίση (κορυφή, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%). Εικόνα φόντου: -ο-γραμμική κλίση (κορυφή, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%). Εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%). Εικόνα φόντου: Γραμμική κλίση (κορυφή, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%). φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0). #buttons #submitbtn: hover, #buttons #submitbtn: ενεργό χρώμα περιγράμματος: # 7c9826 # 7c9826 # 000; χρώμα: #fff; -moz-box-σκιά: ένθετο 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-σκιά: ένθετο 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-σκιά: ένθετο 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); κουτί-σκιά: ένθετο 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); υπόβαθρο: rgb (228, 237, 189); υπόβαθρο: -moz-γραμμική κλίση (κορυφή, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%). (2%, rgb (228,237,189)), έγχρωμη διακοπή (3%, rgb (207,219,120)), έγχρωμη διακοπή (100%, rgb 149,175,54))). ιστορικό: -webkit-γραμμική κλίση (κορυφή, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%). υπόβαθρο: -ο-γραμμική κλίση (κορυφή, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%). υπόβαθρο: -ms-γραμμική κλίση (κορυφή, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%). υπόβαθρο: γραμμική κλίση (κορυφή, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%). φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0). Είναι σχεδόν αδύνατο να διατηρήσετε αυτόν τον τύπο επιλογέα καθαρό! Υπάρχουν απλά πάρα πολλές ιδιότητες που χρειάζεστε για λίστα και υποστήριξη για πολλά παλαιότερα προγράμματα περιήγησης παλαιού τύπου. Ο Internet Explorer μπορεί ακόμη και να καταστήσει αυτές τις κλίσεις με το κατάλληλο φίλτρο. Παρατηρήστε εκτός από τις διαβαθμίσεις φόντου Έχω επίσης συμπεριλάβει ένα νέο χρώμα των περιθωρίων, στρογγυλεμένες γωνίες και μια σκιά κιβωτίου πάνω στο hover.
Το κουμπί επαναφοράς φαίνεται παρόμοιο, αλλά έχω πάει μια εντελώς διαφορετική διαδρομή με το χρωματικό σχέδιο. Το ανοιχτό γκρι τείνει να πέσει στο παρασκήνιο σε σύγκριση με τα φωτεινά πράσινα χρώματα. Το κουμπί επαναφοράς μας πιθανότατα δεν θα χρησιμοποιηθεί πάρα πολύ, γι 'αυτό δεν χρειάζεται όλη η προσοχή.
#buttons #resetbtn εμφάνιση: μπλοκ? float: αριστερά. χρώμα: # 515151; κείμενο-σκιά: -1px 1px 0px #fff; περιθώριο-δεξιά: 20px; ύψος: 3εκ. συμπλήρωση: 0 1εμ. περίγραμμα: 0; γραμματοσειρά-βάρος: έντονα. μέγεθος γραμματοσειράς: 1.3em; λευκό-διάστημα: τώρα; word-wrap: κανονική; κατακόρυφη-ευθυγράμμιση: μεσαία? δρομέας: δείκτης; -moz-border-radius: 2px; -webkit-ακτίνα-ακτίνα: 2px; ακτίνα ακτίνων: 2px; χρώμα φόντου: #fff; Εικόνα φόντου: -moz-γραμμική κλίση (κορυφή, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%). (2%, rgb (255.255.255)), έγχρωμη διακοπή (2%, rgb (240.240.240)), έγχρωμη διακοπή (100%, rgb (222,222,222)). Εικόνα φόντου: -webkit-γραμμική κλίση (κορυφή, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%). Εικόνα φόντου: -ο-γραμμική κλίση (κορυφή, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%). Εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%). Εικόνα φόντου: γραμμική κλίση (κορυφή, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%). φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0). σύνορα: 1px στερεά # 969696; σκιά κουτιού: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-box-σκιά: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-σκιά: 0 1px 2px rgba (144, 144, 144, 0.4); σκιά κειμένου: 0 1px 1px rgba (255, 255, 255, 0.75); #εντολές #resetbtn: αιώρηση κείμενο-σκιά: 0 1px 1px rgba (255, 255, 255, 0.75); χρώμα: # 818181; χρώμα φόντου: #fff; Εικόνα φόντου: -moz-γραμμική κλίση (κορυφή, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%). (2%, rgb (255.255.255)), έγχρωμη διακοπή (2%, rgb (244.244.244)), έγχρωμη διακοπή (100%, rgb (229, 229, 229)). Εικόνα φόντου: -webkit-linear-gradient (κορυφή, 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%). Εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%). εικόνα φόντου: γραμμική κλίση (κορυφή, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%). φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0). border-color: #aeaeae; κουτί-σκιά: ένθετο 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Θα μπορούσατε ακόμη να ρίξετε τον τύπο επαναφοράς και να χρησιμοποιήσετε αυτό το σχήμα λευκού / γκρι χρώματος ως κύριο κουμπί υποβολής. Έχω χρησιμοποιήσει πολλά από τα ίδια στυλ κλίσης και πτώση εφέ σκιά, μαζί με μια σκιά κειμένου για την εσωτερική ετικέτα. Προσφέρει σίγουρα μια διαφορετική αίσθηση στην εμπειρία του χρήστη.
Ανταποκρινόμενες αλλαγές διάταξης Μεταβαίνοντας στο άλλο αρχείο CSS μου, μπορούμε να ρίξουμε μια ματιά στα απλά ερωτήματα των μέσων που ανταποκρίνονται στις ρυθμίσεις μου. Οποιοδήποτε παράθυρο προγράμματος περιήγησης πάνω από 800px θα αντιμετωπίσει το πλήρες interface της γραμμής. Καθώς φτάνετε κάτω από αυτό το κατώτατο όριο, η αριστερή στήλη επεκτείνεται στο πλάτος 100% και βλέπετε τα στοιχεία της πλευρικής γραμμής κάτω από το κάτω μέρος.
@media οθόνη και (max-width: 800px) body padding: 10px 15px; #container πλάτος: 100%; # hongkiat-μορφή #καθορισμένο πλάτος: 100%; float: κανένας; εμφάνιση: μπλοκ? # hongkiat-μορφή #aside πλάτος: 100%; εμφάνιση: μπλοκ? float: κανένας; # hongkiat-μορφή .txtinput, # hongkiat-μορφή textarea πλάτος: 85%; #prioritycase float: left? εμφάνιση: μπλοκ? #recipientcase float: αριστερά; εμφάνιση: μπλοκ? περιθώριο-δεξιά: 55px; Καθώς πλησιάζουμε στο μέγεθος προσπαθώ να προσαρμόσω κάθε μία από τις μορφές εισόδου. Η ιδιότητα πλάτους μπορεί να καταλήξει περισσότερο από την ίδια την ιστοσελίδα και έπειτα έχουμε μορφές εισόδου που ξεχωρίζουν πάνω από την άκρη. Αυτό συμβαίνει περίπου 550px, όπου έχω σπάσει το επόμενο ερώτημα, μαζί με δύο ψηφιακές αναλύσεις οθόνης iPhone για πορτρέτο και τοπίο.
/ * μικρότερη οθόνη απόσπασης ******* / @media μόνο οθόνη και (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea πλάτος: 80%; / * iPhone Τοπίο ******** / μόνο @ οθόνη και (max-πλάτος: 480px) body padding: 10px 0px; select.selmenu width: 190px; / * iPhone μόνο για οθόνη πορτρέτου ******* / @media και (μέγιστο πλάτος: 320px) body padding: 10px 0px; # hongkiat-μορφή .txtinput, # hongkiat-μορφή textarea πλάτος: 70%; # hongkiat-form #καθορισμένο υπερχείλιση: κρυφό; select.selmenu width: 160px; #recipientcase margin-right: 30px; Η λειτουργία οριζόντιας οριζόντιας εικόνας εξακολουθεί να κρατά τα πάντα πολύ καλά. Έχω κάνει μόνο το μενού επιλογής dropdown λίγο λεπτότερο για να κάνετε χώρο για τα ραδιοφωνικά κουμπιά. Στην οριζόντια προβολή, έχω αλλάξει όλα τα στοιχεία σε πολύ μικρότερα πλάτη. Τώρα ο κώδικας μας δεν θα σπάσει ακόμη και στα μεγέθη του προγράμματος περιήγησης. Αλλά είναι ωραίο να έχετε υποστήριξη και για smartphones iOS / Android.
Διαδήλωση Λήψη πηγαίου κώδικα συμπέρασμα Ελπίζω αυτό το σεμινάριο να είναι ενημερωτικό για να εξηγήσει πόσο μπορεί να γίνει με τα webforms σας. Οι νέες ιδιότητες του CSS3 είναι αρκετά ισχυρές ώστε να δημιουργήσουν κινούμενα σχέδια που λειτουργούν πλήρως με μερικές μόνο γραμμές κώδικα. Είναι πραγματικά μια συναρπαστική στιγμή για να εργάζεστε στην ανάπτυξη ιστού και ακολουθώντας αυτές τις τάσεις.
Εάν έχετε ιδέες ή προτάσεις σχετικά με τον κώδικα του εκπαιδευτικού, μπορείτε να τις μοιραστείτε μαζί μας μέσω του παρακάτω πλαισίου σχολίων.
