CSS-də Rəng

9.1 CSS-də rəng təyin etmə üsulları

Rəng veb-dizaynda və veb-inkişafda mühüm rol oynayır. CSS-də rəng təyin etmək üçün bir neçə üsul mövcuddur ki, bunlar tərtibatçılara cazibədar və intuitiv interfeyslər yaratmağa imkan verir. Aşağıda CSS-də rənglərin təyini üçün müxtəlif üsulları, o cümlədən rəng modellərini, şəffaflıqı, qradiyentləri və rənglərlə işləmək üçün standart funksiyaları nəzərdən keçirəcəyik.

CSS-də rəng təyin etmə üsulları:

• Adlandırılmış rənglər
• Onaltılıq rənglər
• RGB və RGBA
• HSL və HSLA
• Qradiyentlər
• Şəffaflıq

9.2 RGB Rəng Modeli

RGB (Red Green Blue) rəng modelində rənglər qırmızı, yaşıl və mavi rənglərin qarışdırılması ilə müəyyən edilir. Hər bir rəngə 0-dan 255-ə qədər bir dəyər təyin edilir.

Sintaksis:

    
      color: rgb(255, 0, 0); /* Qırmızı */
      color: rgb(0, 255, 0); /* Yaşıl */
      color: rgb(0, 0, 255); /* Mavi */
    
  

Nümunə:

    
      body {
        background-color: rgb(240, 248, 255); /* Fon rəngi: aliceblue */
      }
    
  

9.3 HEX rəng modeli

HEX (Hexadecimal) rəngi onaltılıq dəyərlərlə təmsil edir. Hər bir dəyər (RR, GG, BB) 00-dan FF-ə qədər dəyişə bilər.

Sintaksis:

    
      color: #ff0000; /* Qırmızı */
      color: #00ff00; /* Yaşıl */
      color: #0000ff; /* Mavi */
    
  

Nümunə:

    
      h1 {
        color: #4CAF50; /* Yaşıl */
      }
    
  

9.4 HSL rəng modeli

HSL (Hue, Saturation, Lightness) rəngi ton, doyma və işıqlılıq kimi təmsil edir. Ton (Hue) dərəcələrlə (0-360) ölçülür, doyma (Saturation) və işıqlılıq (Lightness) isə faizlərlə (0%-100%) ifadə olunur.

Sintaksis:

    
      color: hsl(0, 100%, 50%); /* Qırmızı */
      color: hsl(120, 100%, 50%); /* Yaşıl */
      color: hsl(240, 100%, 50%); /* Mavi */
    
  

Nümunə:

    
      p {
        color: hsl(210, 100%, 50%); /* Mavi */
      }
    
  

9.5 Şəffaflıq: RGBA və HSLA

Rənglərə şəffaflıq əlavə etmək üçün RGBA və HSLA modelləri istifadə olunur. Bu modellərdə dördüncü parametr — alfa-kanalı (Alpha) əlavə olunur, hansı ki şəffaflıq səviyyəsini 0-dan (tamamilə şəffaf) 1-ə qədər (tamamilə qeyri-şəffaf) təyin edir.

1. RGBA (Red, Green, Blue, Alpha):

Sintaksis:

    
      color: rgba(255, 0, 0, 0.5); /* Yarı şəffaf qırmızı */
      color: rgba(0, 255, 0, 0.3); /* Yarı şəffaf yaşıl */
      color: rgba(0, 0, 255, 0.7); /* Yarı şəffaf mavi */
    
  

Nümunə:

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Yarı şəffaf pomidor rəngi */
      }
    
  

2. HSLA (Hue, Saturation, Lightness, Alpha):

Sintaksis:

    
      color: hsla(0, 100%, 50%, 0.5); /* Yarı şəffaf qırmızı */
      color: hsla(120, 100%, 50%, 0.3); /* Yarı şəffaf yaşıl */
      color: hsla(240, 100%, 50%, 0.7); /* Yarı şəffaf mavi */
    
  

Nümunə:

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Yarı şəffaf mavi */
      }