10 Τεχνικές Δημιουργικής Χρήσης Χρησιμοποιώντας σκιά κουτιού CSS3

Έχουμε δει έναν τεράστιο αριθμό προόδων στην ανάπτυξη ιστού CSS3 μόνο τα τελευταία χρόνια. Δημοφιλείς ιστοσελίδες σε όλο το Διαδίκτυο έχουν αρχίσει να ενσωματώνουν πολλά μοναδικά στυλ όπως στρογγυλεμένες γωνίες και ερωτήματα μέσων που ανταποκρίνονται στα κινητά. Αλλά ακόμα πιο σημαντικό, αυτό άνοιξε την πόρτα για να δημιουργηθούν πρωτότυπες δημιουργικές διεπαφές μέσα σε λίγα λεπτά.

Σε αυτό το άρθρο θέλω να μοιραστώ 10 αποσπάσματα κώδικα που σχετίζονται με λαμπρά σχέδια σκιάς κουτιού CSS3. Θα σας εξηγήσω πώς λειτουργεί ο κώδικας και πώς μπορείτε να εφαρμόσετε κάθε σκιά κουτιού στον δικό σας ιστότοπο.

Αυτά τα στυλ όλα αποδίδονται στην εξαιρετική σχεδιαστική επιρροή από άλλους δημοφιλείς ιστότοπους. Αυτό είναι ένα εξαιρετικό παράδειγμα για το πώς οι σημερινοί προγραμματιστές ιστοσελίδων χτίζουν αντίκτυπου τάσεις για το μέλλον του web design.

1. Σταθερή κορυφαία γραμμή εργαλείων

Η ρουμανική υπηρεσία κοινωνικών μέσων ενημέρωσης Trilulilu χρησιμοποιεί μια κυμαινόμενη γραμμή εργαλείων πάνω από ολόκληρη την ιστοσελίδα τους. Αυτό μπορεί να δημιουργηθεί γρήγορα χρησιμοποιώντας ένα θέση: σταθερή. ιδιοκτησίας σε οποιοδήποτε στοιχείο κορυφαίας γραμμής. Αλλά αυτή η πρόσθετη σκιά κουτιού παίρνει το αποτέλεσμα σε ένα εντελώς νέο επίπεδο.

#banner θέση: σταθερό; ύψος: 60px; πλάτος: 100%. αρχή: 0; αριστερά: 0; Συνοριακό: κορυφή 5px # a1cb2f; background: #fff; -moz-box-σκιά: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); κουτί-σκιά: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z-δείκτης: 999999;  #banner h1 γραμμής-ύψος: 60px;

Θα παρατηρήσετε ότι η ιδιότητα σκιάς κουτιού είναι πραγματικά ρυθμισμένη με έναν αρκετά απλό συνδυασμό τιμών. Η σκιά θα πέσει κάτω από το κιβώτιο και θα σβήσει με 3px εκατέρωθεν.

Μπορούμε να χρησιμοποιήσουμε το rgba () μέθοδος για την εφαρμογή ελαφριάς αδιαφάνειας στη σκιά, έτσι ώστε το στοιχείο να μην φαίνεται πολύ σκοτεινό. Είναι μια λεπτή προσθήκη που σίγουρα θα τραβήξει την προσοχή του επισκέπτη σας.

Διαδήλωση

2. Διάλυση υπο-πλοήγησης

Εδώ είναι μια άλλη δημιουργική μέθοδος σκιά κουτί που εφαρμόζεται σε ένα scalar αναπτυσσόμενο υπομενού. Παρόμοιο φαινόμενο μπορεί να παρατηρηθεί στον Επιχειρηματία καθώς περνάτε πάνω από κάθε μία από τις κορυφαίες κύριες συνδέσεις πλοήγησης. Αυτό είναι σίγουρα λίγο πιο δύσκολο να ρυθμίσετε αλλά αξίζει την υπομονή.

#bar εμφάνιση: μπλοκ? ύψος: 45px; φόντο: # 22385a; padding-top: 5px; περιθώριο-κάτω: 150px; θέση: σχετική.  #bar ul margin: 0px 15px; γραμματοσειρά-οικογένεια: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li φόντο: # 22385α; εμφάνιση: μπλοκ? μέγεθος γραμματοσειράς: 1.2em; θέση: σχετική. float: αριστερά.  #bar ul li a εμφάνιση: μπλοκ? χρώμα: # fffff7; γραμμή-ύψος: 45px; γραμματοσειρά-βάρος: έντονα. συμπλήρωση: 0px 10px; κείμενο-διακόσμηση: κανένα? z-δείκτης: 9999;  #bar ul li a: hover, #bar ul li a.selected χρώμα: # 365977; background: #fff; κορυφή-αριστερά-ακτίνα: 3px. κορυφή-δεξιά-ακτίνα: 3px; -webkit-περίγραμμα-κορυφή-αριστερά-ακτίνα: 3px; -webkit-όριο-κορυφή-δεξιά-ακτίνα: 3px; -moz-border-ακτίνα-topleft: 3px; -moz-border-ακτίνα-topright: 3px;  #bar ul .subnav εμφάνιση: μπλοκ? αριστερά: 14px; κορυφή: 48px; z-δείκτης: -1. πλάτος: 500px; θέση: απόλυτη; ύψος: 90px; σύνορα: 1px στερεά # edf0f3; συνοριακή κορυφή: 0; συμπλήρωση: 10px 0 10px 10px; υπερχείλιση: κρυφή; -moz-border-radius-bottomleft: 3px. -moz-border-radius-bottomleft: 3px. -webkit-περίγραμμα-κάτω-αριστερά-ακτίνα: 3px; -webkit-περίγραμμα-κάτω-δεξιά-ακτίνα: 3px; όριο-κάτω-δεξιά-ακτίνα: 3px; όριο-κάτω-δεξιά-ακτίνα: 3px; -moz-box-σκιά: 0px 2px 7px rgba (0,0,0,0,25); -webkit-box-σκιά: 0px 2px 7px rgba (0,0,0,0,25); κουτί-σκιά: 0px 2px 7px rgba (0,0,0,0,25); -ms-φίλτρο: "progid: DXImageTransform.Microsoft.Shadow (Αντοχή = 3, Κατεύθυνση = 180, Χρώμα =" # 333333 ")"? φίλτρο: progid: DXImageTransform.Microsoft.Shadow (Αντοχή = 3, Κατεύθυνση = 180, Χρώμα = "# 333333");

Οι nav συνδέσεις μπορούν να σχεδιαστούν για να αλλάξετε το χρώμα όταν επιλεγεί ή πάνω στο ποντίκι. Προσθέτω επίσης μερικά στρογγυλεμένα σύνορα στους συνδέσμους και πάνω από το αναπτυσσόμενο πλαίσιο μενού. Αυτό δίνει μια ωραιότερη αίσθηση παρά σκληρές άκρες παντού. Χρησιμοποιώ επίσης καλά την -ms-φίλτρο και φίλτρο ιδιότητες οι οποίες είναι αποκλειστικές ιδιότητες του Internet Explorer.

Εάν ρυθμίσετε ένα πλήρες σύστημα πλοήγησης, θα μπορείτε να αλλάξετε τη ρύθμιση οθόνης σε καμία και να αποκρύψετε το μενού μόλις φορτωθεί η σελίδα. Στη συνέχεια, χρησιμοποιώντας κάποιο jQuery, μπορείτε να στοχεύσετε το συμβάν .hover () και να εμφανίσετε τη γραμμή subnav με ενημερωμένο περιεχόμενο.

Διαδήλωση

3. Γυαλιστερό κουμπί σκιάσης

Αυτό είναι ίσως ένα από τα αγαπημένα μου στυλ για να δημιουργώ μόνο εξαιτίας του πόσο δυναμική εμφανίζεται στη σελίδα. Αν δεν μπορείτε να πείτε, αυτό είναι το μικρό μπλε κουμπί που βρίσκεται στην αρχική σελίδα του YouTube μετά την πρώτη σύνδεσή σας.

μπλουζ χρώμα: #fff; πλάτος: 190px; ύψος: 35px; δρομέας: δείκτης; γραμματοσειρά-οικογένεια: Arial, Tahoma, sans-serif; μέγεθος γραμματοσειράς: 1.0em; γραμματοσειρά-βάρος: έντονα. -moz-border-radius: 2px; -webkit-ακτίνα-ακτίνα: 2px; ακτίνα ακτίνων: 2px; πλάτος συνόρου: 1px; Χρώμα περιγράμματος: # 0053a6 # 0053a6 # 000; φόντο-χρώμα: # 6891e7; εικόνα φόντου: -moz-γραμμική-κλίση (κορυφή, # 4495e7 0, # 0053a6 100%). εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, # 4495e7 0, # 0053a6 100%). εικόνα-φόντου: -ο-γραμμική-κλίση (κορυφή, # 4495e7 0, # 0053a6 100%). Εικόνα φόντου: -Βαθμονόμηση ιστού (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, έγχρωμη διακοπή (0, # 4495e7), έγχρωμη διακοπή (100%, # 0053a6)). εικόνα φόντου: -webkit-γραμμική κλίση (κορυφή, # 4495e7 0, # 0053a6 100%). εικόνα φόντου: γραμμική κλίση (στο κάτω μέρος, # 4495e7 0, # 0053a6 100%). σκιά κειμένου: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-σκιά: ένθετο 0 1px 0 rgba (256, 256, 256, .35); -ms-box-σκιά: ένθετο 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-σκιά: ένθετο 0 1px 0 rgba (256, 256, 256, .35); κουτί-σκιά: ένθετο 0 1px 0 rgba (256, 256, 256, .35); φίλτρο: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6).  .blues: αιώρηση border-color: # 002d59 # 002d59 # 000; -moz-box-σκιά: ένθετο 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-σκιά: ένθετο 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: ένθετο 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); box-σκιά: ένθετο 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); φίλτρο: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6). εικόνα φόντου: -moz-γραμμική κλίση (κορυφή, # 3a8cdf 0, # 0053a6 100%). εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, # 3a8cdf 0, # 0053a6 100%). εικόνα-φόντου: -ο-γραμμική κλίση (κορυφή, # 3a8cdf 0, # 0053a6 100%). Εικόνα φόντου: -Μετατροπή ιστού (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, έγχρωμη διακοπή (0, # 3a8cdf), έγχρωμη διακοπή (100%, # 0053a6)). εικόνα-φόντου: -webkit-γραμμική κλίση (κορυφή, # 3a8cdf 0, # 0053a6 100%). εικόνα φόντου: γραμμική κλίση (στο κάτω μέρος, # 3a8cdf 0, # 0053a6 100%).  .blues: ενεργό border-color: # 000 # 002d59 # 002d59; -moz-box-σκιά: ένθετο 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -ms-box-σκιά: ένθετο 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -webkit-box-shadow: ένθετο 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; κουτί-σκιά: ένθετο 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; φίλτρο: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6). εικόνα φόντου: -moz-γραμμική-κλίση (κορυφή, # 005ab4 0, # 175ea6 100%); εικόνα-φόντου: -ms-γραμμική κλίση (κορυφή, # 005ab4 0, # 175ea6 100%). εικόνα-φόντου: -ο-γραμμική-κλίση (κορυφή, # 005ab4 0, # 175ea6 100%). Εικόνα φόντου: -Βαθμονόμηση ιστού (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, έγχρωμη διακοπή (0, # 005ab4), έγχρωμη διακοπή (100%, # 175ea6)). εικόνα φόντου: -webkit-γραμμική κλίση (κορυφή, # 005ab4 0, # 175ea6 100%). εικόνα φόντου: γραμμική κλίση (προς τα κάτω, # 005ab4 0, # 175ea6 100%).

Ολόκληρος ο κώδικας κουμπιών είναι πολύς για να εξετάσουμε, αλλά προσπαθούμε για να υποστηρίξετε όσο το δυνατόν περισσότερους browsers. Υπάρχουν σκιές κειμένου και σκιές κουτιών με συνοδευτική υποστήριξη για τον MS Internet Explorer 7+. Επίσης θέτουμε το εικόνα φόντου ιδιοκτησίας με κλίσεις CSS3 σε μεγάλο αριθμό προθεμάτων συγκεκριμένου πωλητή.

Αλλά αν σας αρέσει αυτό το στυλ σχεδιασμού τότε το τα αιωρούμενα και ενεργά κράτη θα προσελκύσουν επίσης την προσοχή σας. Βασικά ενημερώνουμε τα σύνορα για να συμπεριλάβουμε κάποιες σκιές στο εσωτερικό καθώς πιέζουμε προς τα κάτω, ενώ ενημερώνουμε την κλίση του φόντου για να δείχνουμε λίγο πιο σκούρα.

Δεδομένου ότι δεν υπάρχουν εικόνες στο κουμπί μπορείτε να ενημερώσετε τις τιμές hex και να μεταμορφώσετε αυτό το μείγμα σε σχεδόν οποιοδήποτε σχέδιο χρώματος.

Διαδήλωση

4. Ειδοποιήσεις Flyout Menu

Δεν είμαι μεγάλος χρήστης του Facebook, αλλά έχω παρατηρήσει ορισμένες τεχνικές UI από τους επανασχεδιασμούς τους. Αυτό το μενού flyout μπορεί να συγκριθεί με τις ειδοποιήσεις σας ή το popup των αιτημάτων φίλων που βρέθηκαν στην αρχική σελίδα.

.flyout width: 310px; περιθώριο-κορυφή: 10px; μέγεθος γραμματοσειράς: 11px; θέση: σχετική. οικογένεια γραμματοσειράς: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif. φόντο-χρώμα: άσπρο; padding: 9px 11px; υπόβαθρο: rgba (255, 255, 255, 0.9). σύνορα: 1px στερεά # c5c5c5; -webkit-box-σκιά: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-σκιά: 0 3px 8px rgba (0, 0, 0, .25); κουτί-σκιά: 0 3px 8px rgba (0, 0, 0, .25); -webkit-ακτίνα-ακτίνα: 3px; -moz-border-radius: 3px. ακτίνα ακτίνων: 3px;  .flyout #tip φόντο-εικόνα: url ('images / tip.png'); αναπαράσταση φόντου: όχι-επανάληψη μέγεθος φόντου: αυτόματη; ύψος: 11px; θέση: απόλυτη; κορυφή: -11px; αριστερά: 25px; πλάτος: 20px;  .flyout h2 κείμενο-μετασχηματισμός: κεφαλαία; χρώμα: # 666; μέγεθος γραμματοσειράς: 1.2em; padding-bottom: 5px; περιθώριο-κάτω: 12px; σύνορα-κάτω: 1px στερεά #dcdbda; . Πατήστε p padding-bottom: 25px; μέγεθος γραμματοσειράς: 1.1em; χρώμα: # 222;

Δεν υπάρχει αρκετός νέος κώδικας για να εμφανιστεί εδώ. Χρησιμοποιώ ένα μικρό .υπόδειξη class με εσωτερικό στοιχείο span για να προσθέσετε το τρίγωνο εργαλείων. Είναι δυνατόν να δημιουργήσετε καθαρά τρίγωνα CSS3 αλλά αυτή η μέθοδος δεν είναι εύκολη, όπως ίσως φανταστείτε. Εάν προτιμάτε αυτή τη μέθοδο, ίσως αξίζει να χάσετε κάτι μαζί. Αλλά οι ιδιότητες περιστροφής CSS3 δεν υποστηρίζονται παντού. Εν τω μεταξύ, οι εικόνες δεν απαιτούν κάποια μέθοδο εναλλαγής.

Διαδήλωση

5. Περιτύλιξη σελίδας της Apple

Υπάρχουν τόσες πολλές εντυπωσιακές σκιές κουτιού CSS3 που μπορείτε να βρείτε στην επίσημη ιστοσελίδα της Apple. Αυτό το παρακάτω παράδειγμα είναι ένα μικρό κιβώτιο κιβωτίου με λίγα διαστήματα στήλης. Όταν κοιτάζετε πάνω από τη διάταξη της Apple θα παρατηρήσετε πολλές από τις σελίδες τους που αποτελούνται από πολλά κιβώτια περιτυλίγματος.

.applewrap πλάτος: 100%; εμφάνιση: μπλοκ? ύψος: 150px; φόντο: λευκό? σύνορα: 1px στερεά? border-color: # e5e5e5 # dbdbdb # d2d2d2; -webkit-ακτίνα-ακτίνα: 4px; -moz-ακτίνα-ακτίνα: 4px; ακτίνα ακτίνας: 4px; -webkit-box-σκιά: rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-box-σκιά: rgba (0,0,0,0,3) 0 1px 3px; σκιά κουτιού: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: αριστερά. μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? πλάτος: 250px; ύψος: 150px; συμπλήρωση: 16px 7px 6px 22px; γραμματοσειρά: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; χρώμα: # 343434; σύνορα-δεξιά: 1px solid #dadada;

Θα μπορούσατε να δημιουργήσετε μια παρόμοια σελίδα χωρισμένη από κουτιά περιεχομένου διαφόρων διαστάσεων και πλάτους. Αν και έχω βάλει μερικές στήλες σε αυτό το demo δεν είναι μια απαραίτητη τεχνική μορφοποίησης με κανένα τρόπο. Η σκιά κουτιού θα ταιριάζει καλύτερα σε λευκό / γκρι φόντο. Αλλά νομίζω ότι η εμφάνιση πάνω σε οποιοδήποτε ανοιχτό χρώμα θα φαινόταν αρκετά καλή.

Διαδήλωση

6. Περιεχόμενο της Apple

