CoolHue Χειροκίνητη συλλογή Pastel Web Gradient Library

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

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

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

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

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

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

Χρησιμοποιώντας το JavaScript, έχετε πλήρη έλεγχο του συνδυασμού των χρωμάτων. Το CSS3 μπορεί επίσης να υποστηρίξει πολλαπλά χρώματα, αλλά είναι πιο δύσκολο να τα δουλέψουμε σε όλα τα στοιχεία της σελίδας και σε όλα τα προγράμματα περιήγησης.

Με το site coolHue, μπορείτε ακόμη και κατεβάστε δωρεάν αρχεία PNG των διαβαθμίσεων. Με αυτόν τον τρόπο μπορείτε να τα επεξεργαστείτε σε έργα γραφικού σχεδιασμού, mockups για δικτυακούς τόπους ή να τα χρησιμοποιήσετε εκτός από τον ακατέργαστο κώδικα HTML / CSS / JS.

Και αν είστε μεγάλος χρήστης του Photoshop, υπάρχει ακόμη ένα αρχείο gradient .grd με όλες τις βαθμίδες coolHue. Φοβερό δικαίωμα?

Επισκεφθείτε το repo του GitHub για οδηγίες εγκατάστασης και δείγματα αποσπασμάτων κώδικα. Εκεί θα βρείτε επίσης το αρχείο βαθμίδων PS μαζί με το αρχείο κλίσης Sketch και πολλά άλλα.