15 Χρήσιμα τεχνάσματα CSS που μπορεί να έχετε παραβλέψει

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

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

1. Αριθμοί και διακρίσεις αριθμοδότησης

   Ας υποθέσουμε ότι έχετε ένα σύνολο από επικεφαλίδες και υποτιτλίες στο έγγραφό σας και τις αριθμείτε με το χέρι ή μέσω ενός σεναρίου. Αντ 'αυτού, μπορείτε να χρησιμοποιήσετε τους μετρητές CSS για να το κάνετε αυτό. Υπάρχει ήδη μια εμπεριστατωμένη θέση σε αυτό εδώ. Και δεδομένου ότι είναι από ένα spec CSS2, μπορείτε να στοιχηματίσετε ότι υποστηρίζεται από όλα τα προγράμματα περιήγησης, εκτός ίσως IE 6.

2. Spice Up Απλά υπογραμμίζει

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

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

   Μπορείτε να χρησιμοποιήσετε αυτά για να υπογραμμίσετε το ύφος, να υπερκεράσετε, ακόμη και να κάνετε το κείμενο να αναβοσβήνει και πολλά άλλα. Από τον Απρίλιο του 2015 μόνο ο Firefox υποστηρίζει αυτήν την ιδιότητα, αλλά μπορείτε να ενεργοποιήσετε “πειραματικές λειτουργίες πλατφόρμας ιστού” για να το χρησιμοποιήσετε στο Chrome.

3. Προσθέτοντας ένα απόσπασμα

   Πρώτα απ 'όλα, δεν υπάρχει λόγος να ασχοληθούμε με την πληκτρολόγηση των σωστών σγουρών εισαγωγών για σύντομες προσφορές, επειδή υπάρχει HTML για αυτό: η ετικέτα που υποδεικνύει τιμές σε ετικέτες.

   ο η ετικέτα επίσης φροντίζει να αναφέρει τα εσωτερικά αποσπάσματα με μεμονωμένα εισαγωγικά. Έτσι, πού είναι το “υπάρχει "CSS" γι 'αυτό” στιγμής σε αυτό?

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

4. Διαχείριση αθέμιτων πινάκων

   Μπορεί να έχετε συναντήσει ένα μεγάλο τραπέζι με διαφορετικό μέγεθος περιεχομένου ανά κελί που αρνείται να παραμείνει σε ένα πλάτος που έχετε ορίσει, ανεξάρτητα από το τι προσπαθείτε. Βυθίστε το τραπέζι με το διάταξη πίνακα ιδιότητα (για ίσο ύψος στήλης, ακολουθήστε αυτόν τον σύνδεσμο).

   Για να είμαι συγκεκριμένος, η λύση είναι στο πίνακας-διάταξη: σταθερό? αξία. Όταν καθορίζετε μια σταθερή διάταξη για τον πίνακα, ο πίνακας και το πλάτος κυψελών καθορίζονται από το πλάτος του πίνακα ή της πρώτης σειράς κελιών (που μπορεί να οριστεί από τον χρήστη) και όχι από το περιεχόμενο. Αυτό υποστηρίζεται από όλα τα προγράμματα περιήγησης.

5. Κάντε το κολλώδες

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

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

6. Πάρτε το κείμενό σας στο σχήμα

   Θέλετε το κείμενο στη σελίδα σας να καμπυλώνει όμορφα πάνω από κάποια εικόνα που εμφανίζεται δίπλα της; Μπορείτε να δοκιμάσετε CSS Σχήματα. Για να εφαρμόσουμε σχήματα CSS, μπορούμε να χρησιμοποιήσουμε τρεις ιδιότητες σχήμα-έξω, σχήμα-περιθώριο και σχήμα-όριο εικόνας. Από τον Απρίλιο του 2015 υποστηρίζονται τα Σχήματα CSS webkit browsers.

