Στοιχεία ιστοτόπου στυλ με κλίση φόντου CSS

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

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

Τι είναι μια διαβάθμιση CSS;

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

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

Σύνταξη CSS Gradients

Εικόνα φόντου: τύπος κλίσης (κατεύθυνση, χρώμα1, χρώμα2);

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

Σχετιζομαι με: Πώς να ορίσετε μια εικόνα φόντου σε CSS

Το παραπάνω παράδειγμα δείχνει δύο χρώματα, αλλά μια κλίση μπορεί να περιέχει πολλά διαφορετικά χρώματα. Η μόνη απαίτηση είναι ότι κάθε χρώμα στη λίστα διαχωρίζεται με κόμμα.

Τι είναι μια γραμμική κλίση;

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

Παράδειγμα γραμμικής διαβάθμισης CSS

Εικόνα φόντου: γραμμική κλίση (# 00A4CCFF, # F95700FF);

Ο παραπάνω κώδικας θα παράγει την ακόλουθη διαβάθμιση CSS:

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

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

Χρήση του παραδείγματος κατώτατης γραμμικής διαβάθμισης

Εικόνα φόντου: γραμμική κλίση (προς τα κάτω, # 00A4CCFF, # F95700FF);

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

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

Διαγώνια γραμμική κλίση

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

• Κάτω δεξιά
• Κάτω αριστερά
• Επάνω δεξιά
• Επάνω αριστερά

Χρησιμοποιώντας το Διαγώνιο Παράδειγμα Γραμμικής Διαβάθμισης

Εικόνα φόντου: γραμμική κλίση (κάτω δεξιά, # 00A4CCFF, # F95700FF);

Το παραπάνω παράδειγμα παράγει την ακόλουθη έξοδο:

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

Πολύχρωμη γραμμική κλίση

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

Παράδειγμα πολύχρωμης γραμμικής διαβάθμισης

Εικόνα φόντου: γραμμική κλίση (προς τα δεξιά, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:

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

Τι είναι μια ακτινική κλίση;

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

Χρήση του παραδείγματος ακτινικής διαβάθμισης

Εικόνα φόντου: ακτινική κλίση (κύκλος, # 00A4CCFF, # F95700FF);

Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:

Αλλαγή του Κέντρου Ακτινικής Διαβάθμισης

Από προεπιλογή, μια ακτινική κλίση ξεκινά στο κέντρο της κλίσης. Ωστόσο, είναι δυνατό να αλλάξετε το σημείο προέλευσης με την εισαγωγή μερικών λέξεων-κλειδιών.

Αλλαγή του παραδείγματος θέσης έναρξης ακτινικής διαβάθμισης

Εικόνα φόντου: ακτινική κλίση (κύκλος επάνω δεξιά, # 00A4CCFF, # F95700FF);

Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:

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

• Πάνω αριστερά
• Κάτω δεξιά
• Κάτω αριστερά

Πολύχρωμα ακτινικά ντεγκραντέ

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

Παράδειγμα Πολύχρωμης Ακτινικής Διαβάθμισης

Εικόνα φόντου: ακτινική κλίση (κύκλος, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:

Προσαρμογή ντεγκραντέ

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

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

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

Προσαρμογή γραμμικού ντεγκραντέ Παράδειγμα 1

Εικόνα φόντου: γραμμική κλίση (προς τα δεξιά, # 00A4CCFF, # F95700FF 30%);

Η παραπάνω γραμμή κώδικα θα παράγει την ακόλουθη έξοδο:

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

Εάν επρόκειτο να τοποθετήσετε το 30% στον παραπάνω κωδικό στο τέλος του πρώτου χρώματος, τα πράγματα θα πρέπει να γίνουν πιο ξεκάθαρα.

Προσαρμογή γραμμικού ντεγκραντέ Παράδειγμα 2

Εικόνα φόντου: γραμμική κλίση (προς τα δεξιά, # 00A4CCFF 30%, # F95700FF);

Ο παραπάνω κωδικός θα παράγει την ακόλουθη έξοδο.

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

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

Η δημιουργία CSS Gradients δεν ήταν ποτέ πιο εύκολη

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

Ωστόσο, εάν δεν θέλετε να δημιουργήσετε νέες και μοναδικές ντεγκραντέ, μπορείτε να ξεκινήσετε δημιουργώντας μερικές υπέροχες προϋπάρχουσες.

27 Κομψά παραδείγματα κλίσης φόντου CSS

Τα συμπαγή χρώματα είναι τόσο πέρυσι. Οι ντεγκραντέ είναι! Αλλά πώς τα δημιουργείτε στο CSS;

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα

Αναπτύξτε για να διαβάσετε την πλήρη ιστορία