Γεννήτρια κλίσης CSS

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

Μπορείτε να ορίσετε τη γωνία κλίσης σε μοίρες (0 μοίρες έως 360 μοίρες) ή να χρησιμοποιήσετε λέξεις-κλειδιά όπως 'προς τα δεξιά', 'προς τα κάτω', 'προς τα πάνω δεξιά', κ.λπ. Οι 0 μοίρες δείχνουν προς τα πάνω, οι 90 μοίρες προς τα δεξιά, οι 180 μοίρες προς τα κάτω και οι 270 μοίρες προς τα αριστερά. Η γωνία καθορίζει τον άξονα κατά μήκος του οποίου μεταβαίνουν τα χρώματα, δίνοντάς σας πλήρη έλεγχο της κατεύθυνσης της διαβάθμισης.

Ναι! Οι κλίσεις CSS υποστηρίζουν απεριόριστες χρωματικές στάσεις. Μπορείτε να προσθέσετε πολλαπλά χρώματα για να δημιουργήσετε σύνθετες, πολύχρωμες κλίσεις. Κάθε χρώμα μπορεί να έχει ένα προαιρετικό ποσοστό θέσης (0% έως 100%) για να ελέγχετε πού εμφανίζεται στην κλίση. Αυτό είναι ιδανικό για τη δημιουργία εφέ ουράνιου τόξου, κλίσεων ηλιοβασιλέματος ή εξελιγμένων χρωματικών μεταβάσεων.

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

Οι σύγχρονες κλίσεις CSS (με χρήση γραμμικής κλίσης και ακτινικής κλίσης) υποστηρίζονται σε όλα τα τρέχοντα προγράμματα περιήγησης χωρίς προθέματα προμηθευτή. Ωστόσο, αν πρέπει να υποστηρίξετε πολύ παλιά προγράμματα περιήγησης (IE9 και παλαιότερα), μπορεί να χρειαστείτε προθέματα προμηθευτή (-webkit-, -moz-, -o-) ή εφεδρικά συμπαγή χρώματα. Για τη σύγχρονη ανάπτυξη ιστού, η τυπική σύνταξη διαβαθμίσεων CSS λειτουργεί παντού.

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

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

Ναι! Χρησιμοποιήστε γωνίες μεταξύ 0deg και 360deg για διαγώνιες κλίσεις. Οι 45 μοίρες δημιουργούν μια τέλεια διαγώνιο από κάτω αριστερά προς πάνω δεξιά, οι 135 μοίρες πηγαίνουν από κάτω δεξιά προς πάνω αριστερά. Οι διαγώνιες κλίσεις προσθέτουν δυναμικό οπτικό ενδιαφέρον και μπορούν να καθοδηγήσουν το μάτι μέσα στο σχέδιό σας.

Χρησιμοποιήστε μορφές χρώματος RGBA ή HSLA με ένα κανάλι άλφα για να δημιουργήσετε κλίσεις που γίνονται διαφανείς. Αυτό είναι ιδανικό για εφέ επικάλυψης, μάσκες εικόνας ή για τη δημιουργία βάθους. Για παράδειγμα, η κλίση από rgba(0,0,0,0,1) σε rgba(0,0,0,0,0) δημιουργεί μια εξασθένιση σε διαφανές μαύρο.

Οι στάσεις χρώματος ελέγχουν πού εμφανίζεται κάθε χρώμα στην κλίση (0% έως 100%). Οι ομοιόμορφες αποστάσεις δημιουργούν ομαλές μεταβάσεις, ενώ η ομαδοποίηση των στάσεων δημιουργεί απότομες αλλαγές χρώματος. Για παράδειγμα, η τοποθέτηση δύο χρωμάτων στο 50% δημιουργεί μια σκληρή γραμμή, ενώ η τοποθέτησή τους στο 40% και στο 60% δημιουργεί μια ομαλή ανάμειξη.