Αυτό το άλλο στυλ κουτιού περιεχομένου στην ιστοσελίδα της Apple χρησιμοποιείται κυρίως για σχέδια στηλών. Αυτά είναι κατά κύριο λόγο στο κάτω μέρος της σελίδας παρουσιάζοντας συμφωνίες και άλλες συναφείς πληροφορίες. Είναι ένα τελείως διαφορετικό στυλ σχεδιασμού με τη σκιά κιβωτίου να εμφανίζεται μέσα από την κορυφή προς τα κάτω.

.applebox πλάτος: auto; ύψος: 85px; μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? φόντο: # f5f5f5; συμπλήρωση: 20px 20px 10px; περιθώριο: 10px 0 20px; σύνορα: 1px στερεά # ccc; ακτίνα ακτίνας: 4px; -webkit-ακτίνα-ακτίνα: 4px; -moz-ακτίνα-ακτίνα: 4px; -ο-ακτίνα-ακτίνα: 4px; -webkit-box-shadow: ένθετο 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-σκιά: ένθετο 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: ένθετο 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col πλάτος: 140px; float: αριστερά. περιθώριο: 0 0 0 30px;

Δεν νομίζω ότι αυτός ο κώδικας θα πρέπει να είναι πολύ δύσκολο να ακολουθηθεί και να αντιγραφεί σε άλλο container div. Το μόνο κουτί-σκιά που εφαρμόζουμε χρησιμοποιεί ένθεση με τους αλφα διαφανείς κωδικούς χρώματος rgba. Έτσι, παρόλο που έχουμε τη σκιά σταγόνας σε καθαρό μαύρο, εμφανίζουμε μόνο περίπου αδιαφάνεια 30%.

Διαδήλωση

7. Προτεινόμενοι σύνδεσμοι

Αυτό είναι ίσως το αγαπημένο μου στυλ στυλ στυλ από την τρέχουσα ιστοσελίδα της Apple. Θα πρέπει να βρείτε ένα ζωντανό στυλ επίδειξης αυτής της τεχνικής στη σελίδα iCloud με μια σειρά κιβωτίων πλωτής σύνδεσης.

.applefeature ύψος: 150px; περιθώριο: 8px; κατακόρυφη ευθυγράμμιση: κορυφή. εμφάνιση: inline-block  .applefeature α εμφάνιση: μπλοκ? πλάτος: 168px; ύψος: 140px; σύνορα: 1px στερεά # ccc; χρώμα: # 333; κείμενο-διακόσμηση: κανένα? γραμματοσειρά-βάρος: έντονα. ύψος γραμμής: 1.3εμ. φόντο: # f7f7f7; -webkit-box-σκιά: ένθετο 0 1px 2px rgba (0, 0, 0, .3); -moz-box-σκιά: ένθετο 0 1px 2px rgba (0, 0, 0, .3); κουτί-σκιά: ένθετο 0 1px 2px rgba (0, 0, 0, .3); -webkit-ακτίνα-ακτίνα: 4px; -moz-ακτίνα-ακτίνα: 4px; ακτίνα ακτίνας: 4px;  .applefeature α: περάστε background: #fafafa; υπόβαθρο: -webkit-gradient (γραμμική, 0% 0%, 0% 100%, από (#fff) έως (# f7f7f7)). υπόβαθρο: -moz-γραμμική κλίση (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-σκιά: ένθετο 0 1px 2px rgba (0,0,0, .3); -moz-box-σκιά: ένθετο 0 1px 2px rgba (0,0,0, .3); κουτί-σκιά: ένθετο 0 1px 2px rgba (0,0,0, .3); -webkit-ακτίνα-ακτίνα: 4px; -moz-ακτίνα-ακτίνα: 4px; ακτίνα ακτίνας: 4px;  .applefeature a img εμφάνιση: μπλοκ; περιθώριο: 26px αυτόματο 4px;  .applefeature ένα h4 εμφάνιση: μπλοκ? πλάτος: 160px; μέγεθος γραμματοσειράς: 1.3em; γραμματοσειρά-οικογένεια: Arial, Tahoma, sans-serif; χρώμα: # 646464; κείμενο-ευθυγράμμιση: κέντρο;

Αυτοί οι χαρακτηρισμένοι σύνδεσμοι έχουν ορισμένο πλάτος και περιλαμβάνουν ένα ξεχωριστό εικονίδιο και κείμενο. Το παράδειγμα της Apple χρησιμοποιεί παρόμοια σκιά κουτιού όπως είδαμε στο προηγούμενο πλαίσιο περιεχομένου. Ωστόσο ολόκληρο το κουτί μπορεί τώρα να ενεργοποιηθεί ως σύνδεσμος που περιλαμβάνει και το :φτερουγίζω και :ενεργός κράτη μέλη. Υπάρχει μεγάλη ευελιξία με αυτό το πλαίσιο σύνδεσης και θα πρέπει να προσπαθήσετε να παίξετε με τον πηγαίο κώδικα.

Είναι δυνατό να συντομεύσετε το ύψος / πλάτος και να δημιουργήσετε μια πολύ μικρότερη λίστα συνδέσμων. Αυτά θα μπορούσαν να είναι ένα σύνολο κεφαλαίων ή σελίδων σε ένα άρθρο ή θα μπορούσατε να περιορίσετε ένα δευτερεύον μενού με εικονίδια συνδέσμων. Είναι ειλικρινά ένα μεγάλο σύνολο νεώτερων τεχνικών CSS3 που δείχνουν πόση δύναμη έχετε ως σχεδιαστής ιστοσελίδων.

Διαδήλωση

8. Κορνίζες εικόνων

Έχω προσθέσει ένα γκρίζο φόντο σε αυτό το παράδειγμα, έτσι ώστε να μπορείτε να δείτε τα στυλ σκιά κουτί πιο καθαρά. Αυτό το πλαίσιο είναι παρόμοιο με τις προτεινόμενες λήψεις προεπισκόπησης στο wordpress.com εκτός από το ότι έχω προσθέσει λίγο περισσότερο βάθος στον πηγαίο κώδικα.

.wpframe φόντο: #fff; ακτίνα ακτίνων: 2px; -webkit-ακτίνα-ακτίνα: 2px; -moz-border-radius: 2px; padding: 8px; -webkit-box-σκιά: 1px 2px 1px # d1d1d1; -moz-box-σκιά: 1px 2px 1px # d1d1d1; σκιά κουτιού: 1px 2px 1px # d1d1d1;

Δεδομένου ότι οι εικόνες έχουν ένα μικρό παραπέτασμα σε κάθε πλευρά, αυτό το πλαίσιο εμφανίζεται ως ένα μεγάλο λευκό περίγραμμα. Μπορείτε πάντα να ενημερώσετε το χρώμα φόντου ή ακόμα και να προσθέσετε ένα μικρό εξωτερικό περίγραμμα για να διαχωρίσετε την εικόνα από το φόντο. Αλλά αυτό το αρκετά απλοϊκό σύνολο στυλ μπορεί να περιστραφεί σε διάφορες τεχνικές σκιάς κουτιού. Παίξτε γύρω με τον κώδικα και δείτε πώς μπορείτε να βελτιώσετε τα σχέδια εικόνων στον δικό σας ιστότοπο.

Διαδήλωση

9. Φωτεινά πεδία εισόδου

Πήρα αυτή την ιδέα αφού επισκέφθηκα τη σελίδα σύνδεσης Pinterest μερικές φορές. Τα κινούμενα στυλ τους δείχνουν πραγματικά μερικά εύγλωττα παραδείγματα πολλαπλών inline κουτιών σκιές, τόσο έξω όσο και ένθετα.

.formwrap εμφάνιση: μπλοκ; περιθώριο-κάτω: 15px; . ετικέτα φορμαρίσματος εμφάνιση: inline-block; πλάτος: 80px; μέγεθος γραμματοσειράς: 11px; γραμματοσειρά-βάρος: έντονα. χρώμα: # 444; γραμματοσειρά-οικογένεια: Arial, Tahoma, sans-serif;  .formwrap .shadowfield θέση: σχετική; πλάτος: 250px; μέγεθος γραμματοσειράς: 17px; οικογένεια γραμματοσειράς: "Helvetica Neue", Arial, sans-serif; γραμματοσειρά-βάρος: κανονική. φόντο: # f7f8f8; χρώμα: # 7c7c7c; ύψος γραμμής: 1,4; padding: 6px 12px; περίγραμμα: κανένας. μετάβαση: όλα τα 0.2s easy-in-out 0s? -webkit-transition: όλα 0.2s easy-in-out 0s; -moz-transition: όλα 0.2s easy-in-out 0s; σύνορα: 1px solid # ad9c9c; ακτίνα-ακτίνα: 6px 6px 6px 6px; κουτί-σκιά: 0 1px rgba (34, 25, 25, 0,2) ένθετο, 0 1px #fff;  .formwrap .shadowfield: εστίαση χρώμα περιγράμματος: # 930; background: #fff; χρώμα: # 5d5d5d; box-shadow: ένθετο 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -moz-box-σκιά: ένθετο 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 0 7px rgba (235,82,82,5); -webkit-box-shadow: ένθετο 0 1px rgba (34, 25, 25, 0,2), 0 1px rgba (255, 255, 255, 0,6), 0 0 7px rgba (235,82,82,5);

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

