Ένας οδηγός βήμα προς βήμα για την παραγωγή εργαλείων καθαρού CSS

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

Αυτό το άρθρο είναι ένα βήμα-προς-βήμα φροντιστήριο που θα σας βοηθήσει να κατανοήσετε αυτά τα κόλπα CSS, ώστε να μπορείτε να κάνετε καθαρά CSS tooltips επίσης.

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

Το πρόβλημα

Χρειάστηκε να δημιουργήσω ένα προσαρμοσμένο εργαλείο για το έργο μου.

Ξεκίνησα με το Googling "CSS Tooltip Generator". Βρήκα αρκετά γεννήτριες. Η προσέγγισή τους ήταν να προσθέσετε ένα άνοιγμα με μια απόλυτη θέση μέσα στο στοιχείο που θέλετε μια επεξήγηση εργαλείου.

Αλλά έκανα ήδη ένα άλλο ολοκληρωμένο έργο. Δεν ήθελα να επιστρέψω και να προσθέσω όλα αυτά τα στοιχεία span σε όλο μου το έργο. Αυτό θα χρειαστεί χρόνο και θα περιπλέξει το HTML μου. Πρέπει να υπάρχει ένας καλύτερος τρόπος.

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

Αυτό το τέχνασμα ήταν έξυπνο και καθαρό, αλλά δεν ήταν αρκετά γενικό.

Βελτίωση της λύσης

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

Όχι μόνο αυτό, αλλά θέλουμε να μπορούμε να καθορίσουμε εύκολα τη θέση του εργαλείου:

Πρώτα - όπως αναφέρεται στο βίντεο - θα προσθέσουμε ένα κουμπί πριν και ένα ψευδο στοιχείο στο κουμπί.

:: μετά και :: πριν είναι ψευδο-στοιχεία, τα οποία σας επιτρέπουν να εισάγετε περιεχόμενο σε μια σελίδα από το CSS πριν ή μετά το περιεχόμενο του στοιχείου. Λειτουργούν έτσι:

div :: μετά από {
 περιεχόμενο: "μετά";
}}
div :: πριν από {
 περιεχόμενο: "πριν";
}}

Το αποτέλεσμα μοιάζει με αυτό:

 πριν    μετά

Ας περάσουμε από αυτό το βήμα προς βήμα

Βήμα 1: Θα προσθέσουμε ένα χαρακτηριστικό γνώρισμα εργαλείου όπως αυτό:

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

Το :: πριν από το ψευδο-στοιχείο χρησιμοποιείται για την εμφάνιση του περιεχομένου του εργαλείου. Προσθέτουμε το περιεχόμενο ιδιότητας και εξάγουμε την τιμή του χαρακτηριστικού εργαλείου. Η τιμή για το περιεχόμενο μπορεί να είναι μια συμβολοσειρά, μια τιμή χαρακτηριστικού από το στοιχείο όπως το παράδειγμά μας ή ακόμα και μια εικόνα με url (path / image.png).

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

Προσθέτουμε επίσης ορισμένα κόλπα θέσης για να φτιάξουμε το εργαλείο στο κέντρο με την ιδιότητα μετασχηματισμού και αυτό το αποτέλεσμα.

Εδώ είναι το CSS μας:

Βήμα 2: παίζουμε μόνο με τα :: πριν και :: μετά από ψευδο-στοιχεία για να δημιουργήσουμε μια θέση υποδείγματος. Το κουμπί HTML θα μοιάζει με αυτό:

Η θέση εργαλείου μπορεί να είναι: δεξιά, αριστερά, πάνω ή κάτω.

βήμα 3: Σε αυτό το τελικό βήμα, θα προσθέσουμε ένα απλό animation στο δείκτη εργαλείων.

Αυτό το CodePen εμφανίζει το τελικό αποτέλεσμα (και μπορείτε να κάνετε κλικ για να δείτε τον τελικό κώδικα):

Εάν είστε εξοικειωμένοι με το React check My post:

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

Διαβάστε περισσότερες ιστορίες https://elazizi.com/