Δημιουργία φόρμας σύνδεσης σε ετικέτες στοιβάζονται χαρτιού

Αυτό το άρθρο είναι μέρος του μας "Σειρά HTML5 / CSS3 Tutorials" - αφιερωμένο να σας βοηθήσει να κάνετε έναν καλύτερο σχεδιαστή και / ή προγραμματιστή. Κάντε κλικ ΕΔΩ για να δείτε περισσότερα άρθρα από την ίδια σειρά.

Οι φόρμες σύνδεσης αποτελούν ουσιαστικό μέρος κάθε δυναμικής ιστοσελίδας. Παρέχουν ένα μηχανισμό που επιτρέπει στους χρήστες της ιστοσελίδας να έχουν πρόσβαση σε περιορισμένο περιεχόμενο. Σε αυτό το σεμινάριο, θα εξερευνήσουμε πολλές από τις δυνατότητες του CSS3, όπως σκιά κειμένου, σκιά κουτιού, γραμμικές κλίσεις και μεταβάσεις, για να δημιουργήσετε μια απλή και κομψή φόρμα σύνδεσης με μια στοίβα από χαρτί.

Η παραπάνω εικόνα δείχνει μια προεπισκόπηση της φόρμας σύνδεσης που θα χτίζουμε. Είστε έτοιμοι να βουτήξετε; Ας αρχίσουμε!

1. Βασική σήμανση HTML

