CSS'те rgb аркылуу түс берүү

Окуу китебинин эң башында, биз түстөрдү изилдеп жатканда, мен сизге түстү англис сөзү менен, же rgb аркылуу, же # аркылуу берсе болот деп айтканм. Акыркы эки формат ар кандай көлөкөдөгү түстү алууга мүмкүндүк берет. Келгиле, бул форматтар кантип иштешин биргелешип карап чыгалы.

Бул ыкмаларды түшүнүү үчүн, башкысы, бизге компьютер экранында каалаган түс кантип алынганын түшүнүү керек.

Чынында экрандын өзүнчө чекити (пиксель) керектелген бардык түстөрдө жаркырай албайт, анткени бул техникалык жактан өтө татаал болуп калат. Экрандын ар бир чекити үч гана түстө жаркырай алат: кызыл, жашыл жана көк. Бирок ошол эле учурда жана ар кандай пропорцияларда.

Бул түстөрдү айкалыштырып, биз каалаган ар кандай түстү ала алабыз, муну сүрөтчүлөр боёктор менен жасаган сыяктуу: бир нече түстү аралаштырып, алар дагы бир жаңы түстү алат.

CSS'те түстөрдү аралаштыруу үчүн касиеттин мааниси катары rgb деген ачкыч сөздү көрсөтүп, андан кийин үч негизги түстү кайсы пропорцияларда алуу керектигин үтүр менен белгилеп көрсөтүү керек. Түстөрдүн өздөрү 0 ден 255 ге чейин өзгөрө алат. Нөл - бул түстүн жоктугу, ал эми 255 - бул таза түс (мисалы, таза кызыл).

rgb тамгаларынын өзү red (кызыл), green (жашыл), blue (көк) деп чечмеленет.

Мисалдар менен карап көрөлү.

Мисал

Келгиле, таза кызыл жана таза көк түстөрдү аралаштыралы. Бул үчүн биринчи маанини 255 кылып, экинчисин 0 кылып, үчүнчүсүн - 255 кылалы. Бизде кызыл көк (фиолет) түс чыгат:

<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 тегдерди көк түскө айландырыңыз.

Таза кызыл жана таза жашыл түстөрдү аралаштырыңыз. Кандай түс чыгат?