Mən Google-a ideyaya görə dolayı təşəkkürümü bildirirəm və estafeti həmkarlarıma təklif edirəm: bunu oxucularla bölüşmək lazımdır. xarici resurslar məzmunlu və maraqlı yazan RSS-dən veb inkişafı haqqında bu məsələ. Boş söhbətləri azaltmaq üçün bir sıra sadə müddəalara əməl etməlisiniz:
- Bloqunuzda təqdim olunan mənbədən məqalənin tərcüməsini (sərbəst, şərh və əlavələrlə) dərc edin.
- Məlumatın əhatəliliyini və müxtəlifliyini təmin etmək üçün tərcümələr də öz mənbələri kimi təkrar edilməməlidir.
- Xoş xəbərin alındığı bloggeri qeyd etmək və mümkünsə, estafeti daha da uzatmaq vacibdir.
- Rölenin vaxtı təyin edilməyib; Bu bacchanaliyanın qarşısını alacaq biri mütləq olacaq.
Bu yazının orijinal mənbəyi Drew McLellanın 24ways kollektiv təqvim bloqundakı yazılarından biri idi. Get!
RGBA rəngi nədir?
Tələb olunan rəng çalarının yaradıldığını desəm, sirr açmayacağam CSS yolu qırmızı yaşıl və mavinin lazımi nisbətlərdə qarışdırılması. Bununla belə, bir nüans var - hansı rəngi seçdiyimizdən asılı olmayaraq, həmişə möhkəm və qeyri-şəffaf olacaq.
CSS3 rəngi təyin etmək üçün bir neçə yeni yol təklif edir, onlardan biri RGBA rəng modelindən istifadə edir. Akronimdəki "A" "Alfa" deməkdir; onun dəyəri rəngin şəffaflığından məsuldur. Bu modeldən istifadə etməklə biz nəinki qırmızı, yaşıl və mavinin tələb olunan birləşməsini qura bilərik, həm də rəngin nə qədər “parıldadığını” müəyyən edə bilərik. Photoshop-da təbəqələrlə işləyərkən oxşar bir şey müşahidə edilə bilər.
O zaman qeyri-şəffaflıq xüsusiyyəti nədir?
Məsələ ondadır ki, rəng üçün şəffaflığın tərifi css-dən istifadə edərək təyin olunan element üçün şəffaflıq parametrindən fərqlidir. qeyri-şəffaflıq xüsusiyyətləri. Bir nümunəyə baxaq.
Bizdə mətn və fon üçün xüsusi rənglərə malik h1 başlığı var, fon şəkli olan səhifədə yerləşir.
H1 (rəng: rgb(0, 0, 0); fon rəngi: rgb(255, 255, 255); )
Qeyri-şəffaflıq xassəsini təyin etməklə siz bütün elementə şəffaflıq tətbiq edə bilərsiniz:
H1 (rəng: rgb(0, 0, 0); fon rəngi: rgb(255, 255, 255); qeyri-şəffaflıq: 0,5; )
RGBA modeli bizə daha çevik bir fürsət təqdim edir - bütün elementə deyil, yalnız rəng şəffaflığına nəzarət etmək. Məsələn, yalnız fon rəngi üçün şəffaflığı təyin edə bilərsiniz:
H1 (rəng: rgb(0, 0, 0); fon rəngi: rgba(255, 255, 255, 0.5); )
Və ya fonu dəyişməz qoyun və şəffaflığı yalnız mətnə təyin edin:
H1 (rəng: rgba(0, 0, 0, 0.5); fon rəngi: rgb(255, 255, 255); )
Rəngi təyin etmək üçün rgb() sintaksisindən istifadə etmək onaltılıq notasiyadan (məsələn, #fff) daha az yaygındır, lakin bu halda Bu mütləq zərurətdir, çünki onaltılıq notasiyada RGBA dəyərini yazmaq mümkün deyil. Buna görə də rgba() funksiyasını tam olaraq belə təyin etdik:
Rəng: rgba(255, 255, 255, 0.5);
Rgb()-də olduğu kimi, ilk üç dəyər qırmızı, yaşıl və mavi rənglərin birləşməsindən məsuldur. Onlar həm 0-255 aralığında tam dəyərləri, həm də 0-dan 100% aralığında faizləri qəbul edə bilərlər. Dördüncü dəyər 0 (tamamilə şəffaf) ilə 1 (tamamilə qeyri-şəffaf) arasında dəyişən şəffaflıq dərəcəsini müəyyən edir.
Bu metodu CSS-də adətən rənglər təyin etdiyiniz hər yerdə etibarlı şəkildə istifadə edə bilərsiniz: fon və mətn rəngləri, haşiyələr, konturlar və s.
Brauzer dəstəyi
Ən müasir brauzerlər (Firefox, Safari, Opera, Google Chrome) RGBA rənglərini dəstəkləyir, lakin Internet Explorer-i deyil.
Onları dəstəkləyən brauzerlər üçün RGBA rənglərini təyin etməkdən və qalanları üçün öz “xalçalarınızı” tapmaqdan başqa heç bir işimiz yoxdur.
CSS təhlili brauzerlərdə elə işləyir ki, qaydaların təhlili zamanı hər hansı naməlum dəyərə rast gəlinsə, ona məhəl qoyulmayacaq. Gəlin bu bilikdən “anlaşılmayan” brauzerlər üçün normal qeyri-şəffaf rəng göstərmək üçün istifadə edək. Bunun üçün formatda rəngi ilk elan kimi göstərmək kifayətdir. RGB, ikincisi isə formatda rəng kölgəsini təyin edir RGBA— bu rəng modelini dəstəkləyən brauzerlər üçün.
H1 (rəng: rgb(127, 127, 127); rəng: rgba(0, 0, 0, 0.5); )
Fon rəngi xüsusiyyətinə şəffaflıq tətbiq etmək istədiyiniz hallarda, eyni effekti əldə etmək üçün alfa kanalı ilə PNG şəklini istifadə edə bilərsiniz. Əlbəttə ki, bu, "təmiz" CSS-dən fərqli olaraq daha bahalı bir üsuldur, çünki hər şəffaflıq səviyyəsi üçün öz PNG-nizi yaratmalı olacaqsınız, lakin balıq yox, balıq yoxdur.
Əvvəlki nümunədə olduğu kimi eyni prinsipdən istifadə edirik: əvvəlcə bütün brauzerlər üçün fon təyin edirik, sonra isə RGBA-nı nəzərə alaraq xətti yenidən yazırıq.
H1 ( fon: şəffaf url(black50.png); fon: rgba(0, 0, 0, 0.5) heç biri; )
Qeyd etmək lazımdır ki, bu dizayn işləyir, çünki biz qeyd fonunun stenoqrafiya formasından istifadə edirik ki, bu da bizə eyni vaxtda təyin etməyə imkan verir. fon rəngi Və fon şəkli. Naməlum rgba() dəyəri ilə qarşılaşan brauzerlər ikinci sətrə tamamilə məhəl qoymayacaq və birinci bəyannaməni işləyəcək.
Başqa bir şey
RGBA-nın əsas üstünlüyü rəsmlərdən istifadə etmədən müxtəlif dizayn həlləri yaratmaq imkanıdır. Burada fayda təkcə daha yüngül (və buna görə də daha sürətli) səhifələr deyil, həm də vaxta qənaətdir: qeyd olunan texnologiyadan istifadə edən saytları yaratmaq və saxlamaq daha asandır. Javascript-in təsiri altında və ya istifadəçi hərəkətlərinə cavab olaraq CSS-də dəyərlər asanlıqla dəyişə bilər. Bizim vəziyyətimizdə təsvirlər belə çevrilmələri çətinləşdirə bilər.
Div (rəng: rgba(255, 255, 255, 0.8); fon rəngi: rgba(142, 213, 87, 0.3); ) div: hover (rəng: rgba(255, 255, 255, 1); fon- rəng: rgba(142, 213, 87, 0.6)
Haşiyə rəngləri üçün şəffaflığın ağıllı istifadəsi səhifədəki bəzi elementlərin daha üzvi görünməsinə kömək edəcək:
Div (rəng: rgb(0, 0, 0); fon rəngi: rgb(255, 255, 255); haşiyə: 10px bərk rgba(255, 255, 255, 0.3); )
Nəhayət
Çox vaxt olduğu kimi, qabaqcıl CSS innovasiyaları aparıcı brauzerlər tərəfindən dəstəklənir. Ümid edək ki, Redmonddan olan uşaqlar həyatda nəyisə dərk etsinlər və çoxluğa qoşulsunlar.
Rəng daxil CSS dili müxtəlif yollarla müəyyən edilə bilər:
- adı ilə,
- By onaltılıq dəyər,
- RGB və RGBA formatlarında,
- HSL və HSLA formatlarında.
Rəngi adla təyin edin
Brauzerlər elementlər üçün bəzi rənglərin adla müəyyənləşdirilməsini dəstəkləyir. Bu cədvəldə bəziləri açar sözlər(İngilis rəng adları) rəng xüsusiyyətlərini, RGB kodunu, onaltılıq kodunu (HEX) və HSL kodunu müəyyən etmək üçün istifadə olunur.
| ad | Rəng | RGB | HEX | HSL | Təsvir |
|---|---|---|---|---|---|
| ağ | rgb(255, 255, 255) | #ffffff və ya #fff | hsl(0, 0%, 100%) | Ağ | |
| gümüş | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Boz | |
| Boz | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Tünd boz | |
| qara | rgb(0, 0, 0) | #000000 və ya #000 | hsl(0, 0%, 0%) | Qara | |
| tünd qırmızı | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Tünd Qırmızı | |
| qırmızı | rgb(255, 0, 0) | #ff0000 və ya #f00 | hsl(0, 100%, 50%) | Qırmızı | |
| narıncı | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Narıncı | |
| sarı | rgb(255, 255, 0) | #ffff00 və ya #ff0 | hsl(60, 100%, 50%) | Sarı | |
| zeytun | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Zeytun | |
| əhəng | rgb(0, 255, 0) | #00ff00 və ya #0f0 | hsl(120, 100%, 50%) | Açıq yaşıl | |
| yaşıl | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Yaşıl | |
| aqua | rgb(0, 255, 255) | #00ffff və ya #0ff | hsl(180, 100%, 50%) | Mavi | |
| mavi | rgb(0, 0, 255) | #0000ff və ya #00f | hsl(240, 100%, 50%) | Mavi | |
| donanma | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Tünd göy | |
| mavi | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Mavi yaşıl | |
| fuşya | rgb(255, 0, 255) | #ff00ff və ya #f0f | hsl(300, 100%, 50%) | Çəhrayı | |
| bənövşəyi | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Bənövşə |
Bu rəng adlarının istifadəsinə bir nümunədir, rəng adları genişləndirilmiş cədvəldən götürülmüşdür.
Bu kod necə işləyir:
RGB istifadə edərək rəng təyin etmək
RGB əlavə rəng modelidir. Aktiv Ingilis dili əlavə- əlavə. RGB ingilis sözlərinin abbreviaturasıdır: Red, Green, Blue - qırmızı, yaşıl, mavi). Buradan aydın olur ki, RGB modelində rənglər tərəfindən sintez olunur üç əlavə edir müxtəlif miqdarda rənglər (qırmızı, yaşıl, mavi).
Qırmızı, yaşıl və qarışdırılır mavi rənglər bir neçə milyon çalar əldə edə bilərsiniz. Bütün mümkün kombinasiyalar kompüter yaddaşında saxlanılır.
Nöqtəyə gəlin.
Bu formatda xassələri təyin etmək üçün rgb(r, g, b) qeydindən istifadə edin, burada r, g, b hər rəng üçün üç kanaldır (qırmızı, yaşıl, mavi). Hər bir kanal üçün dəyərlər 0 ilə 255 arasında müəyyən edilir.
Nümunə kodu.
Hər şeyi aydınlaşdırmaq üçün bir kod nümunəsi:
Bu nümunə belə işləməlidir:
Şəkil 1. RGB-də rənglər. Məsələn, izahatlar.
Səhifənin əvvəlində biz div.rgb sinfini yaradırıq, o, teq tərəfindən yaradılmış bloklar üçün lazımdır
Sonra, kodda blokun fon rəngini təyin etdik
Bu nümunəni redaktə etməyə və öz dəyərlərinizi göstərməyə çalışın, məsələn, rgb(100, 100, 100) .
RGBA istifadə edərək rəng təyin etmək
CSS3-də göründü yeni alət rənglə işləmək üçün - RGBA formatı. Bunu RGB modelinin təkamülü adlandırmaq olar, lakin bir yeni kanalın - A və ya alfa kanalının əlavə edilməsi ilə. Bu kanal rəngin şəffaflığını təyin edir. Onun dəyərləri 0-dan 1-ə qədər diapazonda müəyyən edilir. 0 dəyəri tam şəffaflığa, 1 - tam qeyri-şəffaflığa uyğundur (rəng burada göstərildiyi kimi olacaq. ilk üç RGB kanalları) və 0,4 və ya 0,6 kimi ara dəyərlər - müxtəlif dərəcələrdə şəffaflıq.
Nümunə kodu.
Bu necə işləyəcək:
Bu kod öz yolu ilə vizual təmsil rəng dəyərini təyin etmək üçün RGB modelindən istifadə edərək aşağıdakılara bənzəyir:
Onun nəticəsi budur:
Sıfıra bərabər olan bir alfa kanal dəyəri istənilən rəngi görünməz edir - birinə bərabər olan bir dəyər heç bir dəyişiklik olmadan RGB kodunu tərcümə edir. Rgba(255,0,0,1.0) xüsusiyyəti qırmızı rgb(255, 0, 0) rəngini göstərir.
Onaltılıq dəyər üzrə (HEX kodu)
Gündəlik həyatda biz onluq sayma sistemindən istifadə edirik. Onun mənşəyi çox sadədir - əlimizdə on barmaq var və barmaqlarımızla saymaq həyatda rahat olub. Əgər daxil onluq sistemi on rəqəm: 0-dan 9-a qədər və 10 rəqəmi növbəti rəqəmdir, sonra içəridə hexadecimal sistem Nömrənin 16 rəqəmi var və növbəti rəqəm 16 rəqəmidir.
Rəng kodlarını onaltılıq rəqəmlər kimi təyin etmək üçün adi koddan istifadə edin ondalık rəqəmlər 0-dan 9-a qədər və 10-dan 15-ə qədər rəqəmləri göstərmək üçün istifadə edin məktublar A-dan F-ə, yəni (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Aydınlıq üçün bunu cədvəldə yerləşdirək:
Qeydiyyat üçün onaltılıq ədədlər F-dən çox (onluq sistemdə 15), onluq sistemdə olduğu kimi, iki rəqəmin birləşməsindən də istifadə edin, lakin onaltılıq sistemdə, bu açıqdır. Bəli, qeyd üçün onluq ədəd Hexadecimal notationda 255 FF-dir.
Hexadecimal sistem kompüter üçün daha başa düşüləndir və onaltılıq dəyərlə təyin olunan dəyərləri daha sürətli emal edir.
Onaltılıq sistemdə rəng təyin etmək üçün əvvəl ədədi dəyər“#” işarəsi qoymalısınız, məsələn: #FFC0CB. #FFC0CB dəyərinin özü üç onaltılıq rəqəmdən ibarətdir FF, C0 və CB. Bu girişin mənası rəngin RGB formatında təyin edilməsi ilə eynidir (rgb(r, g, b)) - HEX kodundakı hər onaltılıq rəqəm RGB modelinin kanalında rəng doymasını göstərir.
Bu kod aşağıdakı elementləri göstərəcək:
Və burada "Rəng təyin etmək" bölməsinin nəticəsi olan bir şəkil RGB istifadə edərək"yuxarıdakı bu səhifədə.
Şəkil 1. RGB-də rənglər. Rənglərin eyni olduğunu görürük.
HEX rəng kodunun qısaldılmış qeydinə icazə verilir: 6 rəqəmli nömrə 3 rəqəmli nömrə kimi yazıla bilər. Bu, yalnız bir kanalın rəng dəyərindəki iki rəqəm təkrar edildikdə etibarlıdır.
Yəni, aşağıdakı abreviatura məqbuldur:
Məsələn, #ff22aa rəngi #f2a və ya #44aa22 rəngi #4a2 kimi yazıla bilər.
HSL-dən istifadə edərək rəngin qurulması
CSS3-də göründü yeni format rəngini göstərmək üçün.
HSL formatı ingilis sözlərinin abbreviaturasıdır: Hue (hue), Saturate (doyma) və Lightness (yüngüllük).
HSL-də hue, xüsusi rəng çarxındakı rəngin dəyəridir (Şəkil 2) və dərəcələrlə müəyyən edilir. RGB modeli ilə analogiyalar aparsaq, onda 0° qırmızıya, 120° yaşıl rəngə, 240° isə mavi rəngə uyğun gəlir.
Rəng dəyəri 0-dan 359-a qədər dəyişəcək.
Şəkil 2. HSL rəng çarxı. İkinci dəyər - doyma (Saturate) faiz olaraq təyin olunur. 100% doyma ilə rəng mümkün qədər "şirəli" olur, çünki doyma göstəricisi 0% -ə doğru hərəkət edir, rəng daha tutqun olur və boz rəngə çevrilir.
Üçüncü dəyər, Yüngüllük də faiz olaraq təyin edilir. Faiz nə qədər yüksək olsa, rəng daha parlaq olacaqdır. 0% və 100% həddindən artıq dəyərlər müvafiq olaraq qara (işıqsız) və ağ (həddindən artıq ifşa olunmuş) rəngləri göstərəcək və birinci kanalda rəng çarxından hansı rəngin seçildiyinin əhəmiyyəti yoxdur. Optimal rəng parlaqlığı dəyəri 50% -dir.
HSLA-dan istifadə edərək rəngin qurulması
HSLA formatı, RGB-nin RGBA ilə olduğu kimi, HSL ilə bağlıdır. IN HSL formatı A, RGBA-da olduğu kimi, rəng şəffaflığından məsul olan bir alfa kanalı əlavə edilmişdir.
HSL formatında göstərilən rəngi oxumaq daha asandır. Bunun intuitiv olduğunu deyə bilərik. Məsələn, yaddaşda HSL rəng çarxının şəkli varsa hsl(120,60%,50%) kodu son rəngi təmsil edə bilər. Eyni şeyi RGB və HEX formatları haqqında demək olmaz; bu formatlarda göstərilən rəng kodu yalnız monitorda göründükdən sonra aydın olur.
CSS3-də yeni formatlar (HSL, HSLA və RGBA) versiyalardan başlayaraq brauzerlərdə işləyir: IE 9.0, Opera 10.0 Firefox 3.0. Köhnə brauzerlərdə üslubları necə işlədə bilərəm?
Somebloсk ( fon rəngi: rgb(255,50,50); fon rəngi: rgba(255,50,50,0,85) )
Bu kodu köhnə brauzerlərdə istifadə edərkən, .somebloсk sinfi üçün fon rəngi, alfa kanalından istifadə etməyəcəyinə baxmayaraq, RGB formatında göstəriləcək.
Rəsmə diqqətlə baxın. Açılan pəncərənin fonu şəffaflaşdırılıb. Bu kifayət qədər ümumi dizayn texnikasıdır. Bunun necə həyata keçirilə biləcəyini düşünək.
Tapşırıq
Çarpaz brauzerin rəngini şəffaf edin.
Həll
Bu vəziyyətdə ilk fikir fon üçün əvvəlcədən təyin edilmiş şəffaflığı olan png24 şəklini istifadə etməkdir. Amma bu şəkil tamamilə lazımsızdır. Onsuz (və buna görə də serverə əlavə sorğu olmadan) çox yaxşı edə bilərsiniz. Hələ də optimal həlli tapmağa çalışaq.
İkinci fikir istifadə etməkdir. Ancaq bu vəziyyətdə çox rahat deyil. Axı, o zaman təkcə fon deyil, yazılar da şəffaf olacaq. Bəli, əslində, bir anda bütün pəncərə.
Əlbəttə ki, əlavə konteyner əlavə etməyə və yalnız ona qeyri-şəffaflıq tətbiq etməyə cəhd edə bilərsiniz, lakin bu HTML elementi yalnız bəzək üçün nəzərdə tutulacaq və şübhəsiz ki, lazımsız olacaqdır. Onsuz etmək mümkündürmü?
Əlbəttə edə bilərsiniz! RGBA istifadə edirsinizsə.
RGBA rəng təsviri formatı
CSS3 RGB və RGBA funksiyalarından istifadə edərək rəngi təyin etməyə imkan verir. Bu halda, bir baytın ayrıldığı hər bir rəng komponentinin nisbətini göstərməliyik (hər kəs bilmirsə, 0-dan 255-ə qədər).
Bu işin sintaksisi çox sadədir:
Fon: rgb(0, 255, 0); /* təmiz yaşıl */
RGBA üçün dördüncü parametr əlavə olunur - alfa şəffaflığı (0-dan 1-ə qədər).
Fon: rgba(255, 0, 0, 0.5); /* 50% şəffaflıqla təmiz qırmızı */
Budur, problemimizin həlli. Sadəcə olaraq fon rəngini təyin edin rgba istifadə edərək və hər şey bizə lazım olduğu kimi görünəcək. olmadan əlavə şəkillər və elementlər!
Bu nömrələri haradan ala bilərəm?
Photoshop-un damcı alətindən istifadə edərək rəngin komponentlərinə baxa bilərsiniz.
Çarpaz brauzer uyğunluğu haqqında
RGB funksiyası RGBA-dan çox köhnə olduğundan və CSS2 standartının günlərindən bəri mövcud olduğundan, ən qədim brauzerlərdən qorunmaq üçün aşağıdakı dublikat konstruksiyadan istifadə edə bilərsiniz:
SomeBlock (fon: rgb(255, 0, 0); fon: rgba(255, 0, 0, 0.5); )
Bu yanaşma ilə müasir brauzerlərin ulu babaları şəffaflığa malik olmayacaq, lakin rəngin özü düzgün qalacaq.
IE-yə ayrıca diqqət yetirməli olacaqsınız. Eşşəklər RGBA-nı 8-ci versiyaya qədər başa düşmürlər.
Həmişə olduğu kimi: kəndlilər üçün torpaq, fəhlələr üçün fabriklər, eşşəklər isə qoltuqaltı! Kimi.
Təbii ki, döyüş şəraitində biz bu qaydanı tətbiq edirik ayrı CSS bağladığımız.
SomeBlock (fon: şəffaf; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); böyüt: 1; )
Hiylə, başlanğıc və son rəngləri eyni (ff0000 - qırmızı) kimi təyin etmək və bu filtrdə gradient üçün alfa kanalını təyin edə biləcəyinizdən faydalanmaqdır (nümunədə dəyər 80-dir).
İstinad üçün: filtr onaltılıq sistemdən istifadə edir və tamamilə qeyri-şəffaf rəng üçün kod FF-dir (onluqda bu 255-dir). Müvafiq olaraq, onaltılıq 80 onluq 128, yəni 50% şəffaflıqdır.
Test edilib:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
CSS-də rəng kodları rəngləri təyin etmək üçün istifadə olunur. Tipik olaraq, rəng kodları və ya rəng dəyərləri elementin ön plan rəngi (məsələn, mətn rəngi, keçid rəngi) və ya elementin fon rəngi (fon rəngi, blok rəngi) üçün rəng təyin etmək üçün istifadə olunur. Onlar həmçinin düymənin, haşiyənin, markerin, hoverin və digər dekorativ effektlərin rəngini dəyişdirmək üçün istifadə edilə bilər.
Rəng dəyərlərinizi təyin edə bilərsiniz müxtəlif formatlar. Aşağıdakı cədvəldə bütün mümkün formatlar verilmişdir:
Sadalanan formatlar aşağıda daha ətraflı təsvir edilmişdir.
CSS Rəngləri - Hex Kodlar
Hexadecimal rəng kodu rəngin altı rəqəmli təmsilidir. İlk iki rəqəm (RR) qırmızı dəyəri, sonrakı iki rəqəmi təmsil edir yaşıl dəyər(GG), sonuncu isə mavi dəyərdir (BB).
CSS Rəngləri - Qısa Hex Kodlar
Qısa hex rəng kodu altı simvoldan ibarət qeydin daha qısa formasıdır. Bu formatda hər bir rəqəm ekvivalent altı rəqəmli rəng dəyəri yaratmaq üçün təkrarlanır. Məsələn: #0F0 #00FF00 olur.
Onaltılıq dəyər istənilən qrafikdən götürülə bilər proqram təminatı, kimi Adobe Photoshop, Core Draw və s.
CSS-də hər onaltılıq rəng kodundan əvvəl "#" hash işarəsi qoyulacaq. Aşağıda onaltılıq qeydlərdən istifadə nümunələri verilmişdir.
CSS Rəngləri - RGB Dəyərləri
RGB dəyəri rgb() xassəsindən istifadə edərək təyin olunan rəng kodudur. Bu xüsusiyyət üç dəyər alır: qırmızı, yaşıl və mavi üçün hər biri. Dəyər 0-dan 255-ə qədər tam ədəd və ya faiz ola bilər.
Qeyd: Bütün brauzerlər rgb() rəng xassəsini dəstəkləmir, ona görə də ondan istifadə etmək tövsiyə edilmir.
Aşağıda RGB dəyərlərindən istifadə edərək çoxlu rəngləri göstərən bir nümunə verilmişdir.
Rəng kodu generator
Xidmətimizdən istifadə edərək milyonlarla rəng kodu yarada bilərsiniz.
Brauzer Təhlükəsiz Rəngləri
Aşağıda ən təhlükəsiz və kompüterdən asılı olmayan 216 rəngdən ibarət cədvəl verilmişdir. CSS-də bu rənglər 000000 ilə FFFFFF arasında dəyişir hexadecimal kod. Onlardan istifadə etmək təhlükəsizdir, çünki 256 rəng palitrası ilə işləyərkən bütün kompüterlərin rəngi düzgün göstərməsini təmin edirlər.
| CSS-də "təhlükəsiz" rənglər cədvəli | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
HEX/HTML
HEX rəng RGB-nin onaltılıq təmsilindən başqa bir şey deyil.
Rənglər təqdim olunur üçlük forması hər qrupun öz rənginə cavabdeh olduğu onaltılıq rəqəm qrupları: #112233, burada 11 qırmızı, 22 yaşıl, 33 mavidir. Bütün dəyərlər 00 ilə FF arasında olmalıdır.
Bir çox proqramlar onaltılıq rəng qeydinin qısaldılmış formasına imkan verir. Əgər hər biri üç qrup eyni simvolları ehtiva edir, məsələn #112233, onda onlar #123 kimi yazıla bilər.
- h1 (rəng: #ff0000; ) /* qırmızı */
- h2 (rəng: #00ff00; ) /* yaşıl */
- h3 (rəng: #0000ff; ) /* mavi */
- h4 (rəng: #00f; ) /* eyni mavi, stenoqrafiya */
RGB
RGB (Qırmızı, Yaşıl, Mavi) rəng məkanı qırmızı, yaşıl və mavini qarışdırmaqla yaradıla bilən bütün mümkün rənglərdən ibarətdir. Bu model fotoqrafiya, televiziya və kompüter qrafikasında məşhurdur.
RGB dəyərləri 0-dan 255-ə qədər tam ədəd kimi göstərilmişdir. Məsələn, rgb(0,0,255) mavi olaraq göstərilir, çünki mavi parametr ən yüksək qiymətə (255), digərləri isə 0-a təyin edilmişdir.
Bəzi proqramlar (xüsusilə veb brauzerlər) RGB dəyərlərinin faiz qeydini dəstəkləyir (0%-dən 100%-ə qədər).
- h1 (rəng: rgb(255, 0, 0); ) /* qırmızı */
- h2 (rəng: rgb(0, 255, 0); ) /* yaşıl */
- h3 (rəng: rgb(0, 0, 255); ) /* mavi */
- h4 (rəng: rgb(0%, 0%, 100%); ) /* eyni mavi, faiz girişi */
RGB rəng dəyərləri bütün əsas brauzerlərdə dəstəklənir.
RGBA
Bu yaxınlarda müasir brauzerlər ilə işləməyi öyrəndi rəng modeli RGBA, obyektin qeyri-şəffaflığını təyin edən alfa kanalı dəstəyi ilə RGB-nin genişləndirilməsidir.
Məna RGBA rənglərişəklində göstərilir: rgba(qırmızı, yaşıl, mavi, alfa). Alfa parametri 0,0 (tam şəffaf) ilə 1,0 (tam qeyri-şəffaf) arasında dəyişən bir rəqəmdir.
- h1 (rəng: rgb(0, 0, 255); ) /* adi RGB-də mavi */
- h2 (rəng: rgba(0, 0, 255, 1); ) /* RGBA-da eyni mavi, çünki qeyri-şəffaflıq: 100% */
- h3 (rəng: rgba(0, 0, 255, 0.5); ) /* qeyri-şəffaflıq: 50% */
- h4 (rəng: rgba(0, 0, 255, .155); ) /* qeyri-şəffaflıq: 15,5% */
- h5 (rəng: rgba(0, 0, 255, 0); ) /* tamamilə şəffaf */
RGBA IE9+, Firefox 3+, Chrome, Safari və Opera 10+ versiyalarında dəstəklənir.
HSL
HSL rəng modeli RGB modelinin silindrik koordinat sistemində təmsilidir. HSL rəngləri tipik RGB ilə müqayisədə daha intuitiv və insan tərəfindən oxuna bilən şəkildə təmsil edir. Model tez-tez istifadə olunur qrafik proqramlar, rəng palitralarında və təsvirin təhlili üçün.
HSL Hue (rəng/rəng), Doyma (doyma), Yüngüllük/Luminance (parlaqlıq/yüngüllük/parlaqlıq, parlaqlıqla qarışdırılmamalıdır) deməkdir.
Hue rəngin rəng çarxındakı mövqeyini təyin edir (0-dan 360-a qədər). Doyma doymanın faiz dəyəridir (0%-dən 100%-ə qədər). Yüngüllük yüngüllük faizidir (0%-dən 100%-ə qədər).
- h1 (rəng: hsl(120, 100%, 50%); ) /* yaşıl */
- h2 (rəng: hsl(120, 100%, 75%); ) /* açıq yaşıl */
- h3 (rəng: hsl(120, 100%, 25%); ) /* tünd yaşıl */
- h4 (rəng: hsl(120, 60%, 70%); ) /* pastel yaşıl */
HSL IE9+, Firefox, Chrome, Safari və Opera 10+ versiyalarında dəstəklənir.
HSLA
RGB/RGBA kimi, HSL obyektin qeyri-şəffaflığını göstərmək üçün alfa kanalını dəstəkləyən HSLA rejiminə malikdir.
HSLA rəng dəyəri aşağıdakı kimi müəyyən edilir: hsla(rəng, doyma, yüngüllük, alfa). Alfa parametri 0,0 (tam şəffaf) ilə 1,0 (tam qeyri-şəffaf) arasında dəyişən bir rəqəmdir.
- h1 (rəng: hsl(120, 100%, 50%); ) /* normal HSL-də yaşıl */
- h2 (rəng: hsla(120, 100%, 50%, 1); ) /* HSLA-da eyni yaşıl, çünki qeyri-şəffaflıq: 100% */
- h3 (rəng: hsla(120, 100%, 50%, 0.5); ) /* qeyri-şəffaflıq: 50% */
- h4 (rəng: hsla(120, 100%, 50%, .155); ) /* qeyri-şəffaflıq: 15,5% */
- h5 (rəng: hsla(120, 100%, 50%, 0); ) /* tam şəffaf */
CMYK
Rəng CMYK modeli tez-tez rəngli çap və çap ilə əlaqələndirilir. CMYK (RGB-dən fərqli olaraq) çıxarıcı bir modeldir, yəni daha yüksək dəyərlər daha tünd rənglərlə əlaqələndirilir.
Rənglər mavi (Cyan), magenta (Magenta), sarı (Sarı), qara (Açar/qara K) əlavə edilməklə nisbəti ilə müəyyən edilir.
CMYK-da rəngi müəyyən edən rəqəmlərin hər biri həmin rəngin mürəkkəbini təşkil edən faiz nisbətini təmsil edir. rəng birləşməsi, daha doğrusu, verilmiş rəngli filmdə (və ya CTP vəziyyətində birbaşa çap formasında) fototipləmə maşınında göstərilən rastr nöqtəsinin ölçüsü.
Məsələn, PANTONE 7526 rəngini əldə etmək üçün siz 9 hissə mavi, 83 hissə qırmızı, 100 hissə sarı və 46 hissə qara rəngi qarışdırmalısınız. Bunu aşağıdakı kimi işarələmək olar: (9,83,100,46). Bəzən aşağıdakı təyinatlar istifadə olunur: C9M83Y100K46 və ya (9%, 83%, 100%, 46%) və ya (0.09/0.83/1.0/0.46).
HSB/HSV
HSB (həmçinin HSV kimi tanınır) HSL-ə bənzəyir, lakin onlar iki fərqli rəng modelidir. Onların hər ikisi silindrik həndəsə əsasındadır, lakin HSB/HSV "hexcone" modelinə, HSL isə "bi-hexcone" modelinə əsaslanır. Rəssamlar tez-tez bu modeldən istifadə etməyə üstünlük verirlər, ümumiyyətlə HSB/HSV cihazının rənglərin təbii qəbuluna daha yaxın olduğu qəbul edilir. Xüsusilə, HSB rəng modeli Adobe Photoshop proqramında istifadə olunur.
HSB/HSV Hue (rəng/rəng), Doyma (doyma), Parlaqlıq/Dəyər (parlaqlıq/dəyər) deməkdir.
Hue rəngin rəng çarxındakı mövqeyini təyin edir (0-dan 360-a qədər). Doyma doymanın faiz dəyəridir (0%-dən 100%-ə qədər). Parlaqlıq parlaqlığın faizidir (0%-dən 100%-ə qədər).
XYZ
XYZ rəng modeli (CIE 1931 XYZ) sırf riyazi məkandır. RGB, CMYK və digər modellərdən fərqli olaraq, XYZ-də əsas komponentlər “xəyali”dir, yəni X, Y və Z-ni qarışdırmaq üçün hər hansı rəng dəsti ilə əlaqələndirə bilməzsiniz. XYZ, texniki sahələrdə istifadə olunan demək olar ki, bütün digər rəng modelləri üçün əsas modeldir.
LABORATORİYA
LAB rəng modeli (CIELAB, “CIE 1976 L*a*b*”) CIE XYZ məkanından hesablanır. Laboratoriyanı inkişaf etdirərkən məqsəd yaratmaq idi rəng sahəsi, rəng dəyişikliyi insan qavrayışı baxımından (XYZ ilə müqayisədə) daha xətti olacaq, yəni rəng koordinat dəyərlərində eyni dəyişiklik müxtəlif sahələr rəng məkanı eyni rəng dəyişikliyi hissi yaratdı.