7. Υποχρεωτικά πεδία

   Αν έχετε μια φόρμα, υπάρχει μεγάλη πιθανότητα να απαιτούνται κάποια πεδία σε αυτήν, ενώ άλλα δεν είναι. Θα χρειαστεί να αφήσετε τους χρήστες να γνωρίζουν ποια είναι ποια. Το CSS για αυτό είναι :απαιτείται :προαιρετικός ψευδο-τάξεις. Όλα τα σύγχρονα προγράμματα περιήγησης τους υποστηρίζουν.

8. Πικάνι με τα χρώματα

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

9. Το έλεγξα?

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

   Υπάρχει CSS για αυτό που εκμεταλλεύεται τον δεσμό μεταξύ των άμεσων αδελφών, δύο στοιχεία δίπλα-δίπλα. Το CSS έχει παρακείμενο επιλογέα αδερφού που υποδηλώνεται από το συν + και μπορούμε να το χρησιμοποιήσουμε για να στοχεύσουμε την ετικέτα δίπλα στο πλαίσιο ελέγχου. Αλλά τι γίνεται με τη στόχευση πρώτα του πλαισίου ελέγχου; Εκεί είναι το :τετραγωνισμένος ψευδο-τάξη γι 'αυτό.

10. Όπως μια ιστορία

    Τότε, δεν θα ήταν ωραίο αν το πρώτο “Ο” στο “Μια φορά κι έναν καιρό” φαίνεται όμορφο; Μπορούμε να το φανεί καν όμορφο, τελικά υπάρχει CSS για αυτό. Εδώ είναι όπου ::πρώτο γράμμα το ψευδο στοιχείο έρχεται στη διάσωση. Στοχεύει στο πρώτο γράμμα της πρώτης γραμμής του στοχοθετημένου στοιχείου. Διαβάστε περισσότερα για αυτό εδώ.

11. Θα θέλατε να μάθετε περισσότερα?

    Ένα στοιχείο μπορεί να έχει τάξη X ή δεδομένα Υ ή κάποια άλλη τιμή σε ένα χαρακτηριστικό. Αν ποτέ χρειαστεί να εμφανιστεί μια τέτοια τιμή χαρακτηριστικού ενός στοιχείου κοντά σε αυτό, μπορούμε να χρησιμοποιήσουμε το περιεχόμενο: attr (X). Ανακτά την τιμή του χαρακτηριστικού X του στοιχείου, τότε μπορούμε να το δείξουμε δίπλα στο στοιχείο.

12. Λίγο λίγο πιο αριστερά

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

13. Ανακοινώστε τη μορφή αρχείου των συνδέσεων

    Είδατε μια μικρή εικόνα κοντά σε έναν σύνδεσμο που δείχνει τι είναι αυτός ο σύνδεσμος; Ένα PDF; ή DOC; Ναι, υπάρχει CSS για να επιτευχθεί αυτό. ο περιεχόμενο: url () είναι αυτό που θα χρησιμοποιήσουμε για την εμφάνιση της εικόνας πίσω από τους συνδέσμους.

14. Trigger Parallax Effect

    Το φαινόμενο παράλλαξης είναι ένα αποτέλεσμα που χρησιμοποιείται για να περιγράψει την φαινομενικά αργή κίνηση του φόντου σε σχέση με το προσκήνιο. Αυτό το φαινόμενο είναι δημοφιλές σε ιστότοπους που υλοποιούν κύλιση παράλλαξης. Υπάρχουν διάφοροι τρόποι για την υλοποίησή του, το παρακάτω παράδειγμα λειτουργεί στο Firefox με προσάρτηση φόντου: σταθερή..

15. Η δύναμη των CSS Animations

    Πιθανώς δεν είναι τεράστιο “υπάρχει CSS για αυτό” στιγμής, επειδή όλοι πιθανότατα έχετε επίγνωση των animations CSS μέχρι τώρα. Αλλά μια μικρή υπενθύμιση δεν είναι κακό. Υπάρχουν πολλές χρήσεις για animations CSS, αλλά εδώ είναι ένα για μια απλή άσκηση χρωματισμού.

Τώρα Διαβάστε: 50 Χρήσιμα αποσπάσματα CSS Κάθε σχεδιαστής πρέπει να έχει