Αρχική σελίδα » Γραφικά » Αυτή η Πινακοθήκη Pure CSS Icons είναι ό, τι θέλουν όλοι οι προγραμματιστές του Frontend

    Αυτή η Πινακοθήκη Pure CSS Icons είναι ό, τι θέλουν όλοι οι προγραμματιστές του Frontend

    Ο σχεδιαστής της Adobe Wenting Zhang δημιούργησε ένα ενδιαφέρουσα εφαρμογή ιστού Για δημιουργώντας καθαρά εικονίδια CSS. Είναι απλά ονομάζεται “Εικονίδιο CSS” και μπορεί να είναι ένα από τα πιο cool γεννήτριες εικονιδίων για προγραμματιστές frontend.

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

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

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

    Μπορείτε να επιλέξετε μεταξύ εικονίδια λεπτών γραμμών ή σκούρα γεμάτα εικονίδια. Και οι δύο χρησιμοποιούν παρόμοιες ιδιότητες CSS και μπορείτε ακόμη και να δείτε τι είναι κάνοντας κλικ σε οποιοδήποτε εικονίδιο στη λίστα. Θα δείτε a συρόμενη πλευρική γραμμή με τον κώδικα HTML και CSS μαζί με το μεγεθυμένο εικονίδιο.

    Αν κοιτάξετε προς την επάνω δεξιά γωνία των πεδίων κώδικα, θα δείτε a μικρό εικονίδιο αντιγραφής. Κάντε κλικ σε αυτό στο αυτόματα αντιγράψτε τον κώδικα στο πρόχειρο σας. Ω, και αυτό το εικονίδιο αντιγραφής; Επίσης χτίστηκε με τον καθαρό κώδικα CSS της Wenting.

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

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

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