CSS Fundamentals: Working with Colors

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

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

Ξεκινώντας με τα χρώματα CSS

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

Χρήση χρωμάτων ως λέξεων -κλειδιών

Υπάρχουν περίπου 140 χρώματα CSS που υποστηρίζουν τα περισσότερα σύγχρονα προγράμματα περιήγησης. Θα μπορούσε να είναι τόσο απλό όσο

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

/*Syntax*/
χρώμα: κόκκινο?
χρώμα: κατακόκκινο?
χρώμα: slateblue?

Χρήση τιμών RGB

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

Σημείωση δεκαεξαδικού συμβολοσειράς

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

#rrggbb

Είναι ο πιο συνηθισμένος τρόπος για να περιγράψετε ένα αριθμητικό χρώμα. Είναι ένα πλήρως αδιαφανές χρώμα με κόκκινα, πράσινα και μπλε στοιχεία 0xrr, 0xgg, και 0xbb αντίστοιχα.

#rrggbbaa

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

#rgb

Αν έχετε χρώμα #556677, μπορείτε απλά να το γράψετε ως #567 αφού αντιπροσωπεύει 0xrr, 0xgg, και 0xbb αντίστοιχα. Για παράδειγμα, #000 (ή #000000) είναι μαύρο ενώ #fff (ή #ffffff) είναι λευκό.

#rgba

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

Λειτουργική Σημείωση RGB

Η λειτουργική σημείωση RGB αντιπροσωπεύει χρώματα χρησιμοποιώντας κόκκινα, πράσινα και μπλε στοιχεία. Ορίζεται χρησιμοποιώντας το συνάρτηση rgb () που δέχεται παραμέτρους εισόδου με τη μορφή κύριων κόκκινων, πράσινων και μπλε στοιχείων (και ένα προαιρετικό κανάλι άλφα). Οι κόκκινες, πράσινες και μπλε τιμές πρέπει να είναι ακέραιοι μεταξύ 0 προς το 255 (συμπεριλαμβανομένου), ή ποσοστό που κυμαίνεται από 0% έως 100%. Από την άλλη πλευρά, το κανάλι άλφα δέχεται τιμές από 0,0 (εντελώς διαφανές) έως 1,0 (εντελώς αδιαφανές). Επίσης δέχεται ποσοστιαία τιμή από 0% (ίδια με 0,0) και 100% (ίδια με 1,0).

/*Syntax*/
χρώμα: rgb (rr, gg, bb);
χρώμα: rgba (rr, gg, bb, a);

Λειτουργική Σημείωση HSL

Η λειτουργική σημείωση HSL αντιπροσωπεύει το χρώμα χρησιμοποιώντας απόχρωση, κορεσμό και φωτεινότητα. Είναι πολύ παρόμοιο με το rgb () λειτουργία όσον αφορά τη χρήση. Μπορείτε εύκολα βρείτε την εξαγωνική τιμή οποιουδήποτε χρώματος στην οθόνη του υπολογιστή σας. Σε αυτήν τη μέθοδο χρώματος, η απόχρωση καθορίζει το πραγματικό χρώμα ανάλογα με τη θέση στον χρωματικό κύκλο. Ο κορεσμός είναι το ποσοστό του γκρι με τη μέγιστη δυνατή απόχρωση. Η φωτεινότητα μεταβαίνει το χρώμα από την πιο σκοτεινή στην πιο φωτεινή δυνατή εμφάνιση καθώς αυξάνεται.

Η τιμή της απόχρωσης (H) καθορίζεται από τη υποστηριζόμενη μονάδα γωνίας στο CSS. Περιλαμβάνει βαθμ, rad, βαθμός, και στροφή. Ο κορεσμός (S) καθορίζει το ποσοστό του τελικού χρώματος που αποτελείται από απόχρωση. Το στοιχείο φωτεινότητας (L) καθορίζει το επίπεδο του γκρι.

/*Syntax*/
χρώμα: hsl (XXdeg, XX%, XX%);
χρώμα: hsl (XXturn, XX%, XX%);

Εφαρμογή χρωμάτων σε στοιχεία HTML

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

Ιδιότητα χρώματος για κείμενα

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

Ιδιότητα χρώματος για κουτιά

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

Ιδιότητα χρώματος για περιγράμματα

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

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

Κλείσιμο: Χρώμα και Προσβασιμότητα

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

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

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

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

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα