Μερικοί σύνδεσμοι σχετικά με τα CSS Gradients

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

• Ημέρα 22: κωνικές κλίσεις — Ο Manuel Matuzovic εξέτασε τις κωνικές διαβαθμίσεις την Ημέρα 21 της σειράς 100 ημερών του σχετικά με το σύγχρονο CSS, παρέχοντας μια ωραία ματιά υψηλού επιπέδου στα χρώματα, τις γωνίες, την τοποθέτηση και τις χρωματικές στάσεις. Μετά, συνεχίστε Ημέρα 22, το χρησιμοποιεί στο ::backdrop ψευδοστοιχείο. (Παρεμπιπτόντως, το Twitter απροσδόκητα ανέστειλε τον λογαριασμό του — ας βοηθήσουμε να διορθωθεί αυτό το πλοίο αν μπορούμε.)
• Καταλαβαίνετε πραγματικά τις ακτινικές διαβαθμίσεις CSS; - Πάτρικ Μπρόσετ έχει κάνει δουλειά που αξίζει τον οδηγό εδώ και ειλικρινά εξακολουθώ να το προσπαθώ. Προφανώς, όμως, εκτιμώ τις σαφείς εξηγήσεις και τα demos του για πράγματα που εξακολουθώ να αποσιωπώ, όπως λέξεις-κλειδιά για το μέγεθος και το σχήμα μιας ακτινωτής κλίσης. Το συνδέω ήδη από μόνος μας Οδηγός CSS Gradients!
• Υψηλά προσαρμόσιμες διαβαθμίσεις φόντου — Γεια, μιλώντας για ακτινική κλίση, Scott VandeheyΗ συνταγή του για ένα με πολλαπλές χρωματικές στάσεις έκανε το γύρο την περασμένη εβδομάδα. Η πρόκληση του ήταν να δημιουργήσει ένα μοτίβο διαβάθμισης που θα μπορούσε να υποστηρίξει διαφορετικές χρωματικές παραλλαγές, το οποίο κανονικά θα ήταν ένα ζεστό χάος από τάξεις CSS και τιμές χρώματος για κάθε παραλλαγή, αν δεν χρησιμοποιούσε προσαρμοσμένες ιδιότητες. Με αυτόν τον τρόπο, μπορεί να εκχωρήσει μια προσαρμοσμένη ιδιότητα για τα διαφορετικά χρώματα και τις τιμές τοποθέτησης για κάθε στάση χρώματος και, στη συνέχεια, απλώς να ενημερώσει τις τιμές ανάλογα με το περιβάλλον. Και αυτό που είναι περισσότερο είναι ότι ο τρόπος με τον οποίο μπορούν να ενημερωθούν προσαρμοσμένες ιδιότητες με JavaScript επέτρεψε στον Scott να δημιουργήσει ένα εργαλείο για την προσαρμογή του μοτίβου του ντεγκραντέ, το οποίο κοινοποιείται γενναιόδωρα στο τέλος της ανάρτησης.
• Ημιτονικά μοτίβα CSS - Μισέλ Μπάρκερ με μια λεπτομερή ανάλυση των «μισών» προτύπων της Ana Tudor. Το εφέ είναι κάτι σαν τη διακεκομμένη μελάνη των εφημερίδων της παλιάς σχολής. Ενώ η Ana χρησιμοποιεί Χουντίνι κάτω από την κουκούλα για κινούμενα σχέδια και εφέ αιώρησης, η Michelle εξετάζει συγκεκριμένα το ίδιο το ημίτονο εφέ και πώς είναι κατασκευασμένο με ακτινική κλίση. Μου αρέσει ιδιαίτερα ο τρόπος με τον οποίο η Michelle δείχνει πώς να φτάσετε από ένα απλό πλέγμα κουκκίδων σε ένα πλέγμα όπου το μοτίβο είναι λίγο παραμορφωμένο. Και μείνε μέχρι το τέλος για να δεις πώς σημειώνει το εφέ με α mask-image που χρησιμοποιεί μια γραμμική κλίση για να δημιουργήσει ένα εφέ εξασθένισης. Ασχολήθηκα λίγο με αυτό το μοτίβο, επίσης, και ολοκληρώθηκε με κάτι προσεγμένο που μοιάζει με φίλτρο κηλίδας με ρευστό μελάνι.
• Μια γρήγορη λύση Navbar — Ο Eric Meyer έλαβε μια ενδιαφέρουσα πρόκληση σχεδιασμού για ένα μενού όπου μια διακεκομμένη γραμμή βγαίνει από τον σύνδεσμο «τρέχουσα σελίδα» και γίνεται μέρος ενός μεγαλύτερου διακεκομμένου περιγράμματος κατά μήκος της αριστερής άκρης του κοντέινερ περιεχομένου. Ο Έρικ είναι πάντα ένα εξαιρετικό παράδειγμα πώς να σκέφτεστε σαν προγραμματιστής front-end, και το κάνει εδώ καθώς περιγράφει την εναλλακτική διαδρομή που πήρε χρησιμοποιώντας μια γραμμική κλίση όταν χτύπησε ένα εμπόδιο με την τυπική προσέγγιση ρύθμισης border-style: dotted στο στοιχείο.
• Διακεκομμένες γραμμές με μάσκα διαβάθμισης — Ο Έρικ με μια συνέχεια σε αυτόν τον τελευταίο σύνδεσμο που δείχνει όχι μόνο πώς συνέδεσε τις παύλες ενός αριστερού περιγράμματος με τις παύλες μιας εικόνας ράστερ, αλλά και πώς τον έπεισε να αλλάξει τη λύση του για να μιμηθεί τη χαμηλότερη ανάλυση του παύλες της εικόνας χρησιμοποιώντας δύο επαναλαμβανόμενες γραμμικές διαβαθμίσεις φόντου ως α mask-image στην κλίση φόντου. Τόσο σπασμωδικό και υπέροχο!