porcupine colors

porcupine colors

ΑρχικήJournal › Κείμενα με RGBA χρώματα

Κείμενα με RGBA χρώματα

Βλέποντας το DVD του Andy Clarke, Designing with CSS, έμαθα μια τεχνική για το κείμενο και το χρώμα που τόσο καιρό ήταν μπροστά στα μάτια μου, αλλά ποτέ δεν μπόρεσα να το συνειδητοποιήσω.

Η τεχνική έχει να κάνει με το να δίνουμε RGBA τιμές στα κείμενά μας, αντί για τις κλασσίκες hexadecimal τιμές π.χ. #123456.

Γιατί αυτό είναι καλό; Γιατί αν κρατήσουμε σταθερή την τιμή του RGB με κάποιο επίσης σταθερό (αλλά όχι μηδενικό) Α, μπορούμε να πάρουμε πολλές αποχρώσεις του χρώματος του κειμένου ανάλογα με το background της σελίδας.

Παράδειγμα:
Στις παρακάτω εικόνες έχω δώσει εξής σταθερές τιμές στο χρώμα για την επικεφαλίδα και την παράγραφο. Οι CSS κανόνες για τα κείμενα είναι μόνο μία γραμμή ο καθένας:

h1{
	color: rgba(255, 255, 255, .5)
}

p{
	color: rgba(255, 255, 255, .8)
}

Την ίδια στιγμή, αλλάζω το background και βλέπουμε το εξής:

RGBA

Το χρώμα των κειμένων είναι πάντα το ίδιο και στην τιμή του (λευκό) και στο ποσοστό της διαφάνειάς του, μόνο που το background χρώμα της σελίδας του δίνει άλλες αποχρώσεις.

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

Για τον Andy Clarke αυτός είναι ένας ακόμα λόγος που αξίζει να σχεδιάζουμε απευθείας στον browser και βέβαια έχει δίκιο. Easy peasy.

To Journal

Επιστροφή στην κεντρική του Journal.

Ενα απο τα Projects μας

Astrology App

Astrology App

Design για iOS & Android

Σχεδιάζουμε κι αναπτύσσουμε καλύτερα websites & apps.

Μπορεί να μην είμαι πολύ έξυπνος, αλλά η Ρωξάννη είναι Ένα testimonial από τη Henny Swan