Introducere în Web Development

Unele din proprietățile CSS setează culorile elementelor. Avem mai multe moduri de a da o culoare, pe care le vom învăța în această lecție.

Nume de culori

Cel mai simplu este să folosim numele culorii în limba engleză. Am folosit asta în exemple din lecțiile trecute. Vezi aici o listă completă de culori pe care le poți folosi așa.

Pot părea foarte multe, dar sunt puține. Un design poate cere o nuanță specifică pentru unele culori.

Pe lângă cele la care te-ai aștepta (red, green, pink, etc.), mai există și transparent. Poate fi folosit atunci când trebuie neapărat pusă o culoare, sau pentru a suprascrie design-un unui element care are deja culoare setată.

currentColor

Cuvântul cheie currentColor îți permite să folosești culoarea font-ului (definită cu ajutorul proprietății color) în alte locuri.

De exemplu, poate vrei să faci conturul mereu de aceeași culoare la un buton.

                    .btn {
  border-color: currentColor;
}
                

RGB

Sistemul de culori RGB se bazează pe faptul că folosind doar 3 culori (R - roșu, G - verde, B - albastru), la diferite intensități, se poate forma orice altă culoare.

Valoarea intensității este definită prin valori între 0 și 255. 0 înseamnă că acea culoare este complet oprită. Dacă toate cele 3 culori sunt oprite, se ajunge la culoarea neagră. Dacă toate sunt pornite la intensitate maximă, se ajunge la culoarea alb.

Pentru a defini culori folosind RGB, avem două opțiuni:

• folosind funcția rgb(«roșu», «verde», «albastru»), unde fiecare intensitate este o valoare între 0 și 255. În sintaxa tradițională, numerele erau separate prin virgulă, dar acum se pot separa și prin spațiu:
  rgb(«roșu» «verde» «albastru»)

• folosind valori hexazecimale cu 3 sau 6 cifre prefixate de diez (#): #f45 #ff4455

RGBA

Atunci când avem nevoie de o culoare semi-transparentă, putem folosi:

• funcția rgba(«roșu»,«verde»,«albastru»,«transparență»)
  sau rgba(«roșu» «verde» «albastru» / «transparență»),
  unde transparența se dă

  • printr-un număr cu virgulă între 0 (complet transparent) și 1 (complet opac)

  • Printr-un procent între 0% (complet transparent) și 100%

• folosind valori hexazecimale cu 4 cifre, unde ultima cifră reprezintă transparența. 0 înseamnă complet transparent, F înseamnă complet opac

• folosind valori hexazecimale cu 8 cifre, unde ultimele două cifre reprezintă transparența. 00 înseamnă complet transparent, FF înseamnă complet opac.

Alte funcții de culori

Mai există și alte funcții pentru a defini culori în alte sisteme, dar nu le-am întâlnit foarte des. Vezi pagina de culori de la MDN, dar nu uita să arunci o privire și la secțiunea de suport, pentru că nu toate browserele suportă toate funcțiile.