Home-theater-designers
Εάν βρίσκεστε στο διαδίκτυο για περισσότερα από μερικά λεπτά, πιθανότατα έχετε συναντήσει κλίση CSS. Η ιδιότητα φόντου CSS μπορεί να χρησιμοποιηθεί για τη δημιουργία μιας σειράς διαφορετικών στυλ και ένας από τους πιο ενδιαφέροντες τύπους είναι τι μπορεί να κάνει με την τιμή κλίσης.
Η γνώση του πώς να σχεδιάζετε και να δημιουργείτε διαφορετικές κλίσεις CSS αποτελεί πλεονέκτημα για κάθε σχεδιαστή ή προγραμματιστή λογισμικού. Από αυτό το άρθρο, θα μάθετε όλα όσα πρέπει να γνωρίζετε για να αρχίσετε να ενσωματώνετε κλίσεις CSS στα έργα σας.
Τι είναι το CSS Gradient;
Μια κλίση CSS είναι ουσιαστικά ο συνδυασμός δύο ή περισσότερων χρωμάτων που μεταβαίνουν ομαλά από το ένα στο άλλο. Η μεταβατική κατάσταση μιας κλίσης CSS εξαρτάται από τον τύπο κλίσης που χρησιμοποιείται. Υπάρχουν δύο κύριοι τύποι κλίσεων που χρησιμοποιούνται συνήθως στο σχεδιασμό λογισμικού: γραμμικός και ακτινικός.
Ωστόσο, υπάρχει ένας τρίτος τύπος κλίσης που είναι λιγότερο δημοφιλής και γνωστός ως κωνική κλίση.
Σύνταξη CSS Gradients
Background-image: gradient-type (direction, color1, color2);
Η κλίση CSS θα πρέπει να εκχωρηθεί στην ιδιότητα CSS της εικόνας φόντου. Ο τύπος κλίσης μπορεί να είναι ένας από τους πολλούς. γραμμική κλίση, ακτινική κλίση ή κωνική κλίση. Ο τύπος κλίσης ακολουθείται από αγκύλες ανοίγματος και κλεισίματος που περιέχουν τη μεταβατική κατεύθυνση της κλίσης, καθώς και τα χρώματα που θα συμπεριληφθούν στη διαβάθμιση.
Σχετίζεται με: Πώς να ορίσετε μια εικόνα φόντου στο CSS
Το παραπάνω παράδειγμα δείχνει δύο χρώματα, αλλά μια κλίση μπορεί να περιέχει πολλά διαφορετικά χρώματα. Η μόνη απαίτηση είναι κάθε χρώμα στη λίστα να διαχωρίζεται με κόμμα.
Τι είναι η Γραμμική Διαβάθμιση;
Η γραμμική κλίση είναι η πιο δημοφιλής κλίση CSS. Δημιουργεί μια οριζόντια, κάθετη ή διαγώνια κλίση μετάβασης χρησιμοποιώντας δύο ή περισσότερα χρώματα.
Παράδειγμα γραμμικής διαβάθμισης CSS
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Ο παραπάνω κώδικας θα παράγει την ακόλουθη κλίση CSS:
Υπάρχει ένα σημαντικό συστατικό της σύνταξης κλίσης που παραλείπεται από το παραπάνω παράδειγμα. Αυτό το στοιχείο είναι η μεταβατική κατεύθυνση της κλίσης και παραλείφθηκε επειδή η προεπιλεγμένη ευθυγράμμιση της γραμμικής κλίσης είναι κάθετη (από πάνω προς τα κάτω). αυτή είναι η επιθυμητή έξοδος σε αυτό το παράδειγμα.
Ο παραπάνω κώδικας παράγει το ίδιο αποτέλεσμα με την ακόλουθη γραμμή κώδικα. Η μόνη διαφορά μεταξύ των δύο είναι το τμήμα κατεύθυνσης του κώδικα.
Χρήση του Παραδείγματος Κατώτατης Γραμμικής Διαβάθμισης
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Όπως μπορείτε να δείτε από την έξοδο, ο παραπάνω κώδικας δημιουργεί μια κλίση που ξεκινά με μπλε στην κορυφή και μετά μεταβαίνει αργά στο πορτοκαλί στο κάτω μέρος. Εάν θέλετε να αντιστρέψετε τη σειρά των χρωμάτων, μπορείτε απλά να αντικαταστήσετε το προς τα κάτω με στην κορυφή και αυτό θα αντιστρέψει την κατεύθυνση της κλίσης, παράγοντας την ακόλουθη έξοδο:
Παρόμοια με την κάθετη ευθυγράμμιση, η οριζόντια ευθυγράμμιση μιας κλίσης μπορεί να επιτευχθεί με τη χρήση δύο συνόλων λέξεων -κλειδιών κατεύθυνσης: αριστερά και στα δεξιά , η οποία θα παράγει τις ακόλουθες εκροές, αντίστοιχα.
πώς να φτιάξετε ένα κολάζ στην ανάρτηση στο facebook
Διαγώνια γραμμική κλίση
Είναι δυνατόν να επιτευχθεί μια διαγώνια γραμμική μετάβαση κλίσης προς οποιαδήποτε κατεύθυνση γραμμικής κλίσης. Υπάρχουν μόνο τέσσερις συγκεκριμένες λίστες λέξεων -κλειδιών που πρέπει να γνωρίζετε για να το καταφέρετε.
- Κάτω δεξιά
- Κάτω αριστερά
- Επάνω δεξιά
- Πάνω αριστερά
Χρησιμοποιώντας το Παράδειγμα Γραμμικής Γραμμικής Διαβάθμισης
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Το παραπάνω παράδειγμα παράγει την ακόλουθη έξοδο:
Όπως μπορείτε να δείτε από την παραπάνω έξοδο, η γραμμική κλίση κάνει τη μετάβασή της σε μια διαγώνια κατεύθυνση κινούμενη από το επάνω αριστερό μέρος στο κάτω δεξί τμήμα της κλίσης.
Πολύχρωμη γραμμική κλίση
Μια γραμμική κλίση μπορεί να έχει δύο ή περισσότερα χρώματα, αλλά πώς μοιάζουν περισσότερα χρώματα σε μια κλίση; Μια πολύχρωμη γραμμική διάταξη χρώματος κλίσης εξαρτάται από την κατεύθυνσή της. Αυτά που μεταβαίνουν σε οριζόντια κατεύθυνση θα έχουν κάθε νέο χρώμα να εμφανίζεται αριστερά ή δεξιά της γραμμικής κλίσης, ανάλογα με την ακριβή κατεύθυνση της γραμμικής κλίσης.
Πολύχρωμο παράδειγμα γραμμικής κλίσης
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:
Όπως μπορείτε να δείτε κάθε νέο χρώμα προστίθεται στα δεξιά της κλίσης, δημιουργώντας αυτό που τελικά μεταμορφώνεται σε ουράνιο τόξο. Η ίδια έξοδος μπορεί να επιτευχθεί σε κατακόρυφη κατεύθυνση. Ωστόσο, η συγκεκριμένη διάταξη χρώματος στη γραμμική κλίση θα εξαρτηθεί από τη λέξη -κλειδί κάθετης κατεύθυνσης (προς τα πάνω ή προς τα κάτω).
Τι είναι η ακτινική κλίση;
Η ακτινική κλίση δημιουργεί μια σπειροειδή κλίση δύο είναι περισσότερα χρώματα που ξεκινούν από το κέντρο από προεπιλογή. Όπου η γραμμική κλίση παράγει μια ευθεία κλίση που ρέει κάθετα ή οριζόντια, η ακτινική κλίση παράγει μια κυκλική κλίση που ρέει από το κέντρο προς τα εξωτερικά άκρα.
Χρησιμοποιώντας το Παράδειγμα Radial Gradient
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:
Αλλαγή του Κέντρου Ακτινικής Διαβάθμισης
Από προεπιλογή, μια ακτινική κλίση ξεκινά στο κέντρο της κλίσης. Ωστόσο, είναι δυνατό να αλλάξετε το σημείο προέλευσης με την εισαγωγή μερικών λέξεων -κλειδιών.
πώς μπορώ να κάνω το chrome να χρησιμοποιεί λιγότερη μνήμη;
Αλλαγή του παραδείγματος θέσης εκκίνησης ακτινικής διαβάθμισης
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:
Όπως μπορείτε να δείτε από την έξοδο πάνω, η κλίση ξεκινά τώρα από την επάνω δεξιά γωνία αντί από το κέντρο. Αυτή η αλλαγή είναι δυνατή λόγω της συμπερίληψης της λέξης -κλειδιού πάνω δεξιά στον παραπάνω κώδικα. Η ακόλουθη λίστα λέξεων -κλειδιών μπορεί επίσης να χρησιμοποιηθεί για να αλλάξει το σημείο προέλευσης της ακτινικής κλίσης:
- Πάνω αριστερά
- Κάτω δεξιά
- Κάτω αριστερά
Πολύχρωμες ακτινικές διαβαθμίσεις
Όπως και η γραμμική κλίση, η ακτινική κλίση μπορεί επίσης να χρησιμοποιήσει δύο είναι περισσότερα χρώματα, η κύρια διαφορά είναι ότι όπου η γραμμική κλίση προσθέτει στη διαβάθμιση σε ευθεία γραμμή, η ακτινική κλίση προσθέτει νέα χρώματα στο εξωτερικό άκρο.
Παράδειγμα πολυχρωμίας ακτινικής διαβάθμισης
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:
Προσαρμογή διαβαθμίσεων
Μέχρι στιγμής έχετε δει πώς να αλλάξετε την κατεύθυνση και το κεντρικό σημείο μιας κλίσης, αλλά δεν έχετε δει πώς να προσαρμόσετε μια κλίση. Η προσαρμογή μιας κλίσης μπορεί να ακούγεται σαν πολλή δουλειά, αλλά μόλις κατανοήσετε τα βασικά της δημιουργίας κλίσης φόντου CSS, το επόμενο προφανές βήμα είναι να μάθετε πώς να κάνετε τις κλίσεις CSS σας πιο μοναδικές.
πώς να αποκτήσετε ένα διαφανές υπόβαθρο
Από προεπιλογή, τα χρώματα σε μια κλίση καταλαμβάνουν μια ομοιόμορφα κατανεμημένη ποσότητα χώρου με κάθε χρώμα να μεταβαίνει ομαλά στο ένα μετά από αυτό. Έτσι, εάν συνδυαστούν δύο χρώματα για να σχηματίσουν κλίση, κάθε χρώμα θα καταλαμβάνει το μισό του διαθέσιμου χώρου ενώ μεταβαίνει από το ένα στο άλλο. Αν συνδυαστούν τρία χρώματα, κάθε χρώμα θα καταλαμβάνει το ένα τρίτο του διαθέσιμου χώρου.
Με μια προσαρμοσμένη κλίση, μπορείτε να ορίσετε την ποσότητα χώρου που θα καταλαμβάνει ένα χρώμα σε κλίση, εκχωρώντας ρητά το θέση στάσης χρώματος Το
Προσαρμογή ενός γραμμικού βαθμού κλίσης Παράδειγμα 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:
Η παραπάνω έξοδος δείχνει το δεύτερο χρώμα στη γραμμική κλίση που σταματά στο σημείο 30% του πρώτου χρώματος στη κλίση, αντί για τη συνηθισμένη θέση του, και επειδή το δεύτερο χρώμα είναι επίσης το τελικό χρώμα στην κλίση, εκτείνεται φυσικά μέχρι το τέλος Το
Αν επρόκειτο να τοποθετήσετε το 30% στον παραπάνω κώδικα στο τέλος του πρώτου χρώματος, τα πράγματα θα γίνουν πιο ξεκάθαρα.
Παραμετροποίηση γραμμικού βαθμού διαβάθμισης 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Ο παραπάνω κώδικας θα παράγει την ακόλουθη έξοδο.
Η παραπάνω έξοδος δείχνει σαφώς το πρώτο χρώμα στη διαβάθμιση που σταματά στο σημείο 30% του δεύτερου χρώματος στην κλίση. Αυτό το παράδειγμα μαζί με το παραπάνω θα σας βοηθήσει να κατανοήσετε πιο εύκολα την προσαρμογή χρώματος.
Η προσαρμογή μιας ακτινικής κλίσης γίνεται με τον ίδιο τρόπο όπως μια γραμμική κλίση. Το μόνο πράγμα που πρέπει να κάνετε για να επιτύχετε τα ίδια αποτελέσματα παραπάνω σε μια ακτινική κλίση είναι να αλλάξετε τον τύπο και την κατεύθυνση κλίσης.
Η δημιουργία διαβαθμίσεων CSS δεν ήταν ποτέ ευκολότερη
Αυτό το εκπαιδευτικό άρθρο σας παρέχει τα εργαλεία για τον προσδιορισμό και τη δημιουργία γραμμικών και ακτινικών κλίσεων. Αν έχετε φτάσει σε αυτό το σημείο, μάθατε πώς να αλλάζετε την κατεύθυνση και το κέντρο μιας κλίσης. Επιπλέον, έχετε πλέον τις δεξιότητες να προσαρμόσετε τις κλίσεις CSS και να δημιουργήσετε μοναδικές κλίσεις φόντου.
Ωστόσο, εάν δεν θέλετε να προχωρήσετε απευθείας στη δημιουργία νέων και μοναδικών κλίσεων, μπορείτε να ξεκινήσετε δημιουργώντας μερικές υπέροχες ήδη υπάρχουσες.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 27 Κομψά παραδείγματα κλίσης φόντου CSSΤα στερεά χρώματα είναι έτσι πέρυσι. Οι διαβαθμίσεις είναι μέσα! Πώς όμως τα δημιουργείτε στο CSS;
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- Ανάπτυξη διαδικτύου
- Σχεδιασμός Ιστού
- CSS
Ο Kadeisha Kean είναι προγραμματιστής λογισμικού πλήρους στοίβας και τεχνικός/συγγραφέας τεχνολογίας. Έχει την ξεχωριστή ικανότητα να απλοποιήσει μερικές από τις πιο πολύπλοκες τεχνολογικές έννοιες. παραγωγή υλικού που μπορεί εύκολα να γίνει κατανοητό από κάθε αρχάριο τεχνολογίας. Είναι παθιασμένη με τη συγγραφή, την ανάπτυξη ενδιαφέροντος λογισμικού και τα ταξίδια στον κόσμο (μέσω ντοκιμαντέρ).
Περισσότερα από τον Kadeisha KeanΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή