އަހަރެން ދާދިފަހުން އަހަރެންގެ ވެބްސައިޓުގައި ހުރި އެނިމޭޓެޑް ގްރެފިކްސް އާ ތީމަކާއި ފަންނުވެރި ކެރެކްޓަރުންގެ ގްރޫޕަކާއެކު ރިފްރެޝްކޮށް، މި ސީރީޒްގައި ހިއްސާކުރި ގިނަ އުކުޅުތައް އަމަލީ ގޮތުން ތަންފީޒުކޮށްފިން. އަހަރެންގެ މަދު އެނިމޭޝަންތަކެއްގެ ސިފަ ބަދަލުވަނީ އެމީހުންނާ މުއާމަލާތް ކުރާއިރު ނުވަތަ ދުވާލުގެ އެކި ވަގުތުތަކުގައެވެ.
އަހަރެންގެ ބްލޮގް ޕޭޖްތަކުގެ މަތީގައިވާ ގްރެފިކްގައިވާ ކުލަތައް ކޮންމެ ދުވަހަކު ހެނދުނުން ފެށިގެން ރޭގަނޑާ ހަމައަށް ބަދަލުވެއެވެ. ދެން، އޮވަރލޭ ލޭޔަރ އާއި ބްލެންޑިންގ މޯޑެއްގެ އިހުތިރާމާއެކު ފިނި ކުލަތަކާއި ވިންޓަރީ ތީމެއް އިތުރުކޮށްފައިވާ ސްނޯ މޯޑެވެ.
މިކަމުގައި މަސައްކަތް ކުރަމުން ދިޔައިރު، ސީއެސްއެސް ރިލޭޓިވް ކަލަރ ވެލިއުސް އިން އަހަންނަށް އިތުރު ކޮންޓްރޯލެއް ލިބިގެންދާއިރު، އެ ޕްރޮސެސް ވެސް ފަސޭހަކޮށްދެވިދާނެތޯ އަހަރެން ވިސްނަން ފެށީމެވެ. ނޯޓް: މި ޓިއުޓޯރިއަލްގައި އަޅުގަނޑު ފޯކަސް ކުރާނީ ރިލޭޓިވް ކަލަރ ވެލިއުސް އާއި ތީމިންގ ގްރެފިކްސް އަދި އެނިމޭޝަންސް އަށް އޯކޭއެލްސީއެޗް ކަލަރ ސްޕޭސް އަށެވެ. ރިލޭޓިވް ކުލައަށް ފުންކޮށް ފީނަން ބޭނުންނަމަ އަހުމަދު ޝަދީދު ވަނީ ސުޕަރބް އިންޓަރެކްޓިވް ގައިޑެއް އުފައްދާފައެވެ. ކުލަ ޖާގަތަކާއި، ގޭމަޓްތަކާއި، އޯކޭއެލްސީއެޗް އާއި ބެހޭގޮތުން ބުނާނަމަ، އަޅުގަނޑުމެންގެ އަމިއްލަ ޖެފް ގްރެހަމް އެކަމާ ބެހޭގޮތުން ލިޔުއްވާފައިވެއެވެ.
ތަކުރާރުކޮށް އުފެއްދުންތައް ބޭނުންކުރުމަކީ މުހިންމު ކަމެކެވެ. ވީހާވެސް ގިނައިން ބެކްގްރައުންޑްތައް އަލުން ބޭނުންކުރިއިރު، ޒޫމްތަކާއި އޯވަލޭސްތަކުން ހަމަ އެ އާޓްވޯކުން އާ މަންޒަރުތައް އުފެއްދުމަށް އެހީތެރިވެދިނެވެ. އެއީ ކޮންމެހެން އުފަންވި ކަމެއް ނަމަވެސް ވަކިވަކި މަންޒަރުތަކަށް ވުރެ ސީރީޒްގެ ގޮތުން ވިސްނުމަށް ވެސް ހިތްވަރު ލިބުނެވެ. މެނުއަލްކޮށް ކުލަ ޕެލެޓްތައް އަޕްޑޭޓް ކުރުމުގައި ދިމާވާ މައްސަލަ އަހަރެންގެ ޗެލެންޖަށް ސީދާ ދާން ހިނގާށެވެ. މި ފަދަ ޓޫން ޓައިޓަލްސްގައި — 1959 ވަނަ އަހަރުގެ ޔޯގީ ބެއާ ޝޯގެ އެޕިސޯޑް “ލުލަބައި-ބައި ބެއާ” އަށް ބިނާކޮށް — އަދި އަހަރެންގެ މަސައްކަތުގައި އާންމުކޮށް ޕެލެޓްތައް ލިމިޓްކޮށްފައިވަނީ ހޮވާލެވޭ މަދު ކުލަތަކަކަށެވެ.
އަހަރެންގެ “ފައުންޑޭޝަން” ކުލަ ކަމަށް ބުނާ ކުލައިން ޝޭޑްސް އާއި ޓިންޓްސް އުފައްދައިގެން އިތުރު ކުލައެއް ނުޖަހައި ޕެލެޓް ފުޅާކުރަމެވެ.
ސްކެޗްގައި އަހަރެން މަސައްކަތް ކުރަނީ އެޗްއެސްއެލް ކަލަރ ސްޕޭސްގައި ކަމުން މި ޕްރޮސެސްގައި އަހަރެންގެ ފައުންޑޭޝަން ކުލައިގެ ލައިޓްނެސް ވެލިއު އިތުރު ނުވަތަ ދަށްކުރުން ހިމެނެއެވެ. ތެދުވެރިކަމާއެކު ބުނާނަމަ އެއީ އުނދަގޫ މަސައްކަތެއް ނޫން — އެކަމަކު ތަފާތު ފައުންޑޭޝަން ކުލައެއް ހޮވުމުގައި މުޅިން އައު ޝޭޑްސް އާއި ޓިންޓްސް ސެޓެއް އުފައްދަން ޖެހެ އެވެ. އެކަން އަމިއްލައަށް ކުރުމަކީ، ތަކުރާރުކޮށް، ވަރަށް އަވަހަށް ބުރަ ކަމަކަށް ވެގެންދެއެވެ.
އަޅުގަނޑު ފާހަގަކުރީ އެޗްއެސްއެލް — އެޗް (ހޫ)، އެސް (ސެޗުރޭޝަން)، އަދި އެލް (ލައިޓްނެސް) — ކުލަ ޖާގަ، އެކަމަކު އެއީ ކުލަ ސިފަކުރާ ބައެއް ގޮތްތަކުގެ ތެރެއިން އެއް ގޮތެވެ. އާރްޖީބީ — އާރ (ރަތް)، ޖީ (ފެހި)، ބީ (ނުވަތަ ބްލޫ) — އަކީ ފަހަރެއްގައިވެސް އެންމެ ފަރިތަ އެއްޗެއް، އެންމެ ކުޑަމިނުން އޭގެ ހެކްސް ފޯމްގައެވެ. އަދި LAB — L (lightness), A (green–red), B (blue–yellow) — އަދި އަލަށް އުފެއްދި، އެކަމަކު މިހާރު ގިނައިން ސަޕޯޓްކުރާ LCH — L (lightness), C (chroma), H (hue) — މޮޑެލް އޭގެ އޯކޭއެލްސީއެޗް ފޯމުގައި ވެސް އެބަހުއްޓެވެ. އެލްސީއެޗް — ޚާއްޞަކޮށް ސީއެސްއެސްގައި އޯކޭއެލްސީއެޗް — އާއެކު އަހަރެންގެ ފައުންޑޭޝަން ކުލައިގެ ލައިޓްނެސް ވެލިއު އެޖެސްޓް ކުރެވޭނެއެވެ.
ނުވަތަ އަހަރެންނަށް އޭގެ ކްރޯމާ ބަދަލު ކުރެވިދާނެއެވެ. އެލްސީއެޗް ކްރޯމާ އާއި އެޗްއެސްއެލް ސެޗުރޭޝަން ވެސް ކުލައެއްގެ ބާރުގަދަކަން ނުވަތަ މުއްސަނދިކަން ބަޔާންކޮށްދޭ ނަމަވެސް އެކަން ކުރަނީ ތަފާތު ގޮތަކަށެވެ. އެލްސީއެޗް އިން އަހަންނަށް ކުލަތަކުގެ މެދުގައި ފުޅާ ދާއިރާއެއް އަދި ލަފާކުރެވޭ ގޮތަށް ބްލެންޑިންގ އެއް ލިބިގެންދެއެވެ.
އަދި އެއް ލައިޓްނެސް އާއި ކްރޯމާ ވެލިއުތައް ހިއްސާކުރާ ކުލަތަކުގެ ޕެލެޓެއް އުފެއްދުމަށްޓަކައި ހޫ ބަދަލުކޮށްލެވިދާނެ އެވެ. އެޗްއެސްއެލް އަދި އެލްސީއެޗް ގައި ވެސް ހޫ ސްޕެކްޓްރަމް ރަތްކުލައިން ފެށިގެން، ފެހި އަދި ނޫކުލައިގެ ތެރެއިން ދަތުރުކޮށް، އެނބުރި ރަތްކުލައަށް އަރައެވެ.
ކީއްވެ އޯކޭއެލްސީއެޗް އިން ކުލައާ މެދު އަހަރެން ވިސްނާ ގޮތް ބަދަލުވީ ޑިޒައިން ޓޫލްސް — ސްކެޗް ހިމެނޭ ގޮތަށް — ކުރިއަށް ނުދިޔަ ނަމަވެސް، އޯކޭއެލްސީއެޗް ކުލަ ޖާގައަށް ބްރައުޒާ ސަޕޯޓް މިހާރު ފުޅާވެފައިވެ އެވެ. ނަސީބަކުން އެއީ އޯކޭއެލްސީއެޗް ބޭނުންކުރުން ހުއްޓުވާންޖެހޭ ކަމެއް ނޫނެވެ. ބްރައުޒާތަކުން އުފަލާއެކު ހެކްސް، އެޗްއެސްއެލް، ލެބް، އަދި އާރްޖީބީ ވެލިއުތައް ތިބާއަށް އޯކޭއެލްސީއެޗް އަށް ބަދަލުކޮށްދޭނެއެވެ. ހެކްސް ހިމެނޭ ގޮތަށް ކޮންމެ ޖާގައެއްގައި ވެސް ފައުންޑޭޝަން ކުލައަކާއެކު ސީއެސްއެސް ކަސްޓަމް ޕްރޮޕަޓީއެއް ކަނޑައެޅިދާނެއެވެ: /* ފައުންޑޭޝަންގެ ކުލަ */ --ފައުންޑޭޝަން: #5acccd6؛
އެއިން އުފެދޭ އެއްވެސް ކުލައެއް އޮޓޮމެޓިކުން އޯކޭއެލްސީއެޗް އަށް ބަދަލުވާނެއެވެ: --ފައުންޑޭޝަން-ލައިޓް: oklch(from var(--ފައުންޑޭޝަން) [...]; } --ފައުންޑޭޝަން-މިޑް: oklch(from var(--ފައުންޑޭޝަން) [...]; } --ފައުންޑޭޝަން-ޑާކް: oklch(from var(--ފައުންޑޭޝަން) [...]; }
ރިލޭޓިވް ކަލަރ އެސް އަ ޑިޒައިން ސިސްޓަމެއް ރިލޭޓިވް ކުލައަކީ ބުނާ އެއްޗެއް ކަމަށް ވިސްނާށެވެ: “މި ކުލަ ނަގައިގެން ޓްވީކް ކޮށްލާފައި، ދެން އަހަންނަށް ނަތީޖާ ދޭށެވެ.” ކުލައެއް އެޖެސްޓް ކުރުމަށް ދެ ގޮތެއް ވެއެވެ: މުޅިން ބަދަލުތަކާއި ނިސްބަތުން އަންނަ ބަދަލުތަކެވެ. އެއީ ކޯޑުގައި އެއްގޮތް ނަމަވެސް ފައުންޑޭޝަންގެ ކުލަތައް ބަދަލުކުރަން ފެށުމުން ވަރަށް ތަފާތު ގޮތަކަށް އުޅޭ އެއްޗެހިތަކެކެވެ. އެ ތަފާތަކީ ނިސްބަތުން ކުލަ ބޭނުންކުރުމަކީ ނިޒާމަކަށް ބަދަލުކުރެވޭނެ ކަމެއްކަން ދެނެގަތުމެވެ. /* ފައުންޑޭޝަންގެ ކުލަ */ --ފައުންޑޭޝަން: #5acccd6؛
މިސާލަކަށް އަހަރެންގެ ފައުންޑޭޝަން ކުލައިގެ ލައިޓްނެސް ވެލިއު 0.7837 އަށް އަރާއިރު، ޑާކަރ ވާޝަނެއްގެ ވެލިއު އަކީ 0.5837 އެވެ. ތަފާތު ހޯދުމަށްޓަކައި، މަތީ އަގުން ދަށް އަގު އުނިކޮށް، calc() ފަންކްޝަނެއް ބޭނުންކޮށްގެން ނަތީޖާ އެޕްލައި ކުރަމެވެ: --ފައުންޑޭޝަން-ޑާކް: oklch(var(--ފައުންޑޭޝަން އިން) ކެލްކް(އެލް - 0.20) ސީ އެޗް)؛
ފަނޑު ކުލައެއް ހޯދުމަށްޓަކައި، އޭގެ ބަދަލުގައި ތަފާތު އިތުރުކުރަން: --ފައުންޑޭޝަން-ލައިޓް: oklch(var(--ފައުންޑޭޝަން އިން) ކެލްކް(l + 0.10) c h);
ކްރޯމާ އެވެއެޖެސްޓްމަންޓްތައް ވެސް ތަބާވަނީ ހަމަ އެ ޕްރޮސެސް އަށެވެ. އަހަރެންގެ ފައުންޑޭޝަން ކުލައިގެ ބާރުގަދަކަން 0.1035 އިން 0.0035 އަށް ކުޑަކުރުމަށްޓަކައި، އަހަރެން އެއް އަގު އަނެއް އަގު އުނިކުރަމެވެ: oklch(var(--ފައުންޑޭޝަން އިން) l ކެލްކް(c - 0.10) h);
ހޫސްގެ ޕެލެޓެއް އުފެއްދުމަށްޓަކައި އަހަރެންގެ ފައުންޑޭޝަން ކުލަ (200) އާއި އަހަރެންގެ އާ ހޫ (260) ގެ ހޫ ވެލިއު އާއި ދެމެދުގައިވާ ތަފާތު ޙިސާބުކުރަމެވެ: oklch(var(--ފައުންޑޭޝަން އިން) l c calc(h + 60))؛
އެ ހިސާބުތަކަކީ މުޅިން މުޠުލަޤު ހިސާބުތަކެކެވެ. އަޅުގަނޑު ކަނޑައެޅިފައިވާ އަދަދެއް އުނިކުރާއިރު، އަޅުގަނޑު އެފެކްޓިވްކޮށް ބުނަނީ، “އަބަދުވެސް މިވަރަށް އުނިކުރާށެވެ.” ފިކްސްޑް ވެލިއުތައް އިތުރުކުރާއިރުވެސް ހަމަ މިގޮތަށް ކަންތައް ކުރެވޭނެއެވެ: ކެލްކް(c - 0.10) ކެލްކް(c + 0.10)
މި އުސޫލުގެ ޙައްދުތައް އަޅުގަނޑަށް ދަސްވީ ބުރަ ގޮތަކުންނެވެ. އަހަރެން ފިކްސްޑް ކްރޯމާ ވެލިއުތައް އުނިކުރުމަށް ބަރޯސާވިއިރު، ފައުންޑޭޝަން ބަދަލުކުރުމާއެކު ކުލަތައް އަޅި ކުލައާ ދިމާއަށް ވެއްޓިގެން ދިޔައެވެ. އެއް ކުލައަކަށް މަސައްކަތް ކުރި ޕެލެޓެއް އަނެއް ކުލައަކަށް ވެއްޓުނެވެ. ގުނަކުރުން ކަންތައް ކުރަނީ ތަފާތު ގޮތަކަށެވެ. އަހަރެން ކްރޯމާ ގުނަކުރާއިރު އަހަރެން ބްރައުޒާއަށް ބުނަނީ: “މި ކުލައިގެ ބާރުމިން ނިސްބަތުން ކުޑަކޮށްލާށެވެ.” ފައުންޑޭޝަން ބަދަލުވި ނަމަވެސް ކުލަތަކުގެ މެދުގައި އޮންނަ ގުޅުން އެގޮތުގައި ދެމިއޮވެއެވެ: ކެލްކް(c * 0.10)
މައި މޫވް އިޓް، ސްކޭލް އިޓް، ރޮޓޭޓް އިޓް ރޫލްސް
ލުއިކަން ހަރަކާތްތެރިކުރުން (އިތުރުކުރުން ނުވަތަ އުނިކުރުން)، ސްކޭލް ކްރޯމާ (ގިނަކުރުން)، ހޫ އެނބުރުވުން (ޑިގްރީ އިތުރުކުރުން ނުވަތަ އުނިކުރުން).
އަހަރެން ކްރޯމާ ސްކޭލް ކުރަނީ އަހަރެން ބޭނުންވަނީ އިންޓެންސިޓީ ބަދަލުތައް ބޭސް ކުލައަށް ނިސްބަތްކޮށް ބެހެއްޓުމަށެވެ. ހޫ ގުޅުންތަކަކީ ރޮޓޭޝަނަލް ގުޅުންތަކެއް ކަމުން ހޫ ގިނަކުރުމަކީ މާނައެއް ނެތް ކަމެކެވެ. ލުއިކަމަކީ ޕަރސެޕްޝަނަލް އަދި އެބްސޮލިއުޓް އެއްޗެއް — އެކަން ގުނަކުރުމުން ގިނަ ފަހަރަށް ލިބެނީ ތަފާތު ނަތީޖާތަކެކެވެ.
އެއް ކުލައިން ފެށިގެން މުޅި ތީމަކަށް ރިލޭޓިވް ކުލައަކީ އަހަރެންނަށް ފައުންޑޭޝަން ކުލައެއް ކަނޑައަޅައި، އެއިން އަހަރެން ބޭނުންވާ އެހެން ކޮންމެ ކުލައެއް — ފިލްސް، ސްޓްރޯކް، ގްރޭޑިއަންޓް ސްޓޮޕްސް، ޝެޑޯސް — ޖެނެރޭޓް ކުރެވޭނެ އެއްޗެކެވެ. އެ ހިސާބުން ކުލަ ޕެލެޓަކަށް ވުން ހުއްޓި ސިސްޓަމަކަށް ވާން ފަށައެވެ. އެސްވީޖީ އިލްސްޓްރޭޝަންތަކުގައި ފިލްސް، ސްޓްރޯކް، އަދި ގްރޭޑިއަންޓްސް ހުރަސްކޮށް އެއް މަދު ކުލަތަކެއް އަލުން ބޭނުން ކުރަން ފަށައެވެ. ރިލޭޓިވް ކުލަ މެދުވެރިކޮށް އެ ގުޅުންތައް އެއްފަހަރު ކަނޑައަޅައި ހުރިހާ ތަނެއްގައި އަލުން ބޭނުން ކުރެވޭނެ — އެނިމޭޓަރުން އާ މަންޒަރުތައް އުފެއްދުމަށް ބެކްގްރައުންޑް އަލުން ބޭނުން ކުރި ފަދައިންނެވެ.
ފައުންޑޭޝަންގެ ކުލަ އެއްފަހަރު ބަދަލުކޮށް، އުފައްދާ ކޮންމެ ކުލައެއް އޮޓޮމެޓިކުން އަޕްޑޭޓް ވެގެން ދާއިރު، އަތުން އެއްވެސް އެއްޗެއް އަލުން ހިސާބު ނުކޮށް. އެނިމޭޓެޑް ގްރެފިކްސްގެ ބޭރުން، ބަޓަންތަކާއި ލިންކްތައް ފަދަ އިންޓަރެކްޓިވް އެލިމެންޓްތަކުގެ ޙާލަތްތަކަށް ކުލަތައް ކަނޑައެޅުމަށް އަޅުގަނޑަށް ހަމަ މި ގޮތް ބޭނުންކުރެވިދާނެއެވެ. އަހަރެންގެ “ލުލަބައި-ބައި ބެއާ” ޓޫން ޓައިޓަލްގައި އަހަރެން ބޭނުންކުރި ފައުންޑޭޝަން ކުލައަކީ ސައިއަން ކުލައިގެ ކުލައެކެވެ. ބެކްގްރައުންޑަކީ އަހަރެންގެ ފައުންޑޭޝަނާއި ޑާކަރ ވާޝަނަކާ ދެމެދު ރޭޑިއަލް ގްރޭޑިއަންޓެކެވެ.
މުޅިން ތަފާތު މޫޑްތަކެއް ހުންނަ އަލްޓަނޭޓިވް ވާޝަންތައް އުފެއްދުމަށްޓަކައި އަހަރެން ބޭނުންވަނީ ހަމައެކަނި ފައުންޑޭޝަންގެ ކުލަ ބަދަލުކުރަން: --ފައުންޑޭޝަން: #5acccd6؛ --ގްރޭޑް-އެންޑް: var(--ފައުންޑޭޝަން); --grad-start: oklch(var(--ފައުންޑޭޝަން އިން) ކެލްކް(އެލް - 0.2357) ކެލްކް(ސީ * 0.833) ހ);
އެ ކަސްޓަމް ޕްރޮޕަޓީތައް އަހަރެންގެ އެސްވީޖީ ގްރޭޑިއަންޓަށް ކުލަ އަގުތައް ޑަބިލިކޭޓް ނުކޮށް ބައިންޑް ކުރުމަށްޓަކައި، އަހަރެން ހާޑް-ކޯޑް ކޮށްފައިވާ ސްޓޮޕް-ކަލަރ ވެލިއުތައް އިންލައިން ސްޓައިލްތަކުން ބަދަލުކުރީމެވެ:
ދެން އަހަރެން ބޭނުންވީ އަހަރެންގެ ޓޫން ޓެކްސްޓް އަބަދުވެސް އަހަރެން ޚިޔާރުކުރާ ކޮންމެ ފައުންޑޭޝަން ކުލައަކާ ތަފާތުވާކަން ޔަގީންކުރުމަށެވެ. 180 ޑިގްރީގެ ހޫ ރޮޓޭޝަން އިން ކޮމްޕްލިމެންޓަރީ ކުލައެއް އުފެދެނީ ޔަގީނުންވެސް ޕޮޕް ވާ — އެކަމަކު އަރާމުކޮށް ވައިބްރޭޓް ވެދާނެ: .ޓެކްސްޓް-ލައިޓް { . ފުރިހަމަކުރުން: oklch(var(--ފައުންޑޭޝަން އިން) l c calc(h + 180))؛ }
90° ޝިފްޓެއް ފުރިހަމައަށް ކޮމްޕްލިމެންޓަރީ ނުވެ ދިރުމެއް ހުރި ސެކަންޑަރީ ކުލައެއް އުފެދެއެވެ: .ޓެކްސްޓް-ލައިޓް { . ފުރިހަމަކުރުން: oklch(var(--ފައުންޑޭޝަން އިން) l c calc(h - 90))؛ }
އަހަރެންގެ ރިކްރިއޭޝަން ކުއިކް ޑްރޯ މެކްގްރޯގެ 1959 ވަނަ އަހަރުގެ ޓޫން ޓައިޓަލް “އެލް ކަބޮންގް“ ގައި ބޭނުންކޮށްފައިވަނީ ހަމަ އެ އުކުޅުތައް ނަމަވެސް ތަފާތު ޕެލެޓެކެވެ. މިސާލަކަށް ފައުންޑޭޝަން ކުލައާއި އަނދިރި ޝޭޑަކާ ދެމެދު އަނެއްކާވެސް ރޭޑިއަލް ގްރޭޑިއަންޓެއް ހުރެއެވެ.
ފަހަތުގައި ހުރި އިމާރާތާއި ގަހަކީ ހަމައެކަނި އެއް ފައުންޑޭޝަން ކުލައެއްގެ ތަފާތު ޝޭޑްތަކެކެވެ. އެ މަގުތަކަށް އަހަރެން ބޭނުންވީ އިތުރު ދެ ފިލް ކުލައެކެވެ: .ބީޖީ-މިޑް { ފުރިހަމަކުރުން: oklch(var(--ފައުންޑޭޝަން އިން) ކެލްކް (އެލް - 0.04) ކެލްކް (ސީ * 0.91) ހ); }
.ބީޖީ-ޑާކް { ފުރިހަމަކުރުން: oklch(var(--ފައުންޑޭޝަން އިން) ކެލްކް (އެލް - 0.12) ކެލްކް (ސީ * 0.64) ހ); }
ދަ ފައުންޑޭޝަންސް ސްޓާޓް ޓު މޫވް މިހާތަނަށް އަޅުގަނޑު ދައްކާފައިވާ ހުރިހާ އެއްޗެއް ސްޓޭޓިކް ވެފައި. ފައުންޑޭޝަންގެ ކުލަ ބަދަލު ކުރުމަށް މީހަކު ކުލަ ހޮވާ އެއްޗެއް ބޭނުން ކުރި ނަމަވެސް އެ ބަދަލު އަންނަނީ ވަގުތުންނެވެ. އެކަމަކު އެނިމޭޓެޑް ގްރެފިކްސް މަދުން ނަމަވެސް ކޮޅަށް ހުންނަނީ — ފިލާވަޅު އޮތީ ނަމުގަ އެވެ. އެހެންވީމާ، ކުލައަކީ ނިޒާމުގެ ބައެއްނަމަ، އެއަށް ވެސް އެނިމޭޓް ނުކުރެވޭ ސަބަބެއް ނެތެވެ. ފައުންޑޭޝަން ކުލަ އެނިމޭޓް ކުރުމަށްޓަކައި ފުރަތަމަ ބޭނުންވަނީ އޭގެ އޯކޭއެލްސީއެޗް ޗެނަލްތަކަށް ބަހާލާށެވެ— ލުއިކަން، ކްރޯމާ، އަދި ކުލަ. އެކަމަކު މުހިންމު އިތުރު ފިޔަވަޅެއް އެބައޮތް: އަހަރެން އެ އަގުތައް ޓައިޕް ކުރެވިފައިވާ ކަސްޓަމް ޕްރޮޕަޓީތަކެއްގެ ގޮތުގައި ރަޖިސްޓްރީ ކުރަން ޖެހެއެވެ. އެކަމަކު އޭގެ މާނައަކީ ކޮބައި ހެއްޔެވެ؟ ބައި ޑިފޯލްޓްކޮށް، ބްރައުޒާއަކަށް ސީއެސްއެސް ކަސްޓަމް ޕްރޮޕަޓީ ވެލިއުއަކީ ކުލައެއް، ދިގުމިނެއް، ނަންބަރެއް، ނުވަތަ އެހެން އެއްޗެއް މުޅިން ތަމްސީލުކުރާ އެއްޗެއް ކަމެއް ނޭނގެއެވެ. އޭގެ މާނައަކީ ގިނަ ފަހަރަށް އެނިމޭޝަންގެ ތެރޭގައި އެމީހުން އޮމާންކަމާއެކު އިންޓަރޕޯލޭޓް ނުކުރެވޭނެ ކަމާއި، އެއް އަގުން އަނެއް އަގަށް ފުންމާލުމެވެ. ކަސްޓަމް ޕްރޮޕަޓީއެއް ރަޖިސްޓްރީ ކުރުމުން އެ ޕްރޮޕަޓީއެއް ތަމްސީލުކުރާ އަގުގެ ވައްތަރާއި ވަގުތު ފާއިތުވަމުންދާ ވަރަކަށް އެ ޕްރޮޕަޓީ ކަންތައް ކުރަންވީ ގޮތް ބްރައުޒާއަށް އެނގިގެންދެއެވެ. މި ހާލަތުގައި އަހަރެން ބޭނުންވަނީ އަހަރެންގެ ކުލަ ޗެނަލްތައް ނަންބަރުތަކެއްގެ ގޮތުގައި ބްރައުޒާއިން ބަލާފައި އޮމާންކަމާއެކު އެނިމޭޓް ކުރެވޭނެ ގޮތަކަށެވެ. @ޕްރޮޕަޓީ --f-l { ސިންޓެކްސް: "<ނަންބަރު>"; ވާރުތަވާ: ތެދު؛ އިނިޝިއަލް-ވެލިއު: 0.40؛ }
@ޕްރޮޕަޓީ --f-c { ސިންޓެކްސް: "<ނަންބަރު>"; ވާރުތަވާ: ތެދު؛ އިނިޝިއަލް-ވެލިއު: 0.11؛ }
@ޕްރޮޕަޓީ --f-h { ސިންޓެކްސް: "<ނަންބަރު>"; ވާރުތަވާ: ތެދު؛ އިނިޝިއަލް-ވެލިއު: 305؛ }
ރަޖިސްޓްރީ ވުމުން މި ކަސްޓަމް ޕްރޮޕަޓީތައް އުޅެނީ ނެޓިވް ސީއެސްއެސް ފަދައިންނެވެ. ބްރައުޒާއަށް އެކަންކަން ފްރޭމް ފްރޭމް އިންޓަޕޯލޭޓް ކުރެވޭނެއެވެ. އަޅުގަނޑު ދެން އެ ޗެނަލްތަކުން ފައުންޑޭޝަން ކުލަ އަލުން ބިނާކުރަން: --ފައުންޑޭޝަން: oklch(var(--f-l) var(--f-c) var(--f-h));
މިކަމުގެ ސަބަބުން ފައުންޑޭޝަންގެ ކުލަ އެހެން ނިއުމެރިކް ވެލިއުތަކެކޭ އެއްފަދައިން އެނިމޭޓެބަލް ވެގެންދެއެވެ. މިއީ ވަގުތު ފާއިތުވަމުންދާ ވަރަކަށް ލުއިކަން މަޑުމަޑުން ބަދަލުކޮށްދޭ ސާދާ “ނޭވާލާ” އެނިމޭޝަނެކެވެ: @ކީފްރޭމްސް ނޭވާލާ { 0%، 100% { --f-l: 0.36؛ } 50% { --f-l: 0.46؛ } }
.ޓޫން-ޓައިޓަލް { އެނިމޭޝަން: ނޭވާ 10 ގެ އަހަރުތަކުގެ ފަސޭހަ-އިން-އައުޓް އިންފިނިޓް؛ }
އެހެނީ ފިލްސް، ގްރޭޑިއަންޓްސް، އަދި ސްޓްރޯކްތަކުގައި ހުންނަ އެހެން ކޮންމެ ކުލައަކީ --ފައުންޑޭޝަން އިން އުފެދިފައިވާ ކުލައަކަށް ވާތީ، އެ ހުރިހާ ކުލައެއް އެއްކޮށް އެނިމޭޓް ވެގެންދާއިރު، އެއްވެސް އެއްޗެއް މެނުއަލްކޮށް އަޕްޑޭޓް ކުރަން ނުޖެހެއެވެ. އެއް އެނިމޭޓެޑް ކުލައެއް، ގިނަ އަސަރުތަކެއް މި ޕްރޮސެސް ފެށުނުއިރު އަޅުގަނޑު ހިތަށް އެރީ، ސީއެސްއެސް ރިލޭޓިވް ކަލަރ ވެލިއުސް އިން އިތުރު ފުރުޞަތުތަކެއް ލިބިގެންދާއިރު، އެކަންކަން ތަންފީޒު ކުރަން ފަސޭހަ ކޮށްދެވޭނެތޯއެވެ. އަހަރެންގެ ވެބްސައިޓުގެ ކޮންޓެކްޓް ޕޭޖަށް ދާދިފަހުން އާ ގޯލްޑް މައިން ބެކްގްރައުންޑެއް އިތުރުކުރިއިރު، ފުރަތަމަ އިޓަރޭޝަންގައި ހިމެނެނީ ދިއްލާ އަދި ސްވިންގް ކުރާ ތެޔޮ ބޮކިތަކެކެވެ.
އަހަރެން ބޭނުންވީ ސީއެސްއެސް ރިލޭޓިވް ކުލަތައް އެނިމޭޓް ކުރުމުން މައިންގެ އެތެރެ ލައިޓްތަކުން ކުލަތަކުން ޓިންޓްކޮށްގެން މާ ރިއަލިސްޓިކް ކޮށްލެވޭނެ ގޮތްތައް ތަހުގީގު ކުރާށެވެ. އަހަރެން ބޭނުންވީ އެމީހުންގެ ވަށައިގެންވާ ދުނިޔެއަށް އަސަރުކުރާ ގޮތަށް، ހަގީގީ އަލިން ކުރާ ގޮތަށެވެ. އެހެންކަމުން، އެތައް ކުލައެއް އެނިމޭޓް ކުރުމުގެ ބަދަލުގައި، އަޅުގަނޑު ހެދީ އެންމެ ކުލައެއް އެނިމޭޓް ކުރާ ކުޑަކުޑަ ލައިޓިން ސިސްޓަމެކެވެ.
އަހަރެންގެ ފުރަތަމަ މަސައްކަތަކީ ބެކްގްރައުންޑާއި އަހަރެންގެ ބޮކިތަކުގެ މެދުގައި އޮވަރލޭ ލޭޔަރއެއް ސްލޮޓް ކުރުމެވެ: <މަގު id="އޮވަރލޭ" އެވެ. fill="var(--އޮވަރލޭ-ޓިންޓް)" [...] style="މިކްސް-ބްލެންޑް-މޯޑް: ކުލަ" />
އަހަރެން މިކްސް-ބްލެންޑް-މޯޑް: ކުލަ ބޭނުންކުރީ އެއީ އޭގެ ދަށުގައިވާ އެއްޗެއް ޓިންޓް ކުރާއިރު އޭގެ ދަށުގައިވާ ލޫމިނަންސް ރައްކާތެރިކޮށްދޭތީ އެވެ. އަޅުގަނޑު ބޭނުންވަނީ ހަމައެކަނި އެނިމޭޝަންތައް އޮން ކުރާއިރު އޯވަރލޭ ފެންނަން ހުރުމުން، އަޅުގަނޑު އޯވަރލޭ އޮޕްޓް-އިން ކުރިން: .svg-mine #އޮވަރލޭ { ޑިސްޕްލޭ: އެއްވެސް އެއްޗެއް ނެތް؛ }
@media (ޕްރިފަރސް-ރިޑޫސްޑް-މޯޝަން: ނޯ-ޕްރިފަރެންސް) { .svg-mine[ޑޭޓާ-އެނިމޭޝަންސް=އޮން] #overlay { ޑިސްޕްލޭ: ބްލޮކް؛ އޮޕަސިޓީ: 0.5؛ } }
އޯވަރލޭ ޖައްސާފައި އޮތް ނަމަވެސް އަދި ބޮކިތަކާ ގުޅިފައެއް ނުވެއެވެ. އަހަރެން ބޭނުންވީ އަލި ލިބޭ އެއްޗެކެވެ. އަހަރެންގެ ބޮކިތަކަކީ ސާދާ ބޮކިތަކެއް ކަމަށާއި، ކޮންމެ ބޮކިއެއްގައި ވެސް ވަށައިގެންވާ އުނިއިތުރެއް ހިމެނޭއިރު، އެ އެއްޗެއް އަހަރެން ފިލްޓަރަކުން ބްލަރ ކޮށްލީމެވެ. މި ފިލްޓަރުގެ ސަބަބުން މުޅި ވަށައިގަނޑުގެ މައްޗަށް ވަރަށް މަޑު ބްލަރއެއް އުފެދެއެވެ.
އޯވަރލޭ އާއި ބޮކިތައް ވަކިވަކިން އެނިމޭޓް ކުރުމުގެ ބަދަލުގައި އަހަރެން އެއް “ފްލޭމް” ކުލަ ޓޯކަން އެނިމޭޓްކޮށް، އެހެން ހުރިހާ އެއްޗެއް އެއިން ހޯދަމެވެ. ފުރަތަމަ ކަމަކަށް އޯކޭއެލްސީއެޗް ޗެނަލްތަކަށް ޓައިޕްކޮށްފައިވާ ތިން ކަސްޓަމް ޕްރޮޕަޓީއެއް ރަޖިސްޓްރީ ކުރަމެވެ: @ޕްރޮޕަޓީ --fl-l { ސިންޓެކްސް: "<ނަންބަރު>"; ވާރުތަވާ: ތެދު؛ އިނިޝިއަލް-ވެލިއު: 0.86؛ } @ޕްރޮޕަޓީ --fl-c { ސިންޓެކްސް: "<ނަންބަރު>"; ވާރުތަވާ: ތެދު؛ އިނިޝިއަލް-ވެލިއު: 0.12؛ } @ޕްރޮޕަޓީ --fl-h { ސިންޓެކްސް: "<ނަންބަރު>"; ވާރުތަވާ: ތެދު؛ އިނިޝިއަލް-ވެލިއު: 95؛ }
އަހަރެން އެ ޗެނަލްތައް އެނިމޭޓްކޮށް، ގަސްތުގައި މަދު ފްރޭމްތަކެއް އޮރެންޖާ ދިމާއަށް ކޮއްޕާލީމެވެ.
@ކީފްރޭމްސް ފްލޭމް { 0%، 100% { --fl-l: 0.86؛ --fl-c: 0.12؛ --fl-h: 95؛ } 6% { --fl-l: 0.91؛ --fl-c: 0.10؛ --fl-h: 92؛ } 12% { --fl-l: 0.83؛ --fl-c: 0.14؛ --fl-h: 100؛ } 18% { --fl-l: 0.88؛ --fl-c: 0.11؛ --fl-h: 94؛ } 24% { --fl-l: 0.82؛ --fl-c: 0.16؛ --fl-h: 82؛ } 30% { --fl-l: 0.90؛ --fl-c: 0.12؛ --fl-h: 90؛ } 36% { --fl-l: 0.79؛ --fl-c: 0.17؛ --fl-h: 76؛ } 44% { --fl-l: 0.87؛ --fl-c: 0.12؛ --fl-h: 96؛ } 52% { --fl-l: 0.81؛ --fl-c: 0.15؛ --fl-h: 102؛ } 60% { --fl-l: 0.89؛ --fl-c: 0.11؛ --fl-h: 93؛ } 68% { --fl-l: 0.83؛ --fl-c: 0.16؛ --fl-h: 85؛ } 76% { --fl-l: 0.91؛ --fl-c: 0.10؛ --fl-h: 91؛ } 84% { --fl-l: 0.85؛ --fl-c: 0.14؛ --fl-h: 98؛ } 92% {--fl-l: 0.80؛ --fl-c: 0.17؛ --fl-h: 74؛ } }
ދެން އަޅުގަނޑު އެ އެނިމޭޝަން އެސްވީޖީއަށް ސްކޯޕް ކުރިން، އެހެންވީމާ ޝެއަރޑް ވެރިއޭބަލްތައް ލެމްޕްތަކާއި އަޅުގަނޑުގެ އޯވަރލޭއަށްވެސް ލިބެން ހުރެއެވެ:
@media (ޕްރިފަރސް-ރިޑޫސްޑް-މޯޝަން: ނޯ-ޕްރިފަރެންސް) { .svg-mine[ޑޭޓާ-އެނިމޭޝަންސް=އޮން] { އެނިމޭޝަން: އަލިފާންގަނޑު 3.6s އިންފިނިޓް ލައިނަރ؛ އެކަހެރިކުރުން: އެކަހެރިކުރުން؛
/* އެނިމޭޓެޑް ޗެނަލްތަކުން ފްލޭމް ކުލައެއް ބިލްޑްކުރުން */ --ފްލޭމް: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* އަލިފާންގަނޑުން އުފެދިފައިވާ ދިއްލީގެ ކުލަ */ --lamp-core: oklch(ފްރޮމް var(--ފްލޭމް) calc(l + 0.05) calc(c * 0.70) h);
/* ހަމަ އަލިފާންގަނޑުން އުފެދިފައިވާ އޮވަރލޭ ޓިންޓް */ --overlay-tint: oklch(ފްރޮމް var(--ފްލޭމް) ކެލްކް (އެލް + 0.06) ކެލްކް (ސީ * 0.65) ކެލްކް (ހ - 10)); } }
އެންމެ ފަހުން އަޅުގަނޑު އެ އުފެދިފައިވާ ކުލަތައް ދިއްލާ ބޮކިތަކާއި އެ ބޮކިތަކުގެ އަސަރު ކުރާ އޯވަރލޭއަށް އުނގުޅާލީމެވެ: @media (ޕްރިފަރސް-ރިޑޫސްޑް-މޯޝަން: ނޯ-ޕްރިފަރެންސް) { .svg-mine[data-animations=on] #mine-lamp-1 > ވަށައިގެންވާ ވަށައިގަނޑު، .svg-mine[ޑޭޓާ-އެނިމޭޝަންސް=އޮން] #mine-lamp-2 > circle { ފުރިހަމަކުރުން: var(--ލެމްޕް-ކޯރ); }
.svg-mine[ޑޭޓާ-އެނިމޭޝަންސް=އޮން] #overlay { ޑިސްޕްލޭ: ބްލޮކް؛ ފުރިހަމަކުރުން: var(--އޮވަރލޭ-ޓިންޓް); އޮޕަސިޓީ: 0.5؛ } }
އަލިފާންގަނޑު އޮރެންޖާ ދިމާއަށް ބަދަލުވުމުން ބޮކިތައް ހޫނުވެ، އެ ބޮކިތަކާއެކު މަންޒަރު ހޫނުވެއެވެ. އަލިފާންގަނޑު ފިނިވުމުން ހުރިހާ ކަމެއް އެއްކޮށް ހަމަޖެހިލައެވެ. އެންމެ ރަނގަޅު ކަމަކީ އެއްވެސް އެއްޗެއް އަމިއްލައަށް ލިޔެފައި ނުވުމެވެ. އަހަރެން ފައުންޑޭޝަންގެ ކުލަ ބަދަލުކޮށްފިނަމަ ނުވަތަ ފްލޭމް އެނިމޭޝަން ރޭންޖްތައް ޓްވީކް ކޮށްފިނަމަ މުޅި ލައިޓިން ސިސްޓަމް އެއްފަހަރާ އަޕްޑޭޓް ވެއެވެ. ފައިނަލް ނަތީޖާ އަޅުގަނޑުގެ ވެބްސައިޓުން ފެނިވަޑައިގަންނަވާނެއެވެ. އަލުން ބޭނުންކުރުން، އަލުން ބޭނުންކުރުން، އަލުން ޒިޔާރަތްކުރުން އެ ހަނާ-ބާބަރާ އެނިމޭޓަރުންނަށް ކޮންމެހެން ބޭނުންވާތީ އެލިމެންޓްތައް އަލުން ބޭނުން ކުރަން މަޖުބޫރުވި ނަމަވެސް އަހަރެން ކުލަތައް އަލުން ބޭނުންކުރަނީ އެއީ އަހަރެންގެ މަސައްކަތް އެއްގޮތްވެ، ބެލެހެއްޓުމަށް ފަސޭހަވާތީ އެވެ. ސީއެސްއެސް ރިލޭޓިވް ކަލަރ ވެލިއުސް އަޅުގަނޑަށް ހުއްދަ ދެނީ:
އެއް ފައުންޑޭޝަން ކުލައެއް ކަނޑައެޅުން، އެހެން ކުލަތައް އެއާ ގުޅޭ ގޮތް ބަޔާންކޮށްދެއްވާ، އެ ގުޅުންތައް ހުރިހާ ތަނެއްގައި އަލުން ބޭނުންކޮށް، އަދި... އެއް އަގު ބަދަލުކޮށްގެން ނިޒާމު އެނިމޭޓް ކުރުން.
ރިލޭޓިވް ކަލަރ އިން ހަމައެކަނި ތީމިންގ އަށް ފަސޭހައެއް ނުވެއެވެ. އެއީ ހަރަކާތެއް ފަދައިން ކުލައަކީ ގަސްތުގައި ކުރާ ކަމެއް ކަމުގައި ވާއިރު — އަދި އެއް އަގު ބަދަލުކުރުމުން އޭގެ ދަށުގައިވާ މަސައްކަތް އަލުން ނުލިޔެ މުޅި މަންޒަރެއް ބަދަލުކުރެވޭނެ ވިސްނުމަކަށް ހިތްވަރުދެއެވެ.
