Գույնի նշանակումը rgb-ի միջոցով CSS-ում

Ուսումնական ձեռնարկի հենց սկզբում, երբ մենք ուսումնասիրում էինք գույները, ես ձեզ պատմեցի, որ գույնը կարելի է նշանակել կամ անգլերեն բառով, կամ rgb-ի միջոցով, կամ #-ի միջոցով: Վերջին երկու ֆորմատները թույլ են տալիս ստանալ ցանկացած երանգի գույն: Եկեք պարզենք, թե ինչպես են աշխատում այդ ֆորմատները:

Այս եղանակները հասկանալու համար, նախ մեզ անհրաժեշտ է հասկանալ, թե ինչպես է էկրանի վրա ստացվում պահանջվող գույնը:

Իրականում էկրանի առանձին կետը (պիքսել) չի կարող փայլել բոլոր գույներով, որոնք պահանջվում են, քանի որ դա տեխնիկապես շատ դժվար կլիներ: Էկրանի յուրաքանչյուր կետ կարող է փայլել միայն երեք գույներով` կարմիր, կանաչ և երկնագույն: Բայց միաժամանակ և տարբեր համամասնություններով:

Խառնելով այս գույները` մենք կարող ենք ստանալ ցանկացած պահանջվող գույն, նմանությամբ նրան, ինչպես դա անում են նկարիչները ներկերով. խառնելով մի քանի գույներ` նրանք ստանում են մեկ այլ նոր գույն:

CSS-ում գույները խառնելու համար անհրաժեշտ է հատկության արժեքով նշել rgb հիմնաբառը, որից հետո ստորակետերով թվարկել այն համամասնությունները, որոնցում պետք է վերցնել այս երեք հիմնական գույները: Ինքները` գույները, կարող են փոխվել 0-ից մինչև 255: Ընդ որում, զրոն - դա գույնի բացակայությունն է, իսկ 255-ը դա մաքուր գույն է (օրինակ, մաքուր կարմիր):

Ինքները՝ rgb տառերը, վերծանվում են որպես red, green, blue:

Տեսնենք օրինակներով:

Օրինակ

Եկեք խառնենք մաքուր կարմիր և մաքուր երկնագույն գույները: Դրա համար առաջին արժեքը դնենք 255, երկրորդը` 0, իսկ երրորդը` 255: Մենք կստանանք mանուշակագույն գույն:

<p>
	տեքստ
</p>

p {
	color: rgb(255, 0, 255);
}

Օրինակ

Եկեք հիմա առաջին արժեքը դնենք 255, իսկ մնացած բոլորը` զրո: Արդյունքում կստանանք մաքուր կարմիր գույն:

<p>
	տեքստ
</p>

p {
	color: rgb(255, 0, 0);
}

Օրինակ

Այսպես կստանանք մաքուր կանաչ գույն:

<p>
	տեքստ
</p>

p {
	color: rgb(0, 255, 0);
}

Օրինակ

Իսկ եթե կանաչի համար դնենք ոչ թե 255, այլ 100, ապա կստացվի մասամբ կանաչ:

<p>
	տեքստ
</p>

p {
	color: rgb(0, 100, 0);
}

Օրինակ

Խառնենք բոլոր երեք գույները կամայական համամասնություններով: Տեսեք, թե ինչ ստացվեց:

<p>
	տեքստ
</p>

p {
	color: rgb(200, 100, 125);
}

Օրինակ

Եթե բոլոր արժեքները դնենք 255, ապա կստացվի մաքուր սպիտակ գույն:

p {
	color: rgb(255, 255, 255);
}

Օրինակ

Եթե բոլոր արժեքները դնենք 0, ապա կստացվի մաքուր սև գույն:

p {
	color: rgb(0, 0, 0);
}

Գործնական առաջադրանքներ

rgb-ի միջոցով գույն նշանակելով` դարձրեք բոլոր պարբերությունները կարմիր գույնի:

rgb-ի միջոցով գույն նշանակելով` դարձրեք բոլոր h2-ները կանաչ գույնի:

rgb-ի միջոցով գույն նշանակելով` դարձրեք բոլոր h3-ները երկնագույն գույնի:

Խառնեք մաքուր կարմիր և մաքուր կանաչ: Ի՞նչ գույն կստացվի: