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

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

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

Διαβαθμίσεις φόντου χρησιμοποιώντας CSS

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

πώς να προσθέσετε μια ευθεία γραμμή στη λέξη

Υπάρχουν τρεις τύποι κλίσεων: γραμμικός (δημιουργήθηκε με το γραμμική κλίση () λειτουργία), ακτινικός (δημιουργήθηκε με ακτινική κλίση () λειτουργία), και κωνικός (δημιουργήθηκε με το κωνική κλίση () λειτουργία). Επίσης, μπορείτε να δημιουργήσετε επαναλαμβανόμενες κλίσεις με το επαναλαμβανόμενη-γραμμική κλίση () , επαναλαμβανόμενη-ακτινική κλίση () , και επαναλαμβανόμενη-κωνική-κλίση () λειτουργίες.

Τα MDN Docs ορίζουν αυτές τις λειτουργίες ως εξής:

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

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

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

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

επαναλαμβανόμενη-ακτινική κλίση () : Ο επαναλαμβανόμενη-ακτινική κλίση () Η συνάρτηση CSS δημιουργεί μια εικόνα που αποτελείται από επαναλαμβανόμενες κλίσεις που εκπέμπουν από μια προέλευση. Είναι παρόμοιο με το gradient/radial-gradient () και παίρνει τα ίδια ορίσματα, αλλά επαναλαμβάνει το χρώμα σταματά απεριόριστα προς όλες τις κατευθύνσεις έτσι ώστε να καλύπτει ολόκληρο το δοχείο του, παρόμοιο με την κλίση/επαναλαμβανόμενη-γραμμική κλίση (). Το αποτέλεσμα της συνάρτησης είναι ένα αντικείμενο του τύπο δεδομένων, που είναι ένα ιδιαίτερο είδος Το

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

Ακολουθεί η επίσημη σύνταξη κάθε τύπου κλίσης.

Επίσημη σύνταξη γραμμικών διαβαθμίσεων

linear-gradient(  
 [ | to ]? ,  
  
)  
 = [to left | to right] || [to top | to bottom]

Επίσημη σύνταξη ακτινωτών διαβαθμίσεων

radial-gradient(  
 [ || ]? [ at ]? ,  
  
);

Επίσημη σύνταξη Conic Gradients

conic-gradient(  
 [ from ]? [ at ]?,  
  
)

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