Ακόμη και η αντιγραφή ενός από αυτά τα εφέ θα βελτιώσει σημαντικά την εμπειρία των χρηστών στα πεδία φόρμας. Βεβαιωθείτε ότι δεν πάτε πολύ μακριά από το πλοίο μέχρι το σημείο όπου οι φόρμες σας είναι μόλις χρησιμοποιήσιμες. Ωστόσο, οι περισσότεροι επισκέπτες θα απολαύσουν τα ευχάριστα αισθητικά αποτελέσματα, τα οποία ενθαρρύνουν επίσης την αλληλεπίδραση και την περαιτέρω συμμετοχή στον ιστότοπό σας.

Διαδήλωση

10. Ελαστικά κουμπιά σκιάς

Αυτά τα μοναδικά κουμπιά σκιάς είναι σχεδιασμένα με αργή μετάβαση κατά τη διάρκεια της κράτησης και των ενεργών καταστάσεων. Μπορείτε να βρείτε παρόμοια παραδείγματα στην αρχική σελίδα του Mozilla με τα μεγάλα τους “Κάντε λήψη του Firefox” κουμπί. Κάποια από τα κουτί-σκιά οι ιδιότητες συνδυάζουν πραγματικά τρεις διαφορετικές σκιές σε μία εντολή.

.blu-btn εμφάνιση: inline-block; -moz-border-radius: .25em; ακτίνα: .25em; -webkit-box-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,2); κουτί-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,2); φόντο-χρώμα: # 276195; εικόνα-φόντου: -moz-linear-gradient (# 3c88cc, # 276195)? εικόνα φόντου: -ms-γραμμική κλίση (# 3c88cc, # 276195). Εικόνα φόντου: -Βαθμονόμηση ιστού (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, έγχρωμη διακοπή (0%, # 3c88cc), έγχρωμη διακοπή (100%, # 276195)). εικόνα-φόντου: -webkit-γραμμική κλίση (# 3c88cc, # 276195); εικόνα-φόντου: -ο-γραμμική-κλίση (# 3c88cc, # 276195); φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0). -ms-φίλτρο: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; εικόνα φόντου: γραμμική κλίση (# 3c88cc, # 276195); σύνορα: 0; δρομέας: δείκτης; χρώμα: #fff; κείμενο-διακόσμηση: κανένα? κείμενο-ευθυγράμμιση: κέντρο; μέγεθος γραμματοσειράς: 16px; συμπλήρωση: 0px 20px; ύψος: 40px; γραμμή-ύψος: 40px; min-πλάτος: 100px. σκιά κειμένου: 0 1px 0 rgba (0,0,0,0,35); γραμματοσειρά-οικογένεια: Arial, Tahoma, sans-serif; -webkit-transition: όλα τα γραμμικά .2s; -moz-transition: όλα τα γραμμικά .2s; -ο-μετάβαση: όλα τα γραμμικά .2s; -ms-transition: όλα τα γραμμικά .2s; μεταβολή: όλα γραμμικά .2s .blu-btn: hover, .blu-btn: εστίαση -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,3), ένθετο 0 12px 20px 2px # 3089d8; -moz-box-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,3), ένθετο 0 12px 20px 2px # 3089d8; κουτί-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,3), ένθετο 0 12px 20px 2px # 3089d8;  .blu-btn: ενεργό -webkit-box-shadow: ένθετο 0 2px 0 0 rgba (0,0,0,0,2), ένθετο 0 12px 20px 6px rgba (0,0,0,0,2), ένθετο 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: ένθετο 0 2px 0 0 rgba (0,0,0,0,2), ένθετο 0 12px 20px 6px rgba (0,0,0,0,2), ένθετο 0 0 2px 2px rgba (0,0, 0,0,3). κουτί-σκιά: ένθετο 0 2px 0 0 rgba (0,0,0,0,2), ένθετο 0 12px 20px 6px rgba (0,0,0,0,2), ένθετο 0 0 2px 2px rgba (0,0,0,0,3 ) ·  .gr-btn εμφάνιση: inline-block; -moz-border-radius: .25em; ακτίνα: .25em; -webkit-box-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,2); κουτί-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,2); φόντο-χρώμα: # 659324; εικόνα φόντου: -moz-linear-gradient (# 81bc2e, # 659324); εικόνα φόντου: -ms-γραμμική κλίση (# 81bc2e, # 659324); Εικόνα φόντου: -Βαθμονόμηση ιστού (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, διακοπή χρώματος (0%, # 81bc2e), έγχρωμη διακοπή (100%, # 659324)). εικόνα φόντου: -webkit-γραμμική κλίση (# 81bc2e, # 659324); εικόνα φόντου: -ο-γραμμική κλίση (# 81bc2e, # 659324); φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0). -ms-φίλτρο: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; εικόνα φόντου: γραμμική κλίση (# 81bc2e, # 659324); σύνορα: 0; δρομέας: δείκτης; χρώμα: #fff; κείμενο-διακόσμηση: κανένα? κείμενο-ευθυγράμμιση: κέντρο; μέγεθος γραμματοσειράς: 16px; συμπλήρωση: 0px 20px; ύψος: 40px; γραμμή-ύψος: 40px; min-πλάτος: 100px. σκιά κειμένου: 0 1px 0 rgba (0,0,0,0,35); γραμματοσειρά-οικογένεια: Arial, Tahoma, sans-serif; -webkit-transition: όλα τα γραμμικά .2s; -moz-transition: όλα τα γραμμικά .2s; -ο-μετάβαση: όλα τα γραμμικά .2s; -ms-transition: όλα τα γραμμικά .2s; μετάβαση: όλα τα γραμμικά .2s;  .grn-btn: hover, .grn-btn: εστίαση -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba , 0,3), ένθετο 0 12px 20px 2px # 85ca26; -moz-box-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,3), ένθετο 0 12px 20px 2px # 85ca26; κουτί-σκιά: 0 2px 0 0 rgba (0,0,0,0,1), ένθετο 0 -2px 0 0 rgba (0,0,0,0,3), ένθετο 0 12px 20px 2px # 85ca26;  .grn-btn: ενεργό -webkit-box-shadow: ένθετο 0 2px 0 0 rgba (0,0,0,0,2), ένθετο 0 12px 20px 6px rgba (0,0,0,0,2), ένθετο 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: ένθετο 0 2px 0 0 rgba (0,0,0,0,2), ένθετο 0 12px 20px 6px rgba (0,0,0,0,2), ένθετο 0 0 2px 2px rgba (0,0, 0,0,3). κουτί-σκιά: ένθετο 0 2px 0 0 rgba (0,0,0,0,2), ένθετο 0 12px 20px 6px rgba (0,0,0,0,2), ένθετο 0 0 2px 2px rgba (0,0,0,0,3 ) ·

