CSS3 επαναλαμβανόμενες κλίσεις [Συμβουλές CSS3]

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

Στις προηγούμενες δημοσιεύσεις μας, συζητήσαμε δύο τύπους διαβαθμίσεων που μπορούν να επιτευχθούν με το CSS3:

• Radial και
• Γραμμικές κλίσεις.

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

Βασική επανάληψη

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

 / * Γραμμική * / .gradient φόντο: επαναλαμβανόμενη γραμμική κλίση (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient φόντο: επαναλαμβανόμενη ακτινική κλίση (50% 50%, κύκλος, # f9f9f9, #cccccc 20px).  

Δεν υπάρχει μεγάλη διαφορά για τα υπόλοιπα στον κώδικα, εκτός από τον κώδικα επαναλήψεις χρωμάτων. Παρακάτω είναι μια απλή απεικόνιση για να περιγράψει πώς λειτουργεί αυτή η επανάληψη χρωμάτων.

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

• Προβολή επίδειξης

Στην επόμενη ενότητα, θα σας δείξουμε πώς μπορούμε να χρησιμοποιήσουμε CSS3 Repeating Gradients σε πραγματικά παραδείγματα.

Παράδειγμα: Δημιουργία μοτίβων

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

 .κλίση φόντο: επανάληψη γραμμικής κλίσης (0deg, # f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px).  

Παρατηρήστε πώς ορίζουμε δύο διαφορετικά χρώματα - # f9f9f9 και #cccccc - στο ίδιο σημείο, 20px. Αυτό το παράδειγμα θα οξύνει τη διαφορά μεταξύ αυτών των δύο χρωμάτων και θα εξαλείψει την ασαφή.

Για να κατευθύνουμε τον προσανατολισμό απλά αλλάζουμε τη γωνία - 90deg θα την κατευθύνει οριζόντια, ενώ 45deg θα το διευθύνει διαγώνια και ούτω καθεξής.

• Προβολή επίδειξης

Παράδειγμα: Δημιουργία γραμμής χαρτιού

Σε αυτό το δεύτερο παράδειγμα, θα δημιουργήσουμε μια γραφική παράσταση χαρτιού που συχνά θα δείτε σε ένα σημειωματάριο. Για να δημιουργήσουμε αυτό το αποτέλεσμα, χρειαζόμαστε μόνο ένα div, καμία εικόνα, μόνο CSS.

 .κλίση width: auto; ύψος: 500px; περιθώριο: 0 50px; υπόβαθρο: -webkit-επανάληψη-γραμμική κλίση (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); υπόβαθρο: -moz-επαναλαμβανόμενη-γραμμική κλίση (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); υπόβαθρο: -α-επαναλαμβανόμενη-γραμμική κλίση (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px). υπόβαθρο: επαναλαμβανόμενη γραμμική κλίση (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px). μέγεθος φόντου: 100% 21px.  

Παρατηρήστε ότι προσθέσαμε και το CSS3 μέγεθος φόντου για να καθορίσετε τα μεγέθη των εικόνων φόντου για 100%, 20px. Αν και οι Κλίσεις CSS3 εμφανίζουν 'χρώματα', είναι στην πραγματικότητα κατηγοριοποιημένες ως εικόνα, όχι χρώμα.

Στη συνέχεια, θα χρησιμοποιήσουμε :πριν ψευδο-στοιχείο για να προσθέσετε μια λωρίδα στην αριστερή πλευρά του χαρτιού.

 .κλίση: πριν από την content: ""; εμφάνιση: inline-block ύψος: 500px; πλάτος: 4px; αριστερά: 4px διπλό # FCA1A1; θέση: σχετική. αριστερά: 30px;  

Και τελειώσαμε, είναι πραγματικά απλό; Τώρα μπορούμε να τα δούμε όλα σε δράση από τους παρακάτω συνδέσμους.

• Προβολή επίδειξης
• Λήψη πηγής

Περαιτέρω Πόροι

• WebCit CSS3 Διαβαθμίσεις
• Διαβαθμίσεις CSS3 στο Δίκτυο προγραμματιστών της Microsoft