Εξαγωνικό διάφανο χρώμα. Εργασία με το χρωματικό μοντέλο RGBA

HEX/HTML

Το χρώμα HEX δεν είναι παρά μια δεκαεξαδική αναπαράσταση του RGB.

Τα χρώματα αντιπροσωπεύονται ως τρεις ομάδες δεκαεξαδικών ψηφίων, όπου κάθε ομάδα είναι υπεύθυνη για το δικό της χρώμα: #112233, όπου 11 είναι κόκκινο, 22 είναι πράσινο, 33 είναι μπλε. Όλες οι τιμές πρέπει να είναι μεταξύ 00 και FF.

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

1. h1 ( χρώμα: #ff0000; ) /* κόκκινο */
2. h2 ( χρώμα: #00ff00; ) /* πράσινο */
3. h3 ( χρώμα: #0000ff; ) /* μπλε */
4. h4 ( χρώμα: #00f; ) /* ίδιο μπλε, συντομογραφία */

RGB

Ο χρωματικός χώρος RGB (Κόκκινο, Πράσινο, Μπλε) αποτελείται από όλα τα πιθανά χρώματα που μπορούν να δημιουργηθούν με ανάμειξη κόκκινου, πράσινου και μπλε. Αυτό το μοντέλο είναι δημοφιλές στη φωτογραφία, την τηλεόραση και τα γραφικά υπολογιστών.

Οι τιμές RGB καθορίζονται ως ακέραιος αριθμός από το 0 έως το 255. Για παράδειγμα, το rgb(0,0,255) εμφανίζεται ως μπλε επειδή η μπλε παράμετρος έχει οριστεί στην υψηλότερη τιμή (255) και οι υπόλοιπες στο 0.

Ορισμένες εφαρμογές (ιδιαίτερα τα προγράμματα περιήγησης ιστού) υποστηρίζουν ποσοστιαία εγγραφή τιμών RGB (από 0% έως 100%).

1. h1 ( χρώμα: rgb(255, 0, 0); ) /* κόκκινο */
2. h2 ( χρώμα: rgb(0, 255, 0); ) /* πράσινο */
3. h3 ( χρώμα: rgb(0, 0, 255); ) /* μπλε */
4. h4 ( χρώμα: rgb(0%, 0%, 100%); ) /* ίδιο μπλε, ποσοστιαία καταχώριση */

Οι τιμές χρώματος RGB υποστηρίζονται σε όλα τα μεγάλα προγράμματα περιήγησης.

RGBA

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

Η τιμή χρώματος RGBA καθορίζεται ως: rgba(κόκκινο, πράσινο, μπλε, άλφα). Η παράμετρος άλφα είναι ένας αριθμός που κυμαίνεται από 0,0 (πλήρως διαφανές) έως 1,0 (πλήρως αδιαφανές).

1. h1 ( χρώμα: rgb(0, 0, 255); ) /* μπλε σε κανονικό RGB */
2. h2 ( χρώμα: rgba(0, 0, 255, 1); ) /* το ίδιο μπλε στο RGBA, επειδή η αδιαφάνεια: 100% */
3. h3 ( χρώμα: rgba(0, 0, 255, 0.5); ) /* αδιαφάνεια: 50% */
4. h4 ( χρώμα: rgba(0, 0, 255, .155); ) /* αδιαφάνεια: 15,5% */
5. h5 ( χρώμα: rgba(0, 0, 255, 0); ) /* εντελώς διαφανές */

Το RGBA υποστηρίζεται σε IE9+, Firefox 3+, Chrome, Safari και Opera 10+.

HSL

Το χρωματικό μοντέλο HSL είναι μια αναπαράσταση του μοντέλου RGB σε ένα κυλινδρικό σύστημα συντεταγμένων. Το HSL αναπαριστά τα χρώματα με πιο διαισθητικό και ευανάγνωστο από τον άνθρωπο τρόπο από το τυπικό RGB. Το μοντέλο χρησιμοποιείται συχνά σε εφαρμογές γραφικών, παλέτες χρωμάτων και ανάλυση εικόνων.

Το HSL σημαίνει Hue (χρώμα/απόχρωση), Saturation (κορεσμός), Lightness/Luminance (ελαφρότητα/ελαφρότητα/φωτεινότητα, που δεν πρέπει να συγχέεται με τη φωτεινότητα).

Το Hue καθορίζει τη θέση του χρώματος στον τροχό χρώματος (από 0 έως 360). Κορεσμός είναι η ποσοστιαία τιμή του κορεσμού (από 0% έως 100%). Η ελαφρότητα είναι ένα ποσοστό ελαφρότητας (από 0% έως 100%).

1. h1 ( χρώμα: hsl(120, 100%, 50%); ) /* πράσινο */
2. h2 ( χρώμα: hsl(120, 100%, 75%); ) /* ανοιχτό πράσινο */
3. h3 ( χρώμα: hsl(120, 100%, 25%); ) /* σκούρο πράσινο */
4. h4 ( χρώμα: hsl(120, 60%, 70%); ) /* παστέλ πράσινο */

Το HSL υποστηρίζεται σε IE9+, Firefox, Chrome, Safari και Opera 10+.

HSLA

Παρόμοια με το RGB/RGBA, το HSL έχει μια λειτουργία HSLA που υποστηρίζει ένα κανάλι άλφα για να υποδείξει την αδιαφάνεια ενός αντικειμένου.

Η τιμή χρώματος HSLA καθορίζεται ως: hsla (απόχρωση, κορεσμός, ελαφρότητα, άλφα). Η παράμετρος άλφα είναι ένας αριθμός που κυμαίνεται από 0,0 (πλήρως διαφανές) έως 1,0 (πλήρως αδιαφανές).

1. h1 ( χρώμα: hsl(120, 100%, 50%); ) /* πράσινο σε κανονικό HSL */
2. h2 ( χρώμα: hsla(120, 100%, 50%, 1); ) /* το ίδιο πράσινο στο HSLA, επειδή η αδιαφάνεια: 100% */
3. h3 ( χρώμα: hsla(120, 100%, 50%, 0,5); ) /* αδιαφάνεια: 50% */
4. h4 ( χρώμα: hsla(120, 100%, 50%, 0,155); ) /* αδιαφάνεια: 15,5% */
5. h5 ( χρώμα: hsla(120, 100%, 50%, 0); ) /* εντελώς διαφανές */

CMYK

Το χρωματικό μοντέλο CMYK συνδέεται συχνά με την έγχρωμη εκτύπωση και εκτύπωση. Το CMYK (σε αντίθεση με το RGB) είναι ένα αφαιρετικό μοντέλο, που σημαίνει ότι οι υψηλότερες τιμές συνδέονται με πιο σκούρα χρώματα.

Τα χρώματα καθορίζονται από την αναλογία κυανό (κυανό), ματζέντα (ματζέντα), κίτρινο (κίτρινο), με την προσθήκη μαύρου (Κλειδί/μαύρο Κ).

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

Για παράδειγμα, για να αποκτήσετε το χρώμα PANTONE 7526, θα αναμίξετε 9 μέρη κυανό, 83 μέρη ματζέντα, 100 μέρη κίτρινο και 46 μέρη μαύρο. Αυτό μπορεί να χαρακτηριστεί ως εξής: (9,83,100,46). Μερικές φορές χρησιμοποιούνται οι ακόλουθες ονομασίες: C9M83Y100K46, ή (9%, 83%, 100%, 46%) ή (0,09/0,83/1,0/0,46).

HSB/HSV

Το HSB (επίσης γνωστό ως HSV) είναι παρόμοιο με το HSL, αλλά είναι δύο διαφορετικά χρωματικά μοντέλα. Και οι δύο βασίζονται στην κυλινδρική γεωμετρία, αλλά το HSB/HSV βασίζεται στο μοντέλο "hexcone", ενώ το HSL βασίζεται στο μοντέλο "bi-hexcone". Οι καλλιτέχνες συχνά προτιμούν να χρησιμοποιούν αυτό το μοντέλο, είναι γενικά αποδεκτό ότι η συσκευή HSB/HSV είναι πιο κοντά στη φυσική αντίληψη των χρωμάτων. Συγκεκριμένα, το χρωματικό μοντέλο HSB χρησιμοποιείται στο Adobe Photoshop.

Το HSB/HSV σημαίνει Hue (χρώμα/απόχρωση), Saturation (κορεσμός), Brightness/Value (φωτεινότητα/τιμή).

Το Hue καθορίζει τη θέση του χρώματος στον τροχό χρώματος (από 0 έως 360). Κορεσμός είναι η ποσοστιαία τιμή του κορεσμού (από 0% έως 100%). Η φωτεινότητα είναι ένα ποσοστό φωτεινότητας (από 0% έως 100%).

XYZ

Το χρωματικό μοντέλο XYZ (CIE 1931 XYZ) είναι ένας καθαρά μαθηματικός χώρος. Σε αντίθεση με τα RGB, CMYK και άλλα μοντέλα, στο XYZ τα κύρια στοιχεία είναι «φανταστικά», που σημαίνει ότι δεν μπορείτε να συσχετίσετε τα X, Y και Z με οποιοδήποτε σύνολο χρωμάτων για ανάμειξη. Το XYZ είναι το κύριο μοντέλο για σχεδόν όλα τα άλλα χρωματικά μοντέλα που χρησιμοποιούνται σε τεχνικούς τομείς.

ΕΡΓΑΣΤΗΡΙΟ

Το χρωματικό μοντέλο LAB (CIELAB, “CIE 1976 L*a*b*”) υπολογίζεται από το χώρο CIE XYZ. Ο σχεδιαστικός στόχος του Lab ήταν να δημιουργήσει έναν χρωματικό χώρο στον οποίο οι χρωματικές αλλαγές θα ήταν πιο γραμμικές όσον αφορά την ανθρώπινη αντίληψη (σε σύγκριση με το XYZ), δηλαδή, έτσι ώστε η ίδια αλλαγή στις τιμές των συντεταγμένων χρώματος σε διαφορετικές περιοχές του χρωματικού χώρου να παράγουν την ίδια αίσθηση αλλαγής χρώματος.

Οι οθόνες υπολογιστών, καθώς και οι οθόνες κινητών τηλεφώνων, smartphone και tablet, αποτελούνται από χιλιάδες μικρά τετράγωνα που ονομάζονται pixel (αν κοιτάξετε προσεκτικά την οθόνη, μπορείτε να τα δείτε). Όταν η οθόνη είναι απενεργοποιημένη, είναι μαύρη επειδή δεν εκπέμπει φως όταν είναι αναμμένη, κάθε pixel παίρνει διαφορετικό χρώμα, το οποίο δημιουργεί την εικόνα που βλέπουμε όταν κοιτάμε την οθόνη.

Όταν ορίζουμε ένα χρώμα για το πλαίσιο ενός στοιχείου, φόντου ή κειμένου, ορίζουμε το χρώμα ειδικά για τα pixel από τα οποία αποτελούνται. Υπάρχουν δύο γενικές προσεγγίσεις για τον καθορισμό των χρωμάτων στο CSS: με το όνομα ή την τιμή. Το πιο απλό είναι να καθορίσετε ένα όνομα: το κόκκινο είναι κόκκινο, το μπλε είναι μπλε και ούτω καθεξής, αλλά το CSS δεν παρέχει πολλά ονόματα χρωμάτων από τα οποία μπορείτε να επιλέξετε. Από την άλλη πλευρά, ο καθορισμός μιας τιμής χρώματος συνεπάγεται μια πολύ μεγαλύτερη επιλογή αποχρώσεων. Υπάρχουν διάφοροι τρόποι για να καθορίσετε μια τιμή χρώματος, οι δύο πιο συνηθισμένοι είναι οι τιμές RGB και δεκαεξαδικές τιμές. Αποτελούν μέρος του CSS από την πρώτη κιόλας έκδοση και κάθε πρόγραμμα περιήγησης ιστού τα υποστηρίζει. Το CSS3 εισήγαγε πολλές ακόμη επιλογές για τον καθορισμό του χρώματος: RGBA, HSL και HSLA, είναι λιγότερο cross-browser, αλλά οι πιο πρόσφατες εκδόσεις των προγραμμάτων περιήγησης τις υποστηρίζουν ήδη.

Ονόματα λουλουδιών

Ο απλούστερος και πιο προφανής τρόπος για να καθορίσετε ένα χρώμα στο CSS είναι να επιλέξετε ένα προκαθορισμένο όνομα χρώματος από ένα σύνολο λέξεων-κλειδιών. Διατίθενται συνολικά 147 λέξεις-κλειδιά με ονόματα χρωμάτων: 17 ονόματα είναι τυπικά χρώματα που εισήχθησαν στις πρώτες εκδόσεις της HTML (λευκό, μαύρο, κόκκινο, κίτρινο, μπλε, πράσινο, πορτοκαλί, μωβ, γκρι, ασημί, aqua, φούξια, λάιμ , βυσσινί, ναυτικό, ελιά και γαλαζοπράσινο) και 130 επιπλέον που προστέθηκαν στο CSS2. Μπορείτε να δείτε ολόκληρη τη λίστα με τα διαθέσιμα ονόματα χρωμάτων στην ενότητα HTML του πίνακα χρωμάτων μας.

RGB και RGBA

Το σύστημα RGB χρησιμοποιεί τρεις αριθμούς που περιγράφουν τις σχετικές ποσότητες κόκκινου, πράσινου και μπλε που αναμειγνύονται μεταξύ τους για να παράγουν οποιαδήποτε απόχρωση. Οι αριθμοί μπορεί να κυμαίνονται από 0 έως 255. Εξετάστε τον κωδικό RGB για το σκούρο μωβ χρώμα: rgb(204, 51, 255), ο οποίος μπορεί, για παράδειγμα, να εφαρμοστεί σε μια ιδιότητα CSS που είναι υπεύθυνη για το χρώμα της γραμματοσειράς:

Χρώμα: rgb(205, 51, 255);

Το σύστημα RGBA προσθέτει έναν άλλο αριθμό που περιγράφει τη διαφάνεια του χρώματος, η τιμή μπορεί να κυμαίνεται από 0 (πλήρως διαφανές) έως 1 (εντελώς αδιαφανές). Η τιμή 0,5 κάνει το χρώμα ημιδιαφανές, σκεφτείτε μια ημιδιαφανή εκδοχή του σκούρου μωβ, που ορίζεται χρησιμοποιώντας το σύστημα RGBA:

Χρώμα: rgba(204, 51, 255, 0,5);

Μπορείτε να δείτε ότι οι τιμές του κόκκινου, του πράσινου και του μπλε χρώματος είναι παρόμοιες με το σύστημα RGB. Ο τέταρτος αριθμός - 0,5 είναι ο βαθμός διαφάνειας. Το "A" στο RGBA σημαίνει κανάλι άλφα, το οποίο είναι ένας όρος γραφικού σχεδιασμού που σημαίνει διαφάνεια.

Τα χρώματα RGBA είναι χρήσιμα για τη δημιουργία ημιδιαφανών στοιχείων που κάνουν ορατά τα στοιχεία από κάτω τους.

HSL και HSLA

Το σύστημα HSL (απόχρωση, κορεσμός, ελαφρότητα) περιγράφει χρώματα με βάση την απόχρωση, τον κορεσμό και την ελαφρότητα. Εδώ είναι το ίδιο σκούρο μωβ χρώμα που καθορίζεται σε μορφή HSL:

Χρώμα: hsl(285, 100%, 60%);

Ο πρώτος αριθμός είναι η απόχρωση, εκφρασμένη σε μοίρες από 0 έως 360, η οποία καθορίζει τη θέση του χρώματος στον τροχό χρώματος. Ο δεύτερος αριθμός, ο κορεσμός, που ορίζεται ως ποσοστό από 0% έως 100%, δείχνει πόσο κορεσμένο (έντονο) θα είναι το χρώμα. Ο τρίτος αριθμός είναι η ελαφρότητα, ορίζεται ως ποσοστό ακριβώς όπως ο κορεσμός, η φωτεινότητα δείχνει πόσο ανοιχτό ή σκούρο θα είναι το χρώμα.

Το σύστημα HSLA, όπως και το RGBA, προσθέτει έναν τέταρτο αριθμό που κυμαίνεται από το 0 έως το 1 που καθορίζει πόσο διαφανές πρέπει να είναι το χρώμα. Η τιμή 0,5 κάνει το χρώμα ημιδιαφανές, λάβετε υπόψη την ημιδιαφανή έκδοση του σκούρου μωβ, που ορίζεται χρησιμοποιώντας το σύστημα HSLA:

Χρώμα: hsla(285, 100%, 60%, 0,5);

Δεκαεξαδικές τιμές χρώματος

Ο δεκαεξαδικός χρωματικός κώδικας είναι οι έξι χαρακτήρες που ακολουθούν το σύμβολο #:

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

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

Χρώμα: #f00; χρώμα: #ff0000;

Σημείωση: Τα προγράμματα περιήγησης που δεν υποστηρίζουν αυτές τις τιμές χρώματος (rgba, hsl και hsla) δεν συσχετίζουν κανένα χρώμα με το φόντο ή τη γραμματοσειρά, αγνοώντας εντελώς τη δήλωση. Σε αυτήν την περίπτωση, το φόντο του στοιχείου χρησιμοποιεί την προεπιλεγμένη τιμή (γίνεται εντελώς διαφανές) και το κείμενο χρησιμοποιεί είτε την προεπιλεγμένη τιμή (μαύρο χρώμα) είτε ένα χρώμα που κληρονομείται από το γονικό στοιχείο.

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

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

Μπορείτε να καθορίσετε τις τιμές των χρωμάτων σας σε διάφορες μορφές. Ο παρακάτω πίνακας παραθέτει όλες τις πιθανές μορφές:

Οι αναφερόμενες μορφές περιγράφονται λεπτομερέστερα παρακάτω.

Χρώματα CSS - Hex Codes

Δεκαεξαδικός χρωματικός κώδικαςείναι μια εξαψήφια αναπαράσταση του χρώματος. Τα δύο πρώτα ψηφία (RR) αντιπροσωπεύουν την κόκκινη τιμή, τα επόμενα δύο αντιπροσωπεύουν την πράσινη τιμή (GG) και τα δύο τελευταία αντιπροσωπεύουν την μπλε τιμή (BB).

CSS Colors - Short Hex Codes

Σύντομος εξαγωνικός χρωματικός κώδικαςείναι μια συντομότερη μορφή σημειογραφίας έξι χαρακτήρων. Σε αυτή τη μορφή, κάθε ψηφίο επαναλαμβάνεται για να παραχθεί μια ισοδύναμη εξαψήφια τιμή χρώματος. Για παράδειγμα: το #0F0 γίνεται #00FF00.

Η δεκαεξαδική τιμή μπορεί να ληφθεί από οποιοδήποτε λογισμικό γραφικών όπως το Adobe Photoshop, το Core Draw κ.λπ.

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

Χρώματα CSS - Τιμές RGB

Τιμή RGBείναι ένας χρωματικός κώδικας που ορίζεται χρησιμοποιώντας την ιδιότητα rgb(). Αυτή η ιδιότητα παίρνει τρεις τιμές: μία για το κόκκινο, το πράσινο και το μπλε. Η τιμή μπορεί να είναι ακέραιος, από 0 έως 255, ή ποσοστό.

Σημείωση:Δεν υποστηρίζουν όλα τα προγράμματα περιήγησης την ιδιότητα χρώματος rgb(), επομένως δεν συνιστάται η χρήση της.

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

Γεννήτρια κωδικών χρώματος

Μπορείτε να δημιουργήσετε εκατομμύρια χρωματικούς κωδικούς χρησιμοποιώντας την υπηρεσία μας.

Ασφαλή χρώματα προγράμματος περιήγησης

Παρακάτω είναι ένας πίνακας με 216 χρώματα που είναι τα πιο ασφαλή και ανεξάρτητα από τον υπολογιστή. Αυτά τα χρώματα στο CSS κυμαίνονται από 000000 έως δεκαεξαδικό κώδικα FFFFFF. Είναι ασφαλή στη χρήση, επειδή διασφαλίζουν ότι όλοι οι υπολογιστές εμφανίζουν σωστά το χρώμα όταν εργάζεστε με την παλέτα χρωμάτων 256.

Εκφράζω την έμμεση ευγνωμοσύνη μου στην Google για την ιδέα και προσφέρω τη σκυτάλη στους συναδέλφους μου: είναι απαραίτητο να μοιραστώ με τους αναγνώστες ξένους πόρους για την ανάπτυξη ιστού από τη ροή RSS μου, οι οποίοι γράφουν με ουσιαστικό και ενδιαφέροντα τρόπο για αυτό το θέμα. Για να μειώσετε την αδράνεια, πρέπει να ακολουθήσετε ορισμένες απλές διατάξεις:

1. Στο ιστολόγιό σας, δημοσιεύστε μια μετάφραση (μπορείτε ελεύθερα, με σχόλια και προσθήκες) ενός άρθρου από τον παρουσιαζόμενο πόρο.
2. Οι μεταφράσεις, όπως και οι πηγές τους, δεν πρέπει να επαναλαμβάνονται για να διασφαλίζεται η κάλυψη και η ποικιλομορφία των πληροφοριών.
3. Είναι σημαντικό να αναφέρουμε τον blogger από τον οποίο ελήφθησαν τα καλά νέα και, αν είναι δυνατόν, να δώσουμε τη σκυτάλη περαιτέρω.
4. Ο χρονισμός του ρελέ δεν έχει ρυθμιστεί. Σίγουρα θα βρεθεί κάποιος που θα σταματήσει αυτή τη βακκαναλία.

Η αρχική πηγή αυτής της ανάρτησης ήταν μια από τις αναρτήσεις του Drew McLellan στο συλλογικό ημερολόγιο blog 24ways. Πηγαίνω!

Τι είναι το χρώμα RGBA;

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

Το CSS3 προσφέρει μερικούς νέους τρόπους για τον καθορισμό του χρώματος, ένας από τους οποίους είναι η χρήση του χρωματικού μοντέλου RGBA. Το "A" στο ακρωνύμιο σημαίνει "Alpha". Η αξία του είναι υπεύθυνη για τη διαφάνεια του χρώματος. Χρησιμοποιώντας αυτό το μοντέλο, μπορούμε να καθορίσουμε όχι μόνο τον απαιτούμενο συνδυασμό κόκκινου, πράσινου και μπλε, αλλά και να προσδιορίσουμε πόσο το χρώμα «λάμπει». Κάτι παρόμοιο μπορεί να παρατηρηθεί όταν εργάζεστε με επίπεδα στο Photoshop.

Σε τι χρησιμεύει τότε η ιδιότητα αδιαφάνειας;

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

Έχουμε μια κεφαλίδα h1 με συγκεκριμένα χρώματα για κείμενο και φόντο, που βρίσκεται σε μια σελίδα με εικόνα φόντου.

H1 (χρώμα: rgb(0, 0, 0); χρώμα φόντου: rgb(255, 255, 255); )

Ορίζοντας την ιδιότητα αδιαφάνειας, μπορείτε να εφαρμόσετε διαφάνεια σε ολόκληρο το στοιχείο:

H1 (χρώμα: rgb(0, 0, 0); χρώμα φόντου: rgb(255, 255, 255); αδιαφάνεια: 0,5; )

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

H1 (χρώμα: rgb(0, 0, 0); χρώμα φόντου: rgba(255, 255, 255, 0.5); )

Ή αφήστε το φόντο αμετάβλητο και εκχωρήστε διαφάνεια μόνο στο κείμενο:

H1 (χρώμα: rgba(0, 0, 0, 0,5); χρώμα φόντου: rgb(255, 255, 255); )

Είναι πιθανώς λιγότερο συνηθισμένο να χρησιμοποιείτε τη σύνταξη rgb() για να καθορίσετε ένα χρώμα παρά με δεκαεξαδικό συμβολισμό (όπως #fff), αλλά σε αυτήν την περίπτωση είναι απολύτως απαραίτητο, καθώς είναι αδύνατο να γράψετε μια τιμή RGBA σε δεκαεξαδικό συμβολισμό. Επομένως, ορίζουμε την rgba() ακριβώς ως εξής:

Χρώμα: rgba(255, 255, 255, 0,5);

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

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

Υποστήριξη προγράμματος περιήγησης

Τα περισσότερα σύγχρονα προγράμματα περιήγησης (Firefox, Safari, Opera, Google Chrome) υποστηρίζουν χρώματα RGBA, αλλά όχι τον Internet Explorer.

Δεν μένει τίποτα άλλο από το να καθορίσετε χρώματα RGBA για προγράμματα περιήγησης που τα υποστηρίζουν και να δημιουργήσετε τα δικά σας «δεκανίκια» για τα υπόλοιπα.

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

H1 (χρώμα: rgb(127, 127, 127); χρώμα: rgba(0, 0, 0, 0.5); )

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

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

H1 ( φόντο: διαφανές url(black50.png); φόντο: rgba(0, 0, 0, 0.5) κανένα; )

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

Κάτι άλλο

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

Div ( χρώμα: rgba(255, 255, 255, 0.8); χρώμα φόντου: rgba(142, 213, 87, 0.3); ) div:hover (χρώμα: rgba(255, 255, 255, 1); φόντο- χρώμα: rgba(142, 213, 87, 0,6 )

Η συνετή χρήση της διαφάνειας για τα χρώματα περιγράμματος θα βοηθήσει ορισμένα στοιχεία στη σελίδα να φαίνονται πιο οργανικά:

Div ( χρώμα: rgb(0, 0, 0); χρώμα φόντου: rgb(255, 255, 255); περίγραμμα: 10 εικονοστοιχεία συμπαγές rgba (255, 255, 255, 0.3); )

Τελικά

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