Χρησιμοποιώ πλήρεις μεταβάσεις για 200 χιλιοστά του δευτερολέπτου στις καταστάσεις αιωρήσεων και ενεργών κουμπιών. Αυτό που είναι τόσο μεγάλο για αυτά τα στυλ είναι ότι μπορείτε να τα εφαρμόσετε σε σχεδόν οποιοδήποτε στοιχείο με δυνατότητα κλικ. Κουμπιά, συνδέσεις άγκυρας, στοιχεία μορφής ή οτιδήποτε άλλο νομίζετε ότι είναι κατάλληλο - αν και αυτά τα στυλ θα πρέπει να χρησιμοποιούνται αραιά έτσι ώστε να μην υπερφορτώνουν το σχέδιό σας.

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

Διαδήλωση

Τελικές σκέψεις

Ελπίζω ότι μπορείτε να πάρετε κάποια σπουδαία μαθήματα από αυτή τη συλλογή τεχνικών σκιάς κουτιού. Υπάρχουν πολλοί διαφορετικοί τομείς στους οποίους θα μπορούσατε να εστιάσετε, συμπεριλαμβανομένων μορφών, πλαισίων τρόπων, κουμπιών, γραμμών εργαλείων και ακόμη και πλήρους σχεδίασης ιστότοπων.

Είστε ελεύθεροι να εφαρμόσετε οποιοδήποτε από αυτά τα εφέ σκιάς σε τμήματα της δικής σας ιστοσελίδας. Υπάρχουν πολλές άλλες τεχνικές εκεί έξω, αλλά αυτή η συλλογή είναι ιδανική τόσο για αρχάριους όσο και για εξελιγμένους προγραμματιστές. Επίσης, εάν έχετε οποιεσδήποτε προτάσεις ή ερωτήσεις σχετικά με το άρθρο, μπορείτε να μοιραστείτε μαζί μας στην περιοχή συζήτησης σχολίων παρακάτω.