Δημιουργία πλαισίου αναζήτησης Rocking CSS3
Το CSS3 είναι η γλώσσα φύλλου στυλ επόμενης γενιάς. Εισάγει πολλά νέα και συναρπαστικά χαρακτηριστικά όπως σκιές, κινούμενα σχέδια, μεταβάσεις, ακτίνα ακτίνων κ.λπ. Παρόλο που οι προδιαγραφές δεν έχουν ακόμη οριστικοποιηθεί, πολλοί κατασκευαστές προγραμμάτων περιήγησης έχουν ήδη αρχίσει να υποστηρίζουν πολλά από τα νέα χαρακτηριστικά.
Σε αυτό το σεμινάριο, θα διερευνήσουμε μερικά από αυτά τα χαρακτηριστικά όπως σκιά κειμένου, ακτίνα ακρόασης, κουτιά-σκιές και μεταβάσεις για να δημιουργήσετε ένα πεδίο αναζήτησης ταλάντευσης.
Η έκδοση του photoshop αυτού του πεδίου αναζήτησης δημιουργήθηκε από τον Alvin Thong και μπορεί να μεταφορτωθεί από εδώ. Προσπάθησα να δημιουργήσω αυτό το πεδίο αναζήτησης χρησιμοποιώντας καθαρό CSS3. Πρέπει να σημειωθεί ότι όχι όλα τα προγράμματα περιήγησης υποστηρίζουν τις λειτουργίες CSS3 και να δοκιμάσετε αυτό το σεμινάριο, θα πρέπει να χρησιμοποιήσετε ένα από τα σύγχρονα προγράμματα περιήγησης που υποστηρίζουν τις λειτουργίες CSS 3.
Ετοιμος? Ας αρχίσουμε!
1. HTML5 Doctype
Θα ξεκινήσουμε με τη σήμανση HTML. Είναι πολύ απλό, μετά το HTML5 doctype και το δήλωση, έχουμε ένα με κλήση ταυτότητας #περικάλυμμα μέσα . Αυτό γίνεται απλά για να ορίσετε το πλάτος του πλαισίου περιεχομένου και να το ευθυγραμμίσετε με το κέντρο της σελίδας.
Αυτό ακολουθείται από a Δείτε πώς φαίνεται ο κώδικας: Για να δημιουργήσετε το μεγάλο πλαίσιο γύρω από τη φόρμα, θα προσθέσουμε στυλ στο Το σημαντικό κομμάτι του κώδικα εδώ είναι το Εξήγηση: Εδώ, η ένδειξη λέξεων-κλειδιών καθορίζει εάν η σκιά θα είναι μέσα στο κουτί. Τα πρώτα δύο μηδενικά δείχνουν την εκτροπή x και την offset y και το 3px υποδηλώνει τη θολότητα. Στη συνέχεια, είναι η δήλωση χρώματος. Έχω χρησιμοποιήσει τις τιμές rgba εδώ. Το rgba σημαίνει κόκκινο πράσινο μπλε και άλφα (αδιαφάνεια). Έτσι οι 4 τιμές μέσα στην παρένθεση δείχνουν την ποσότητα του κόκκινου, του πράσινου, του μπλε και του άλφα (αδιαφάνεια). Θα παρατηρήσετε ότι 5 σύνολα δηλώσεων σκιών έχουν συσσωρευτεί μαζί. Αυτό μπορεί να γίνει με το διαχωρισμό τους με κόμμα. Οι δύο πρώτες σκιές καθορίζουν το λευκό αποτέλεσμα "εσωτερικής λάμψης" και οι επόμενες δηλώσεις δίνουν στο κουτί το στερεό / χοντρό βλέμμα του. Παίξτε γύρω με αυτές τις αξίες για να κατανοήσετε πώς λειτουργεί. Τώρα που το κουτί είναι πλήρες, αφήστε να προχωρήσετε στο styling του πεδίου εισαγωγής. Τα στυλ που δηλώνονται για το πεδίο εισαγωγής είναι αρκετά παρόμοια με αυτά που έχουν διακριθεί για το μεγάλο κουτί Εξήγηση: Θα παρατηρήσετε ότι αυτή τη φορά, η θολούρα σκιάς διατηρήθηκε στο 0 για να αποκτήσει μια απότομη σκιά και μια κάθετη μετατόπιση των 5px χρησιμοποιείται. Στις διαδοχικές δηλώσεις, ο θάμβος έχει διατηρηθεί σε 0px, αλλά το χρώμα και το y-offset έχουν αλλάξει. Και πάλι παίζετε με αυτές τις τιμές για να λάβετε διαφορετικά αποτελέσματα. Ας στυλίσουμε το κουμπί αναζήτησης. Εκτός από τα χρώματα, το κουμπί αναζήτησης έχει ως επί το πλείστον τα ίδια στυλ με εκείνο του εξωτερικού κουτιού. Παρόμοιες ακτίνες-ακτίνα και κουτιά-σκιές έχουν χρησιμοποιηθεί στο κουμπί. Το νέο χαρακτηριστικό που εισάγεται είναι το Εξήγηση: Στο Η ενεργή κατάσταση του κουμπιού έχει κάποιες αλλαγές. Σε αυτό, έχω δώσει το κουμπί μια θέση απόλυτη και μια «κορυφαία» τιμή των 5px. Αυτό έχει γίνει για να δώσει μια πιο φυσική εμφάνιση, έτσι ώστε να αισθάνεται ότι το κουμπί έχει πράγματι ωθηθεί κάτω από 5 εικονοστοιχεία. Άλλες αλλαγές στην ενεργή κατάσταση είναι εκείνες του χρώματος φόντου και των σκιών. Παρατηρήστε ότι έχω μειώσει το y-offset των σκιών για να του δώσω ένα «συμπιεσμένο» βλέμμα. Εδώ είναι ο κωδικός για την ενεργή κατάσταση του κουμπιού υποβολής: Αυτό συμπληρώνει το πεδίο αναζήτησης. Χρησιμοποιήσαμε αρκετά από τα νέα χαρακτηριστικά του CSS3. Εδώ είναι το πλήρες CSS και HTML αυτού του πεδίου αναζήτησης. Ελπίζω να απολαύσετε αυτό το σεμινάριο. Μπορείτε να πειραματιστείτε με αυτά τα χαρακτηριστικά και μην ξεχάσετε να μοιραστείτε τις σκέψεις σας. Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη από Bharani M για το Hongkiat.com. Ο Bharani είναι σχεδιαστής / προγραμματιστής από το Νέο Δελχί της Ινδίας.#κύριος. Αυτό το αναγνωριστικό περιέχει τα στυλ που καθορίζουν το μεγάλο λευκό πλαίσιο γύρω από το πεδίο εισαγωγής και το κουμπί αναζήτησης. Αυτό δήλωσε μέσα του. Το έντυπο έχει το πεδίο εισαγωγής κειμένου και τα sκουμπί κουμπιού. Ακολουθεί ο τρόπος εμφάνισης της φόρμας χωρίς εφαρμογή στυλ σε αυτήν: 
CSS3 Πεδίο αναζήτησης
2. Δημιουργία του πλαισίου οριοθέτησης
#κύριος. Από τον κώδικα που φαίνεται παρακάτω, θα παρατηρήσετε ότι το πλαίσιο έχει δοθεί πλάτος 400px και ύψος 50px. #main πλάτος: 400px; ύψος: 50px; φόντο: # f2f2f2; συμπλήρωση: 6px 10px; σύνορα: 1px στερεά # b5b5b5; -moz-ακτίνα-ακτίνα: 5px; -webkit-ακτίνα-ακτίνα: 5px; ακτίνα ακτίνων: 5px; -moz-box-σκιά: ένθετο 0 0 3px rgba (255, 255, 255, 0.8), ένθετο 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.8), ένθετο 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; (255, 255, 255, 1), 0 5px 0 # 0 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px; 0px 0px; 0px; "# 989898, 0px 0px 0px; dfdede;
ακτίνα ακρόασης δήλωση και το κουτί-σκιά δήλωση. Για τη δημιουργία στρογγυλεμένων γωνιών, χρησιμοποιήσαμε τη δήλωση CSS3 ακτίνας ακτίνας, έχουν χρησιμοποιηθεί προθέματα προγράμματος περιήγησης "-moz-" και "-webkit-" για να διασφαλιστεί ότι αυτό λειτουργεί σε προγράμματα περιήγησης που βασίζονται σε gecko και webkit. Οι δηλώσεις σκιών κουτιού μπορεί να φαίνονται λίγο συγκεχυμένες, αλλά είναι στην πραγματικότητα πολύ απλές. (255, 255, 255, 1), 0 5px 0 # 0 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px; 0px 0px; 0px; "# 989898, 0px 0px 0px; dfdede;
Προεπισκόπηση
3. Σχεδιασμός του πεδίου εισαγωγής
είσοδος [type = "text"] float: left? πλάτος: 230px; συμπλήρωση: 15px 5px 5px 5px; περιθώριο-κορυφή: 5px; περιθώριο-αριστερά: 3px. σύνορα: 1px στερεά # 999999; -moz-ακτίνα-ακτίνα: 5px; -webkit-ακτίνα-ακτίνα: 5px; ακτίνα ακτίνων: 5px; -moz-box-σκιά: ένθετο 0 5px 0 #ccc, ένθετο 0 6px 0 # 989898, ένθετο 0 13px 0 #dfdede; -webkit-box-shadow: ένθετο 0 5px 0 #ccc, ένθετο 0 6px 0 # 989898, ένθετο 0 13px 0 #dfdede; κουτί-σκιά: ένθετο 0 5px 0 #ccc, ένθετο 0 6px 0 # 989898, ένθετο 0 13px 0 #dfdede;
#κύριος. Έχουμε χρησιμοποιήσει την ίδια ακτίνα πλαισίου (5px). Και πάλι, πολλές σκιές κουτιού έχουν κλαπεί. κουτί-σκιά: ένθετο 0 5px 0 #ccc, ένθετο 0 6px 0 # 989898, ένθετο 0 13px 0 #dfdede;
Προεπισκόπηση
4. Σχεδίαση του κουμπιού υποβολής
είσοδος [type = "υποβάλει"] solid float: left? δρομέας: δείκτης; πλάτος: 130px; padding: 8px 6px; περιθώριο-αριστερά: 20px; φόντο-χρώμα: # f8b838; χρώμα: rgba (134, 79, 11, 0.8). κείμενο-μετασχηματισμός: κεφαλαία? γραμματοσειρά-βάρος: έντονα. σύνορα: 1px στερεά # 99631d; -moz-ακτίνα-ακτίνα: 5px; -webkit-ακτίνα-ακτίνα: 5px; ακτίνα ακτίνων: 5px; κείμενο-σκιά: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0px 0 # 593a11, 0 13px 0 #ccc; box-σκιά: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, ccc; -webkit-transition: background 0,2s ease-out?
σκιά κειμένου. κείμενο-σκιά: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
σκιά κειμένου , οι τρεις πρώτες αριθμητικές τιμές είναι οι x-offset, y-offset και η θολούρα αντίστοιχα. Οι τιμές rgba υποδεικνύουν το χρώμα της σκιάς. Στο επόμενο σύνολο δήλωσης (διαχωριζόμενου με κόμμα), η γ-μετατόπιση δίνεται σε -1. Αυτό γίνεται για να δώσει το κείμενο ένα “εσωτερική σκιά” αποτέλεσμα. Η κατάσταση μετακίνησης / εστίασης του κουμπιού υποβολής έχει διαφορετικές τιμές χρώματος φόντου και σκιές. Προεπισκόπηση
Κατάσταση "ενεργού" για το κουμπί
είσοδος [type = "υποβάλω"] solid: active background: # f6a000; θέση: σχετική. κορυφή: 5px; σύνορα: 1px στερεά # 702d00; -moz-box-σκιά: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-σκιά: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, ccc;
Ο πλήρης κώδικας (CSS)
#main πλάτος: 400px; ύψος: 50px; φόντο: # f2f2f2; συμπλήρωση: 6px 10px; σύνορα: 1px στερεά # b5b5b5; -moz-ακτίνα-ακτίνα: 5px; -webkit-ακτίνα-ακτίνα: 5px; ακτίνα ακτίνων: 5px; -moz-box-σκιά: ένθετο 0 0 3px rgba (255, 255, 255, 0.8), ένθετο 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.8), ένθετο 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 # ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; (255, 255, 255, 1), 0 5px 0 # 0 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px; 0px 0px; 0px; "# 989898, 0px 0px 0px; dfdede; είσοδος [type = "text"] float: αριστερά; πλάτος: 230px; συμπλήρωση: 15px 5px 5px 5px; περιθώριο-κορυφή: 5px; περιθώριο-αριστερά: 3px. σύνορα: 1px στερεά # 999999; -moz-ακτίνα-ακτίνα: 5px; -webkit-ακτίνα-ακτίνα: 5px; ακτίνα ακτίνων: 5px; -moz-box-σκιά: ένθετο 0 5px 0 #ccc, ένθετο 0 6px 0 # 989898, ένθετο 0 13px 0 #dfdede; -webkit-box-shadow: ένθετο 0 5px 0 #ccc, ένθετο 0 6px 0 # 989898, ένθετο 0 13px 0 #dfdede; κουτί-σκιά: ένθετο 0 5px 0 #ccc, ένθετο 0 6px 0 # 989898, ένθετο 0 13px 0 #dfdede; είσοδος [type = "υποβάλω"] solid float: left? δρομέας: δείκτης; πλάτος: 130px; padding: 8px 6px; περιθώριο-αριστερά: 20px; φόντο-χρώμα: # f8b838; χρώμα: rgba (134, 79, 11, 0.8). κείμενο-μετασχηματισμός: κεφαλαία? γραμματοσειρά-βάρος: έντονα. σύνορα: 1px στερεά # 99631d; -moz-ακτίνα-ακτίνα: 5px; -webkit-ακτίνα-ακτίνα: 5px; ακτίνα ακτίνων: 5px; κείμενο-σκιά: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0px 0 # 593a11, 0 13px 0 #ccc; box-σκιά: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, ccc; -webkit-transition: background 0,2s ease-out? solid: hover, input [type = "submit"] solid: focus background: # ffd842; -moz-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.9), ένθετο 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.9), εισαγωγή 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.9), ένθετο 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; είσοδος [type = "υποβάλω"] solid: active background: # f6a000; θέση: σχετική. κορυφή: 5px; σύνορα: 1px στερεά # 702d00; -moz-box-σκιά: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-σκιά: ένθετο 0 0 3px rgba (255, 255, 255, 0.6), ένθετο 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, ccc;