Το HTML markup που θα χρησιμοποιήσουμε είναι πολύ απλό, μετά τη δήλωση HTML5 Doctype, έχουμε το και </code> ετικέτες. Μέσα στο <code><body></code> ετικέτα, έχουμε ένα <code><section></code> ετικέτα με μια κατηγορία "στοιβάζονται". Αυτό <code><section></code> ετικέτα χρησιμοποιείται για τον ορισμό του πλάτους του πλαισίου περιεχομένου και για την ευθυγράμμισή του στο κέντρο της σελίδας. Θα χρησιμοποιήσουμε επίσης το όνομα κλάσης αυτής της ετικέτας για να στοχεύσετε αυτήν την ετικέτα χρησιμοποιώντας το CSS. ΕΝΑ <code><form></code> ακολουθεί η ετικέτα <code><section></code> ετικέτα. Η ετικέτα φόρμας δεν έχει έγκυρη τιμή για το χαρακτηριστικό "δράση", επειδή χρησιμοποιείται μόνο για σκοπούς επίδειξης. Μέσα στο πεδίο φόρμας υπάρχουν οι δηλώσεις για τις ετικέτες email και κωδικού πρόσβασης και το πεδίο εισαγωγής, ακολουθούμενο από ένα κουμπί υποβολής. Το σημαντικό σημείο που πρέπει να σημειώσουμε εδώ είναι ότι χρησιμοποιήσαμε ένα πεδίο εισόδου με έναν τύπο "ηλεκτρονικού ταχυδρομείου". Αυτό μας παρέχεται από τη δήλωση HTML5 και υποβαθμίζεται χαριτωμένα σε ένα κανονικό πεδίο εισαγωγής κειμένου σε παλαιότερα προγράμματα περιήγησης.</p> <p>Ακολουθεί ολόκληρη η σήμανση HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Απλή φόρμα σύνδεσης

  Σύνδεση
   ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ  
   Κωδικός πρόσβασης

     Και εδώ είναι μια προεπισκόπηση αυτού που έχουμε δημιουργήσει μέχρι στιγμής:
  
 2. Προσθήκη Βασικών Στυλ
 Δημιουργήστε ένα νέο αρχείο css που ονομάζεται master.css και προσθέστε ένα σύνδεσμο σε αυτό το αρχείο στο κύριο αρχείο HTML. Θα ξεκινήσουμε το αρχείο CSS με μια γρήγορη επαναφορά για να αποκτήσουμε ομοιομορφία σε διαφορετικά προγράμματα περιήγησης. Ας προσθέσουμε επίσης μια όμορφη εικόνα φόντου στη σελίδα μας. Η εικόνα που έχω χρησιμοποιήσει έχει ληφθεί από SubtlePatterns. Μπορείτε να περιηγηθείτε στον ιστότοπο για να βρείτε μια εικόνα φόντου που ταιριάζει στο γούστο σας. Μπορούμε να προσθέσουμε την εικόνα φόντου με τη βοήθεια της ακόλουθης δήλωσης. Σημειώστε επίσης ότι χρησιμοποιώ το Ανοίξτε το Sans γραμματοσειρά από τη γραμματοσειρά Google Web για το κείμενο κορμού.
  / * -------- Στυλ βάσης --------- * / body, html margin: 0; padding: 0;  σώμα background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") αριστερή αρχή επαναλάβετε. γραμματοσειρά: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap πλάτος: 400px; περιθώριο: 80px αυτόματα; 
 3. Εφέ στοιβάζονται-χαρτί
 Τώρα που έχουμε τη βασική διάταξη και λειτουργία, ας αρχίσουμε να σχεδιάζουμε τη φόρμα. Για την απόκτηση του αποτελέσματος στοιβάζονται χαρτιού, θα χρησιμοποιήσουμε το :μετά και :πριν ψευδο-στοιχεία. Αυτά τα ψευδο-στοιχεία χρησιμοποιούνται ως επί το πλείστον για την προσθήκη οπτικών εφέ σε οποιονδήποτε επιλογέα. 
 ο :πριν το ψευδο-στοιχείο χρησιμοποιείται για την προσθήκη περιεχομένου πριν από το περιεχόμενο του επιλογέα και το :μετά ψευδο-στοιχείο για μετά το περιεχόμενο ενός επιλογέα. 
 Θα ξεκινήσουμε δίνοντας στο τμήμα, με μια κατηγορία "στοιβάζονται", πλάτος 400px και ύψος 300px. Επιπλέον, θα δώσουμε σε αυτό το κουτί ένα χρώμα φόντου # f6f6f6 και ένα περίγραμμα πάχους 1 pixel με το χρώμα #bbb. Τα βασικά πράγματα που πρέπει να σημειώσουμε εδώ είναι η δήλωση ακτίνας ακριβείας και η δήλωση σκιάσης κουτιού. Εδώ, έχουν χρησιμοποιηθεί προθέματα προγράμματος περιήγησης "-moz-" και "-webkit-" για να εξασφαλιστεί ότι αυτό λειτουργεί σε προγράμματα περιήγησης που βασίζονται σε gecko και webkit. 
 Η δήλωση ακριβείας είναι πολύ απλή και χρησιμοποιείται για τη δημιουργία στρογγυλεμένων γωνιών, με 3px που αντιπροσωπεύουν την καμπυλότητα. Η σύνταξη για τη δήλωση σκιάς κουτιού μπορεί να φαίνεται περίπλοκη, αλλά ας το σπάσουμε σε μικρότερα κομμάτια για να την καταλάβουμε καλύτερα. 
  / * -------- Ακτίνα περιγράμματος --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px. ακτίνα ακτίνων: 3px; / * -------- Σκιά κουτιού --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-σκιά: 0 0 3px rgba (0,0,0, .2); σκιά κουτιού: 0 0 3px rgba (0,0,0, .2);
 Τα πρώτα δύο μηδενικά δείχνουν την εκτροπή x και την offset y και το 3px υποδηλώνει τη θολότητα. Στη συνέχεια, είναι η δήλωση χρώματος. Έχω χρησιμοποιήσει τις τιμές rgba εδώ. Το rgba σημαίνει κόκκινο πράσινο μπλε και άλφα (αδιαφάνεια). Έτσι οι 4 τιμές μέσα στην παρένθεση υποδεικνύουν την ποσότητα κόκκινου, πράσινου, μπλε και της άλφα (αδιαφάνειας).
  .στοιβάζονται background: # f6f6f6; σύνορα: 1px solid #bbb; ύψος: 300px; Περιθώριο: 50px αυτόματα. θέση: σχετική. πλάτος: 400px; -webkit-box-σκιά: 0 0 3px rgba (0,0,0, .2); -moz-box-σκιά: 0 0 3px rgba (0,0,0, .2); σκιά κουτιού: 0 0 3px rgba (0,0,0, .2); -webkit-ακτίνα-ακτίνα: 3px; -moz-border-radius: 3px. ακτίνα ακτίνων: 3px; 
 Τώρα που έχουμε δημιουργήσει το βασικό πλαίσιο οριοθέτησης για τη φόρμα, ας ξεκινήσουμε με το :μετά και :πριν ψευδο-στοιχεία. 
  .στοιβάζονται: μετά, αποθηκεύονται: πριν από το background: # f6f6f6; σύνορα: 1px στερεά # aaa; κάτω: -8px; Περιεχόμενο: "· ύψος: 250px · αριστερά: 2px · θέση: απόλυτο · πλάτος: 394px · z-index: -10 · -webkit-box-shadow: 0 0 3px rgba (0,0,0, moz-box-σκιά: 0 0 3px rgba (0,0,0, .2); σκιά κουτιού: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; moz-ακτίνα-ακτίνα: 3px · ακρίβεια περιθωρίου: 3px; .συγκρατείται: πριν από την κάτω: -14px · αριστερά: 5px · πλάτος: 388px · -webkit-ακτίνα-ακτίνα: 3px · -moz-border-radius: · ακτίνα περιθωρίου: 3px · -webkit-box-shadow: 0 0 15px rgba (0,0,0,0,5) · -moz-box-shadow: 0 0 15px rgba (0,0,0,0,5) · πλαίσιο -shadow: 0 0 15px rgba (0,0,0,0.5);
 Ο κώδικας για: μετά και: πριν από τα ψευδο-στοιχεία είναι σχεδόν ακριβώς παρόμοια με εκείνη του πλαισίου οριοθέτησης που συζητήθηκε παραπάνω. Το μόνο σημαντικό πράγμα που πρέπει να σημειωθεί εδώ είναι ότι αυτά τα ψευδο-στοιχεία είναι τοποθετημένα απολύτως σε σχέση με το κιβώτιο οριοθέτησης. Κάθε ένα από τα ψευδο-στοιχεία μειώνεται προοδευτικά από λίγα pixels για να του δώσει μια στοίβα από χαρτί.
 4. Πεδία εισαγωγής
 Στη σήμανση HTML προσθέσαμε μια τάξη "εισαγωγής κειμένου" τόσο στο πεδίο ηλεκτρονικού ταχυδρομείου όσο και στο πεδίο κωδικού πρόσβασης, ώστε να μπορούμε να στοχεύουμε εύκολα αυτά τα στοιχεία με τις δηλώσεις CSS. Ακολουθεί η δήλωση CSS που εφαρμόζεται και στα δύο πεδία εισαγωγής.
  μορφή input.text-input περίγραμμα: 0; εμφάνιση: μπλοκ? πλάτος: 330px; padding: 8px 15px; σύνορα: 1χλ. μέγεθος γραμματοσειράς: 16px; γραμματοσειράς-βάρος: 400; -webkit-ακτίνα-ακτίνα: 25px; -moz-border-radius: 25px; ακτίνα-ακτίνα: 25px; κουτί-σκιά: ένθετο 0 2px 8px rgba (0,0,0,0,3); 
 Εδώ, χρησιμοποιήσαμε και πάλι τις δηλώσεις σκιώδους ακτίνας και ακτινοβολίας κουτιού. Στην περίπτωση πεδίων κειμένου, η ακτίνα του πλαισίου δίνεται σε υψηλότερη τιμή για να εξασφαλιστεί μεγαλύτερη καμπυλότητα. Στην περίπτωση δήλωσης σκιάς κουτιού, το ένθετο λέξης-κλειδιού χρησιμοποιήθηκε για να καθορίσει ότι η σκιά θα βρίσκεται μέσα στο πεδίο κειμένου. Εδώ, η κάθετη μετατόπιση για τη σκιά είναι 2px και έχει θόλωση 8px, ενώ το χρώμα δηλώνεται χρησιμοποιώντας τη μορφή rgba.
 Για να προσθέσετε κάποια αλληλεπίδραση στα πεδία εισαγωγής, θα αλλάξουμε την ιδιότητα shadow box για το πεδίο εισαγωγής στην κατάσταση 'hover'. Η νέα δήλωση σκιάς κουτιού έχει αντισταθμίσεις μηδέν x και y αλλά έχει μια σκιά 5px, με το χρώμα να δηλώνεται σε μορφή rgba.
 5. Υποβάλετε τον Button
 Το τελευταίο τμήμα αυτής της φόρμας που πρέπει να συμπληρώσουμε είναι το κουμπί υποβολής. Παρόμοια με το πεδίο εισαγωγής, θα δώσουμε στο κουμπί υποβολής μια ακτίνα 25px χρησιμοποιώντας την ιδιότητα border-radius. Μια ιδιότητα σκιάς κουτιού με y-offset 1px έχει επίσης προστεθεί για να δώσει το κουμπί ένα “εσωτερική σκιά” αποτέλεσμα.
  μορφή εισόδου [type = 'υποβάλει']] float: δικαίωμα? συμπλήρωση: 10px 20px; εμφάνιση: μπλοκ? δρομέας: δείκτης; μέγεθος γραμματοσειράς: 16px; γραμματοσειράς-βάρος: 700; χρώμα: #fff; σκιά κειμένου: 0 1px 0 # 000; χρώμα φόντου: # 0074CC; σύνορα: 1px στερεά # 05C; -webkit-ακτίνα-ακτίνα: 25px; -moz-border-radius: 25px; ακτίνα-ακτίνα: 25px; εικόνα-φόντου: -moz-γραμμική-κλίση (κορυφή, # 08C, # 05C); εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, # 08C, # 05C). εικόνα-φόντου: -webkit-γραμμική κλίση (κορυφή, # 08C, # 05C). εικόνα φόντου: γραμμική κλίση (κορυφή, # 08C, # 05C). -webkit-box-σκιά: ένθετο 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-σκιά: ένθετο 0 1px 0px rgba (255, 255, 255, 0.5); κουτί-σκιά: ένθετο 0 1px 0px rgba (255, 255, 255, 0.5); 
 Το σημαντικό πράγμα που πρέπει να σημειωθεί εδώ είναι η δήλωση για την προσθήκη της κλίσης σε αυτό το κουμπί. Οι κλίσεις CSS3 είναι ένα αρκετά μεγάλο θέμα και μόνο το ξύσιμο της επιφάνειας. Για αυτό το κουμπί υποβολής, θα προσθέσουμε μια γραμμική κλίση που πηγαίνει από # 08C έως # 05C. Όπως συμβαίνει με όλες τις άλλες ιδιότητες CSS3 που έχουμε χρησιμοποιήσει μέχρι στιγμής, θα προσθέτουμε προθέματα προμηθευτών "-moz", "-webkit" και "-ms" για να βεβαιωθείτε ότι η κλίση λειτουργεί σε διαφορετικά προγράμματα περιήγησης.
 6. Επίδειξη και λήψη
 Η φόρμα σύνδεσής μας έχει ολοκληρωθεί. Ελέγξτε την επίδειξη για να δείτε πώς φαίνεται η συμπληρωμένη φόρμα. Εάν χάσετε σε οποιοδήποτε σημείο ή δεν μπορείτε να ακολουθήσετε το σεμινάριο, μην ανησυχείτε, απλώς κατεβάστε τα αρχεία στην επιφάνεια εργασίας σας και ξεκουραστείτε με τον υπάρχοντα κώδικα CSS για να καταλάβετε πώς λειτουργεί.
 Ελπίζω να απολαύσετε αυτό το σεμινάριο. Μπορείτε να πειραματιστείτε με αυτά τα χαρακτηριστικά και μην ξεχάσετε να μοιραστείτε τις σκέψεις σας.
 Διαδήλωση
 Λήψη αρχείων
 
Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη από Bharani M για το Hongkiat.com. Ο Bharani είναι σχεδιαστής / προγραμματιστής από το Νέο Δελχί της Ινδίας. Αυτή τη στιγμή εργάζεται στο Resumonk.com - ένας online οικοδόμος βιογραφικού που σας βοηθά να δημιουργήσετε ένα επαγγελματικό και όμορφο βιογραφικό μέσα σε λίγα λεπτά. Ελέγξτε επίσης το πλάι του έργου - Quotescube.com - την καθημερινή σας δόση προσφορών.