Γραμμικές κλίσεις CSS3 [Συμβουλές CSS3]

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

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

Δημιουργία κλίσεων

Όπως το spec λέει κλίσεις στο CSS3 είναι μια εικόνα, δεν έχει ειδική ιδιότητα όπως άλλη προσθήκη νέων χαρακτηριστικών, έτσι δηλώνεται χρησιμοποιώντας το εικόνα φόντου ιδιότητα αντί.

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

 div φόντο-εικόνα: -webkit-γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%). εικόνα φόντου: -moz-γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%). Εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%). εικόνα φόντου: -ο-γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%). εικόνα φόντου: γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%).

Ας ανακαλύψουμε, λοιπόν, κάθε μέρος της σύνταξης ένα προς ένα για να καταστήσουμε τα πράγματα πιο ξεκάθαρα.

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

 div φόντο-εικόνα: γραμμική κλίση (κορυφή, # FF5A00, # FFAE00);

Το απόσπασμα παραπάνω είναι η επίσημη έκδοση από το W3C για τη δημιουργία διαβαθμίσεων. Είναι στην πραγματικότητα απλούστερη και πολύ αυτονόητη και θα δημιουργήσει επίσης την ακόλουθη κλίση.

Μπορείτε επίσης να χρησιμοποιήσετε κάτω μέρος να κάνει το αντίθετο, ή αλλιώς σωστά και αριστερά.

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

 div φόντο-εικόνα: γραμμική κλίση (45deg, # FF5A00, # FFAE00).

Το απόσπασμα παραπάνω θα δημιουργήσει την ακόλουθη κλίση χρώματος:

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

Και, η επόμενη τιμή είναι η δεύτερο χρώμα συνδυασμός. Λειτουργεί όπως και η προηγούμενη τιμή, μόνο αν είναι το τελευταίο χρώμα που εφαρμόσαμε και δεν προσδιορίσαμε το στάση, μια τιμή του 100% θα ληφθεί ως προεπιλογή. Τώρα, ας δούμε το παρακάτω παράδειγμα:

 div φόντο-εικόνα: γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%).

Το απόσπασμα παραπάνω θα δημιουργήσει μια κλίση όπως αυτό που είδαμε νωρίτερα (δεν υπάρχει διαφορά) αλλά τώρα καθορίζουμε τη θέση διακοπής χρώματος.

Τώρα ας αλλάξουμε το διακοπή χρώματος, και αυτή τη φορά θα καθορίσουμε 50% για το πρώτο χρώμα και 51% για το δεύτερο χρώμα, και ας δούμε πώς φαίνεται.

 div φόντο-εικόνα: γραμμική κλίση (κορυφή, # FF5A00 50%, # FFAE00 51%).

Διαφάνεια

Δημιουργία διαφάνεια σε κλίση είναι επίσης δυνατή. Για να δημιουργήσετε το εφέ πρέπει να μεταφράσουμε το χρώμα μαγεύω σε rgba και χαμηλώστε το κανάλι άλφα.

 div φόντο-εικόνα: γραμμική κλίση (κορυφή, rgba (255,90,0,0,2), rgb (255,174,0,0,2)).

Το απόσπασμα παραπάνω θα μειώσει την ένταση χρώματος κατά 20%, και η κλίση θα αποδειχθεί έτσι:

Πολλαπλά χρώματα

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

 div φόντο-εικόνα: γραμμική κλίση (κορυφή, κόκκινο, πορτοκαλί, κίτρινο, πράσινο, μπλε, ινδικό, βιολετί).

Το απόσπασμα παραπάνω θα δημιουργήσει το παρακάτω ουράνιο τόξο.

Συμβατότητα με το πρόγραμμα περιήγησης

Δυστυχώς, κατά τη στιγμή αυτής της γραφής, όλα τα τρέχοντα προγράμματα περιήγησης δεν έχουν ακόμη υποστηρίξει την τυποποιημένη σύνταξη. Χρειάζονται ακόμα το πρόθεμα του πωλητή (-webkit-, -moz-, -Κυρία- και -o-). Έτσι, γι 'αυτό και η πλήρης σύνταξη εμφανίζεται έτσι:

 div φόντο-εικόνα: -webkit-γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%). εικόνα φόντου: -moz-γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%). Εικόνα φόντου: -ms-γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%). εικόνα φόντου: -ο-γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%). εικόνα φόντου: γραμμική κλίση (κορυφή, # FF5A00 0%, # FFAE00 100%).

Από την άλλη πλευρά, ο Internet Explorer, συγκεκριμένα η έκδοση 9 και η χαμηλότερη, απέχουν πολύ από το πρότυπο. Η κλίση στο IE9 και κάτω δηλώνεται με φίλτρο, οπότε αν θέλουμε να προσθέσουμε κλίση σε αυτά τα προγράμματα περιήγησης, πρέπει να γράψουμε κάτι τέτοιο.

 div φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00).

ο φίλτρο έχει τους περιορισμούς της: πρώτον, δεν επιτρέπει περισσότερα από τρία χρώματα που προστίθενται και η δημιουργία της επίδρασης διαφάνειας είναι επίσης λίγο δύσκολη - δεν επιτρέπει rgba, αλλά το IE φίλτρο χρήσεις #ARGB.

 div φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00).

Εδώ είναι ένα εργαλείο για να σας βοηθήσει να μετατρέψετε rgba προς το #ARGB.

Διαδήλωση
Λήψη πηγής

Γράφοντας τα σύνταξη πιο γρήγορα

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

Υπάρχουν πολλοί τρόποι που μπορούμε να κάνουμε για να απλοποιήσουμε το έργο. όπως η χρήση του Prefix-free, του Prefixr, του LESS ή του Sass για να συμβάλλετε στη σύνταξη των κωδικών, αλλά συνιστάται να χρησιμοποιείτε αυτό το εργαλείο, ColorZilla Gradient. Αυτό το εργαλείο θα δημιουργήσει απλά όλους τους απαραίτητους κωδικούς για τις διαβαθμίσεις που θα λειτουργούν σε όλα τα προγράμματα περιήγησης.

Τελικές λέξεις

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

Υπάρχουν ακόμα πολλά πράγματα που σκοπεύουμε να διερευνήσουμε CSS3 Διαβαθμίσεις στις μελλοντικές θέσεις μας, οπότε μείνετε συντονισμένοι στο Hongkiat.com. Τέλος, σας ευχαριστώ που διαβάσατε αυτήν την ανάρτηση, ελπίζουμε να το απολαύσετε.

Περαιτέρω ανάγνωση

Bullet Έλεγχος Cross Browser RGBA Ιστορικά - Lea Verou
Εικόνα CSS3 - W3.org
Πότε μπορώ να χρησιμοποιήσω το CSS3 Gradients - CanIUse.com