10 (Περισσότερα) κόλπα CSS που πιθανώς παραβλέψατε

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

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

1. Γράψτε κατακόρυφα

Υπάρχει ένα χαρακτηριστικό CSS που ονομάζεται γραφής που δέχεται μία από αυτές τις τρεις αξίες. οριζόντια-tb, vertical-rl και κατακόρυφος-lr.

οριζόντια-tb είναι η προεπιλογή και προκαλεί τη τυπική οριζόντια ροή κειμένου από αριστερά προς τα δεξιά σε ένα στοιχείο.

ο κατακόρυφος-* Ωστόσο, οι τιμές είναι για κάθετη ροή μπλοκ, προκαλώντας το γράψιμο κειμένου από επάνω προς τα κάτω από τα προγράμματα περιήγησης. Σε vertical-rl, νέες γραμμές προστίθενται στα αριστερά των προηγούμενων και αντίστροφα για κατακόρυφος-lr.

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

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

 -webkit-writing-mode: κατακόρυφος-rl; -ms-γραφή-λειτουργία: tb-rl; τρόπος γραφής: vertical-rl; 

2. Επαναχρησιμοποίηση της τιμής χρώματος

Η λέξη-κλειδί currentColor φέρει την τιμή του χρώμα χαρακτηριστικό και μπορεί να χρησιμοποιηθεί σε άλλα χαρακτηριστικά που αποδέχονται τις τιμές χρώματος όπως Ιστορικό.

div φόντο: γραμμική κλίση (90deg, τρέχουσα Χρώμα 50%, μαύρο 50%), ... χρώμα: # FFD700; / * currentColor είναι # FFD700 * / 

3. Μπλέ φόντο

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

υπόστρωμα με μείγμα: διαφορά. 

4. Στοιχεία ανάμειξης

Mix-blend-mode συνδυάζει τα περιεχόμενα και τα φόντα των επικαλυπτόμενων στοιχείων. Το Chrome δεν φαίνεται να υποστηρίζει όλες τις λειτουργίες, παρόλο που το κάνει ο Firefox.

mix-mode-mode: χρώμα; 

Πήρα δύο στοιχεία, ένα img που δείχνει την εικόνα ενός τριαντάφυλλου και ενός σπιθαμή με ένα γραφικό υπόβαθρο, στοιβάζοντάς τα και εφαρμόζοντας μερικούς τρόπους mix-blend.

5. Αγνόηση συμβάντων δείκτη

Μπορείτε να κάνετε ένα στοιχείο να αγνοεί οποιοδήποτε συμβάν δείκτη χρησιμοποιώντας ένα μόνο χαρακτηριστικό που ονομάζεται δείκτες-δείκτες. Δίνοντας δείκτες-δείκτες η αξία του κανένας σε ένα στοιχείο, αυτό το αποτρέπει από το να είναι ένας στόχος στα συμβάντα δείκτη. Συμπεριλαμβάνεται υποστήριξη IE11 +.

Στην παρακάτω επίδειξη, υπάρχει ένα πλαίσιο ελέγχου κάτω από δύο εικόνες στοιβαγμένες το ένα πάνω στο άλλο. Και οι δύο εικόνες φέρουν δείκτες-δείκτες: κανένα, επιτρέποντάς μας να κάνουμε κλικ στο πλαίσιο ελέγχου που θαφτεί κάτω από αυτά. Με βάση την κατάσταση ελέγχου του πλαισίου ελέγχου, εμφανίζεται η επιθυμητή εικόνα ενώ η άλλη είναι κρυφή.

6. Διακοσμήστε τα Διαχωρισμένα Κουτιά

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

Τώρα για να ακολουθήσετε αυτό με ένα παράδειγμα και ένα πρώιμο "Χριστούγεννα στο ορίζοντα" υπενθύμιση, εδώ είναι μια λίστα των Τάρανδων του Άγιου Βασίλη όλα δακτυλογραφημένα σε ένα ενιαίο σπιθαμή! Χω! Χω! Ho!

Σημείωση: Αν και η σύγχρονη IE υποστηρίζει κουτί-διακόσμηση-διάλειμμα, στην άκρη του περιγράμματος τμήματος του τμήματος, η απόδοση δεν είναι ομαλή και το φόντο φαίνεται κομμένο σε φέτες. Αλλά το κάνει κουτί-σκιά ωραία, γι 'αυτό χρησιμοποίησα σκιές κουτιού τόσο για τα σύνορα όσο και για το φόντο. Υπάρχει επίσης απουσία οριζόντιας επένδυσης στις άκρες του IE που μπορεί να θέλετε να γεμίσετε με κενά.

7. Σύμπτυξη στοιχείων πίνακα

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

Όταν εκχωρείτε ορατότητα: κατάρρευση σε ένα στοιχείο πίνακα, είναι κρυφό και ο χώρος του γεμίζεται από το κοντινό περιεχόμενο - όπως το πώς θα συμπεριφερόταν στη χρήση του οθόνη: καμία αντι αυτου.

Αλλά αντίθετα οθόνη: καμία το οποίο τροποποιεί τη διάταξη του πίνακα μετά την αφαίρεση του χώρου, η διάταξη παραμένει ίδια ορατότητα: κατάρρευση. Μπορείτε να δείτε πώς λειτουργεί πιο λεπτομερώς εδώ.

8. Δημιουργήστε στήλες

Μπορείτε να δημιουργήσετε μια διάταξη στήλης για το περιεχόμενό σας χρησιμοποιώντας το στήλες Χαρακτηριστικό. Σας επιτρέπει να καθορίσετε πόσες στήλες (μέτρηση στήλης) και πώς κάθε πλάτος στήλης (πλάτος στήλης) πρέπει να αποδίδονται σε ένα στοιχείο.

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

-webkit-column-count: 2; -μεριθμός-στήλη-2: Αριθμός στήλης: 2. 

9. Κάντε τα στοιχεία να μπορούν να αλλάξουν

Ένα στοιχείο μπορεί να γίνει αλλαγή μεγέθους (κάθετα, οριζόντια ή και τα δύο) με το χαρακτηριστικό CSS3 αλλαγή μεγέθους . Η δυνατότητα αλλαγής μεγέθους σε a textarea μπορεί να απενεργοποιηθεί χρησιμοποιώντας το ίδιο.

αλλαγή μεγέθους: κατακόρυφη; αλλαγή μεγέθους: οριζόντια; αλλαγή μεγέθους: και οι δύο; αλλαγή μεγέθους: κανένα? 

10. Δημιουργία μοτίβων

Μπορούν να υπάρχουν πολλαπλές κλίσεις CSS3 (γραμμικές και ακτινικές) για ένα μόνο στοιχείο και μπορούν να συσσωρευτούν μεταξύ τους για να δημιουργήσουν μοτίβα. Αυτό μας επιτρέπει να δημιουργήστε όμορφα υπόβαθρα για στοιχεία χωρίς να χρησιμοποιήσετε εξωτερικές εικόνες. Κάνοντας το έργο μπορεί να απαιτήσει κάποια πρακτική όμως.