Επαναλαμβανόμενες κλίσεις CSS - CSS-Κόλπα

Επανάληψη κλίσεις λάβει ένα κόλπο που μπορούμε να κάνουμε ήδη με τη δημιουργική χρήση της color-stopsγια την linear-gradient()και radial-gradient()συμβολισμοί, και ψήνει το σε μας.

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

Σύγκριση γραμμικής διαβάθμισης (αριστερά) με επαναλαμβανόμενη γραμμική κλίση (δεξιά).

Υπάρχει ένα τέχνασμα, με μη επαναλαμβανόμενες ντεγκραντέ, να δημιουργηθεί η κλίση με τέτοιο τρόπο ώστε αν ήταν λίγο μικρό ορθογώνιο, θα ευθυγραμμιστεί με άλλες μικρές εκδοχές του μικρού ορθογωνίου για να δημιουργήσει ένα επαναλαμβανόμενο μοτίβο. Δημιουργήστε λοιπόν ουσιαστικά αυτήν την κλίση και ρυθμίστε το background-sizeγια να φτιάξετε αυτό το μικρό μικρό ορθογώνιο. Αυτό έκανε εύκολο να φτιάξετε ρίγες, τις οποίες θα μπορούσατε στη συνέχεια να περιστρέψετε ή οτιδήποτε άλλο.

Σύνταξη

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

Η σύνταξη για κάθε σημειογραφία είναι η ίδια με τον σχετικό τύπο διαβάθμισης. Για παράδειγμα, repeating-linear-gradient()ακολουθεί την ίδια σύνταξη με linear-gradient().

Επαναλαμβανόμενη κλίση	Σχετική σημειογραφία	Υποστηρίζεται;
`repeating-linear-gradient()`	`linear-gradient()`	Ναί
`repeating-radial-gradient`	`radial-gradient()`	Ναί
`repeating-conic-gradient`	`conic-gradient()`	Οχι

Όπου η επανάληψη της κλίσης καθορίζεται από την τελική στάση χρώματος . Εάν είναι 20px, το μέγεθος της διαβάθμισης (που στη συνέχεια επαναλαμβάνεται) είναι 20pxανά 20pxτετράγωνο. Το ίδιο ισχύει εάν υπάρχουν πολλά χρώματα αλυσοδεμένα στο μοτίβο. Το τελικό χρώμα με την τελική στάση είναι αυτό που καθορίζει το μέγεθος και τη θέση της επανάληψης.

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

Δείτε το Pen lAkyo του Chris Coyier (@chriscoyier) στο CodePen.

Το ίδιο με το ακτινικό:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

Δείτε το Pen Repeating Gradients του Chris Coyier (@chriscoyier) στο CodePen.

Υποστήριξη προγράμματος περιήγησης

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

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