Παίρνουμε από εκεί που σταματήσαμε στο Video # 034 και συνεχίζουμε να χτίζουμε την περιοχή αναζήτησης.
Αυτή τη φορά εστιάζουμε στην «ανοιχτή» κατάσταση της αναζήτησης, δημιουργώντας τα ίδια τα πραγματικά στοιχεία φόρμας. Το ίδιο το πεδίο αναζήτησης χρησιμοποιεί τον τύπο στοιχείου φόρμας HTML5 «αναζήτηση» - ο οποίος συνήθως έχει κάποιο προσαρμοσμένο στυλ που σχετίζεται με αυτό, αλλά επειδή χρησιμοποιούμε Normalize (Βίντεο # 011), αυτό δεν αποτελεί πρόβλημα για εμάς.
Δημιουργούμε ένα νέο αρθρωτό κομμάτι CSS (_buttons.scss) για δική μας χρήση σε κουμπιά στυλ σε ολόκληρο τον ιστότοπο. Δείτε τι κάνουμε εκεί; Οποιοδήποτε κομμάτι στυλ που νοητικά έχει νόημα να απομονωθεί, δημιουργούμε ένα νέο αρχείο για. Μπορούμε να το κάνουμε όσο θέλουμε χωρίς να ανησυχούμε, γιατί τα αρχεία συνενώνονται όλα μαζί με τον Sass.
Η τρισδιάστατη εμφάνιση κουμπιών δημιουργείται μόνο από ένα πλήθος σκιών κουτιών διαχωρισμένων με κόμμα. Τα χρώματα είναι εύκολο να αλλάξουν, επειδή χρησιμοποιούνται (το μαντέψατε!) Μεταβλητές.
$bottomSide: #3852b1; $rightSide: #203891; .button, #rcp_submit ( border: 0; // kill default styling background: #4e68c7; box-shadow: // right side // bottom 1px 0px 1px $rightSide, 0px 1px 1px $bottomSide, 2px 1px 1px $rightSide, 1px 2px 1px $bottomSide, 3px 2px 1px $rightSide, 2px 3px 1px $bottomSide, 4px 3px 1px $rightSide, 3px 4px 1px $bottomSide, 5px 4px 1px $rightSide, 4px 5px 1px $bottomSide, 6px 5px 1px $rightSide; )Ακούμε το ίδιο στυλ στο στοιχείο εισαγωγής (μόνο στο εσωτερικό και όχι στο εξωτερικό), συμπληρώνοντας την τρισδιάστατη εμφάνιση. Το ποσό που αντισταθμίζονται οι σκιές αντιστοιχεί στη μεταβλητή $ offset, οδηγώντας σε κάποια συνέπεια στο σχεδιασμό.
Όχι σε αυτό το βίντεο, αλλά αργότερα, καταλαβαίνουμε ότι οι εσωτερικές σκιές στις εισόδους είναι πολύ πιο εύκολο να γίνουν με μόνο δύο περιγράμματα αντί για όλες τις σκιές (τα σύνορα συναντώνται μεταξύ τους υπό γωνία). Δυστυχώς δεν είναι δυνατό στο κουμπί.
Αυτό το στυλ εισαγωγής εισόδου καταλήγει σε όλα τα στυλ εισαγωγής σε ολόκληρο τον ιστότοπο, για καλύτερα ή χειρότερα.