ମୁଁ ଏହି ୱେବସାଇଟରେ ଆନିମେଟେଡ୍ ଗ୍ରାଫିକ୍ସକୁ ଏକ ନୂତନ ଥିମ୍ ଏବଂ ଅଗ୍ରଗାମୀ ଚରିତ୍ରମାନଙ୍କର ଏକ ଗୋଷ୍ଠୀ ସହିତ ସତେଜ କରିଛି, ଏହି କ୍ରମରେ ମୁଁ ଅଂଶୀଦାର କରିଥିବା ଅନେକ କ ques ଶଳ ପ୍ରୟୋଗ କରି | ମୋର କିଛି ଆନିମେସନ୍ ରୂପ ବଦଳାଇଥାଏ ଯେତେବେଳେ କେହି ସେମାନଙ୍କ ସହିତ କିମ୍ବା ଦିନର ବିଭିନ୍ନ ସମୟରେ ଯୋଗାଯୋଗ କରନ୍ତି |
ମୋ ବ୍ଲଗ୍ ପୃଷ୍ଠାଗୁଡ଼ିକରେ ଥିବା ଗ୍ରାଫିକ୍ ରଙ୍ଗଗୁଡ଼ିକ ପ୍ରତିଦିନ ସକାଳ ଠାରୁ ରାତି ପର୍ଯ୍ୟନ୍ତ ବଦଳିଥାଏ | ତା’ପରେ, ସେଠାରେ ତୁଷାର ମୋଡ୍ ଅଛି, ଯାହା ଶୀତଳ ରଙ୍ଗ ଏବଂ ଏକ ୱିନେରୀ ଥିମ୍, ଏକ ଓଭରଲେ ସ୍ତର ଏବଂ ଏକ ମିଶ୍ରଣ ମୋଡ୍ ସ es ଜନ୍ୟ |
ଏହା ଉପରେ କାର୍ଯ୍ୟ କରିବାବେଳେ, ମୁଁ ଭାବିବାକୁ ଲାଗିଲି ଯେ CSS ଆପେକ୍ଷିକ ରଙ୍ଗ ମୂଲ୍ୟ ମୋତେ ଅଧିକ ନିୟନ୍ତ୍ରଣ ଦେଇପାରେ କି ପ୍ରକ୍ରିୟାକୁ ସରଳ କରିଥାଏ | ଟିପ୍ପଣୀ: ଏହି ଟ୍ୟୁଟୋରିଆଲ୍ ରେ, ମୁଁ ଆପେକ୍ଷିକ ରଙ୍ଗ ମୂଲ୍ୟ ଏବଂ ଥିମ୍ ଗ୍ରାଫିକ୍ସ ଏବଂ ଆନିମେସନ୍ ପାଇଁ OKLCH ରଙ୍ଗ ସ୍ଥାନ ଉପରେ ଧ୍ୟାନ ଦେବି | ଯଦି ଆପଣ ଆପେକ୍ଷିକ ରଙ୍ଗରେ ଗଭୀର ଭାବରେ ବୁଡ଼ିବାକୁ ଚାହାଁନ୍ତି, ଅହମ୍ମଦ ସହିଦ ଏକ ସୁଲଭ ଇଣ୍ଟରାକ୍ଟିଭ୍ ଗାଇଡ୍ ସୃଷ୍ଟି କରିଛନ୍ତି | ରଙ୍ଗ ସ୍ପେସ୍, ଗାମୁଟ୍, ଏବଂ OKLCH ପାଇଁ, ଆମର ନିଜସ୍ୱ ଜିଓ ଗ୍ରାହାମ୍ ସେମାନଙ୍କ ବିଷୟରେ ଲେଖିଥିଲେ |
ଉପାଦାନଗୁଡିକର ବାରମ୍ବାର ବ୍ୟବହାର ମୁଖ୍ୟ ଥିଲା | ସମାନ କଳକାରଖାନାରୁ ନୂତନ ଦୃଶ୍ୟ ନିର୍ମାଣ କରିବାରେ ଜୁମ୍ ଏବଂ ଓଭରଲେଜ୍ ସହିତ ଯେତେବେଳେ ସମ୍ଭବ ପୃଷ୍ଠଭୂମି ବ୍ୟବହାର କରାଯାଇଥିଲା | ଏହା ଆବଶ୍ୟକତାରୁ ଜନ୍ମ ହୋଇଥିଲା, କିନ୍ତୁ ଏହା ବ୍ୟକ୍ତିଗତ ଦୃଶ୍ୟ ଅପେକ୍ଷା ଶୃଙ୍ଖଳା ଦୃଷ୍ଟିରୁ ଚିନ୍ତା କରିବାକୁ ଉତ୍ସାହିତ କରିଥିଲା | ରଙ୍ଗ ପ୍ୟାଲେଟ୍ ମାନୁଆଲ୍ ଅପଡେଟ୍ କରିବାରେ ସମସ୍ୟା | ଚାଲନ୍ତୁ ମୋ ଚ୍ୟାଲେଞ୍ଜକୁ ସିଧା ଯିବା | ଏହି ପରି ଟୁନ୍ ଟାଇଟଲ୍ ଗୁଡିକରେ - 1959 ଯୋଗୀ ଭାଲୁ ଶୋ ଏପିସୋଡ୍ “ଲୁଲାବାଇ-ବାଇ ଭାଲୁ” ଉପରେ ଆଧାର କରି - ଏବଂ ମୋର କାର୍ଯ୍ୟ ସାଧାରଣତ ,, ପ୍ୟାଲେଟ୍ ଗୁଡିକ କେବଳ କିଛି ରଙ୍ଗରେ ସୀମିତ |
ଅଧିକ ରଙ୍ଗ ଯୋଗ ନକରି ପ୍ୟାଲେଟ୍ ବିସ୍ତାର କରିବାକୁ ମୁଁ ମୋର “ଫାଉଣ୍ଡେସନ୍” ରଙ୍ଗ ବୋଲି କହିଥିବା ଛାଇ ଏବଂ ଟିଣ୍ଟସ୍ ସୃଷ୍ଟି କରେ |
ସ୍କେଚ୍ ରେ, ମୁଁ HSL ରଙ୍ଗ ସ୍ପେସ୍ ରେ କାମ କରେ, ତେଣୁ ଏହି ପ୍ରକ୍ରିୟା ମୋ ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗର ହାଲୁକା ମୂଲ୍ୟ ବୃଦ୍ଧି କିମ୍ବା ହ୍ରାସ କରେ | ସତ କହିବାକୁ ଗଲେ, ଏହା ଏକ କଷ୍ଟଦାୟକ କାର୍ଯ୍ୟ ନୁହେଁ - କିନ୍ତୁ ଏକ ଭିନ୍ନ ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ ବାଛିବା ପାଇଁ ଏକ ନୂତନ ଛାୟା ଏବଂ ଟିଣ୍ଟ୍ ସୃଷ୍ଟି କରିବା ଆବଶ୍ୟକ | ଏହାକୁ ମାନୁଆଲୀ କରିବା, ବାରମ୍ବାର, ଶୀଘ୍ର ପରିଶ୍ରମୀ ହୋଇଯାଏ |
ମୁଁ HSL - H (hue), S (saturation), ଏବଂ L (ହାଲୁକା) - ରଙ୍ଗ ସ୍ଥାନ ବିଷୟରେ ଉଲ୍ଲେଖ କରିଛି, କିନ୍ତୁ ରଙ୍ଗ ବର୍ଣ୍ଣନା କରିବାର ଏହା ଅନେକ ଉପାୟ ମଧ୍ୟରୁ ଗୋଟିଏ | RGB - R (ଲାଲ୍), G (ସବୁଜ), B (ନୀଳ) - ବୋଧହୁଏ ସବୁଠାରୁ ପରିଚିତ, ଅନ୍ତତ its ପକ୍ଷେ ଏହାର ହେକ୍ସ ଫର୍ମରେ | LAB - L (ହାଲୁକା), A (ସବୁଜ - ନାଲି), ବି (ନୀଳ - ହଳଦିଆ) - ଏବଂ ନୂତନ, କିନ୍ତୁ ବର୍ତ୍ତମାନ ଏହାର OKLCH ଫର୍ମରେ LCH - L (ହାଲୁକା), C (କ୍ରୋମା), H (hue) - ମଡେଲ୍ ବହୁଳ ଭାବରେ ସମର୍ଥିତ | LCH ସହିତ - ବିଶେଷ ଭାବରେ CSS ରେ OKLCH - ମୁଁ ମୋର ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗର ହାଲୁକା ମୂଲ୍ୟକୁ ସଜାଡି ପାରିବି |
କିମ୍ବା ମୁଁ ଏହାର କ୍ରୋମା ପରିବର୍ତ୍ତନ କରିପାରିବି | LCH କ୍ରୋମା ଏବଂ HSL ସାଚୁଚରେସନ୍ ଉଭୟ ରଙ୍ଗର ତୀବ୍ରତା କିମ୍ବା ସମୃଦ୍ଧତାକୁ ବର୍ଣ୍ଣନା କରେ, କିନ୍ତୁ ସେମାନେ ଏହାକୁ ଭିନ୍ନ ଉପାୟରେ କରନ୍ତି | LCH ମୋତେ ଏକ ବ୍ୟାପକ ପରିସର ଏବଂ ରଙ୍ଗ ମଧ୍ୟରେ ଅଧିକ ପୂର୍ବାନୁମାନଯୋଗ୍ୟ ମିଶ୍ରଣ ଦେଇଥାଏ |
ସମାନ ହାଲୁକା ଏବଂ କ୍ରୋମା ମୂଲ୍ୟ ବାଣ୍ଟୁଥିବା ରଙ୍ଗର ଏକ ପ୍ୟାଲେଟ୍ ସୃଷ୍ଟି କରିବାକୁ ମୁଁ ମଧ୍ୟ ପରିବର୍ତ୍ତନ କରିପାରିବି | ଉଭୟ HSL ଏବଂ LCH ରେ, ହ୍ୟୁ ସ୍ପେକ୍ଟ୍ରମ୍ ଲାଲରୁ ଆରମ୍ଭ ହୁଏ, ସବୁଜ ଏବଂ ନୀଳ ଦେଇ ଗତି କରେ ଏବଂ ଲାଲକୁ ଫେରିଯାଏ |
ମୁଁ ରଙ୍ଗ ବିଷୟରେ କିପରି ଭାବୁଛି OKLCH କାହିଁକି ବଦଳିଲା | OKLCH ରଙ୍ଗ ସ୍ଥାନ ପାଇଁ ବ୍ରାଉଜର୍ ସମର୍ଥନ ବର୍ତ୍ତମାନ ବ୍ୟାପକ ହୋଇଛି, ଯଦିଓ ଡିଜାଇନ୍ ଉପକରଣଗୁଡିକ - ସ୍କେଚ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରି - ଧରାପଡିନାହିଁ | ସ Fort ଭାଗ୍ୟବଶତ ,, ଏହା ଆପଣଙ୍କୁ OKLCH ବ୍ୟବହାର କରିବାରେ ଅଟକାଇବା ଉଚିତ୍ ନୁହେଁ | ବ୍ରାଉଜର୍ମାନେ ଖୁସିରେ ଆପଣଙ୍କ ପାଇଁ ହେକ୍ସ, HSL, LAB, ଏବଂ RGB ମୂଲ୍ୟକୁ OKLCH ରେ ରୂପାନ୍ତର କରିବେ | ଆପଣ ଯେକ any ଣସି ସ୍ଥାନରେ ଫାଉଣ୍ଡେସନ ରଙ୍ଗ ସହିତ ଏକ CSS କଷ୍ଟମ୍ ପ୍ରପର୍ଟି ବ୍ୟାଖ୍ୟା କରିପାରିବେ, ହେକ୍ସକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରି: / * ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ * / - ଫାଉଣ୍ଡେସନ୍: # 5accd6;
ଏଥିରୁ ଉତ୍ପନ୍ନ ଯେକ colors ଣସି ରଙ୍ଗ ସ୍ୱୟଂଚାଳିତ ଭାବରେ OKLCH ରେ ରୂପାନ୍ତରିତ ହେବ: - ଫାଉଣ୍ଡେସନ୍-ଲାଇଟ୍: oklch (var ରୁ (- ଫାଉଣ୍ଡେସନ୍) [...];} - ଫାଉଣ୍ଡେସନ୍-ମିଡ୍: oklch (var ରୁ (- ଫାଉଣ୍ଡେସନ୍) [...];} - ଫାଉଣ୍ଡେସନ୍-ଅନ୍ଧାର: oklch (var (- ଭିତ୍ତିରୁ) [...];}
ଏକ ଡିଜାଇନ୍ ସିଷ୍ଟମ୍ ଭାବରେ ଆପେକ୍ଷିକ ରଙ୍ଗ | ଆପେକ୍ଷିକ ରଙ୍ଗ ବିଷୟରେ ଭାବନ୍ତୁ: “ଏହି ରଙ୍ଗ ନିଅ, ଏହାକୁ ଟ୍ୱିକ୍ କର, ତା’ପରେ ମୋତେ ଫଳାଫଳ ଦିଅ |” ଏକ ରଙ୍ଗ ସଜାଡିବା ପାଇଁ ଦୁଇଟି ଉପାୟ ଅଛି: ସଂପୂର୍ଣ୍ଣ ପରିବର୍ତ୍ତନ ଏବଂ ଆନୁପାତିକ ପରିବର୍ତ୍ତନ | ସେମାନେ କୋଡ୍ ରେ ସମାନ ଦେଖାଯାନ୍ତି, କିନ୍ତୁ ଆପଣ ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ ଅଦଳବଦଳ କରିବା ଆରମ୍ଭ କରିବା ପରେ ବହୁତ ଭିନ୍ନ ଆଚରଣ କରନ୍ତି | ସେହି ପାର୍ଥକ୍ୟକୁ ବୁିବା ହେଉଛି ଆପେକ୍ଷିକ ରଙ୍ଗ ବ୍ୟବହାର କରି ଏକ ସିଷ୍ଟମରେ ପରିଣତ ହୋଇପାରେ | / * ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ * / - ଫାଉଣ୍ଡେସନ୍: # 5accd6;
ଉଦାହରଣ ସ୍ୱରୂପ, ମୋ ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗର ହାଲୁକା ମୂଲ୍ୟ 0.7837 ହୋଇଥିବାବେଳେ ଏକ ଗା er ଼ ସଂସ୍କରଣର ମୂଲ୍ୟ ହେଉଛି 0.5837 | ପାର୍ଥକ୍ୟ ଗଣନା କରିବାକୁ, ମୁଁ ଉଚ୍ଚରୁ ନିମ୍ନ ମୂଲ୍ୟକୁ ବାହାର କରେ ଏବଂ ଏକ calc () ଫଙ୍କସନ୍ ବ୍ୟବହାର କରି ଫଳାଫଳ ପ୍ରୟୋଗ କରେ: - ଫାଉଣ୍ଡେସନ୍-ଅନ୍ଧାର: oklch (var (- ଭିତ୍ତିରୁ)) calc (l - 0.20) c h);
ହାଲୁକା ରଙ୍ଗ ହାସଲ କରିବାକୁ, ମୁଁ ଏହା ବଦଳରେ ପାର୍ଥକ୍ୟ ଯୋଗ କରେ: - ଫାଉଣ୍ଡେସନ୍-ଲାଇଟ୍: oklch (var (- ଭିତ୍ତିରୁ)) calc (l + 0.10) c h);
କ୍ରୋମାସମାନ ପ୍ରକ୍ରିୟା ଅନୁସରଣ କରେ | ମୋ ଫାଉଣ୍ଡେସନ ରଙ୍ଗର ତୀବ୍ରତାକୁ 0.1035 ରୁ 0.0035 କୁ ହ୍ରାସ କରିବାକୁ, ମୁଁ ଅନ୍ୟ ମୂଲ୍ୟରୁ ଗୋଟିଏ ମୂଲ୍ୟ ବାହାର କରେ: oklch (var (- ଭିତ୍ତିରୁ)) l calc (c - 0.10) h);
ରଙ୍ଗର ଏକ ପ୍ୟାଲେଟ୍ ସୃଷ୍ଟି କରିବାକୁ, ମୁଁ ମୋର ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ (200) ଏବଂ ମୋର ନୂତନ ରଙ୍ଗ (260) ର ହୁ ମୂଲ୍ୟ ମଧ୍ୟରେ ପାର୍ଥକ୍ୟ ଗଣନା କରେ: oklch (var (- ଭିତ୍ତିରୁ)) l c calc (h + 60));
ସେହି ଗଣନାଗୁଡ଼ିକ ସମ୍ପୂର୍ଣ୍ଣ ଅଟେ | ଯେତେବେଳେ ମୁଁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପରିମାଣକୁ ବାହାର କରେ, ମୁଁ ପ୍ରଭାବଶାଳୀ ଭାବରେ କହୁଛି, “ସର୍ବଦା ଏହାକୁ ଅଧିକ ବାହାର କର |” ସ୍ଥିର ମୂଲ୍ୟ ଯୋଡିବାବେଳେ ସମାନ ପ୍ରଯୁଜ୍ୟ: calc (c - 0.10) calc (c + 0.10)
ମୁଁ ଏହି ଉପାୟର ସୀମା କଠିନ ଉପାୟରେ ଶିଖିଲି | ଯେତେବେଳେ ମୁଁ ସ୍ଥିର କ୍ରୋମା ମୂଲ୍ୟଗୁଡିକ ବାହାର କରିବା ଉପରେ ନିର୍ଭର କରେ, ମୁଁ ମୂଳଦୁଆ ବଦଳାଇବା ମାତ୍ରେ ରଙ୍ଗ ଧୂସର ଆଡକୁ ଖସିଗଲା | ଗୋଟିଏ ରଙ୍ଗ ପାଇଁ କାମ କରୁଥିବା ଏକ ପ୍ୟାଲେଟ୍ ଅନ୍ୟ ରଙ୍ଗ ପାଇଁ ଅଲଗା ହୋଇଗଲା | ଗୁଣନ ଭିନ୍ନ ଭାବରେ ଆଚରଣ କରେ | ଯେତେବେଳେ ମୁଁ କ୍ରୋମା ଗୁଣନ କରେ, ମୁଁ ବ୍ରାଉଜରକୁ କହୁଛି: “ଏହି ରଙ୍ଗର ତୀବ୍ରତାକୁ ଅନୁପାତରେ ହ୍ରାସ କର |” ମୂଳ ମଧ୍ୟରେ ପରିବର୍ତ୍ତନ ହେଲେ ମଧ୍ୟ ରଙ୍ଗ ମଧ୍ୟରେ ସମ୍ପର୍କ ଅକ୍ଷୁର୍ଣ୍ଣ ରହିଥାଏ: calc (c * 0.10)
ମୋର ଘୁଞ୍ଚାନ୍ତୁ, ଏହାକୁ ମାପନ୍ତୁ, ଏହାକୁ ଘୂର୍ଣ୍ଣନ କରନ୍ତୁ |
ହାଲୁକା ଘୁଞ୍ଚାନ୍ତୁ (ଯୋଡନ୍ତୁ କିମ୍ବା ବାହାର କରନ୍ତୁ), ସ୍କେଲ କ୍ରୋମା (ଗୁଣନ), ଘୂର୍ଣ୍ଣନ କରନ୍ତୁ (ଡିଗ୍ରୀ ଯୋଡନ୍ତୁ କିମ୍ବା ବାହାର କରନ୍ତୁ) |
ମୁଁ କ୍ରୋମା ସ୍କେଲ କରେ କାରଣ ମୁଁ ଚାହେଁ ଯେ ତୀବ୍ରତା ମୂଳ ରଙ୍ଗ ସହିତ ଆନୁପାତିକ ରହିବାକୁ | ହୁ ସମ୍ପର୍କଗୁଡିକ ଘୂର୍ଣ୍ଣନ ଅଟେ, ତେଣୁ ହୁକୁ ଗୁଣନ କରିବାର କ makes ଣସି ଅର୍ଥ ନାହିଁ | ହାଲୁକାତା ଅନୁଭବ ଏବଂ ସଂପୂର୍ଣ୍ଣ - ଏହାକୁ ବ lying ାଇବା ପ୍ରାୟତ od ଅଦ୍ଭୁତ ଫଳାଫଳ ସୃଷ୍ଟି କରେ |
ଗୋଟିଏ ରଙ୍ଗରୁ ସମଗ୍ର ଥିମ୍ ପର୍ଯ୍ୟନ୍ତ | ଆପେକ୍ଷିକ ରଙ୍ଗ ମୋତେ ଏକ ଫାଉଣ୍ଡେସନ ରଙ୍ଗ ବ୍ୟାଖ୍ୟା କରିବାକୁ ଏବଂ ମୋର ଆବଶ୍ୟକ କରୁଥିବା ଅନ୍ୟ ସମସ୍ତ ରଙ୍ଗ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦିଏ - ସେଥିରୁ ଭରିବା, ଷ୍ଟ୍ରୋକ, ଗ୍ରେଡିଏଣ୍ଟ୍ ଷ୍ଟପ୍, ଛାୟା | ସେହି ସମୟରେ, ରଙ୍ଗ ଏକ ପ୍ୟାଲେଟ୍ ହେବା ବନ୍ଦ କରି ଏକ ସିଷ୍ଟମ୍ ହେବା ଆରମ୍ଭ କରେ | SVG ଚିତ୍ରଗୁଡ଼ିକ ଫିଲ୍, ଷ୍ଟ୍ରୋକ, ଏବଂ ଗ୍ରେଡିଏଣ୍ଟ୍ ମଧ୍ୟରେ ସମାନ ଅଳ୍ପ ରଙ୍ଗକୁ ପୁନ use ବ୍ୟବହାର କରିବାକୁ ଲାଗେ | ଆପେକ୍ଷିକ ରଙ୍ଗ ଆପଣଙ୍କୁ ସେହି ସମ୍ପର୍କଗୁଡ଼ିକୁ ଥରେ ବ୍ୟାଖ୍ୟା କରିବାକୁ ଦେଇଥାଏ ଏବଂ ସେଗୁଡିକୁ ସର୍ବତ୍ର ପୁନ use ବ୍ୟବହାର କରିବାକୁ ଦେଇଥାଏ - ଯେପରି ଆନିମେଟରମାନେ ନୂତନ ଦୃଶ୍ୟ ସୃଷ୍ଟି କରିବା ପାଇଁ ପୃଷ୍ଠଭୂମି ବ୍ୟବହାର କରିଥିଲେ |
ଫାଉଣ୍ଡେସନ ରଙ୍ଗକୁ ଥରେ ପରିବର୍ତ୍ତନ କରନ୍ତୁ, ଏବଂ ପ୍ରତ୍ୟେକ ଉତ୍ପାଦିତ ରଙ୍ଗ ସ୍ୱୟଂଚାଳିତ ଭାବରେ, ହାତରେ କିଛି ପୁନ al ଗଣନା ନକରି ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଅପଡେଟ୍ କରେ | ଆନିମେଟେଡ୍ ଗ୍ରାଫିକ୍ସ ବାହାରେ, ମୁଁ ବଟନ୍ ଏବଂ ଲିଙ୍କ୍ ପରି ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନଗୁଡ଼ିକର ଅବସ୍ଥା ପାଇଁ ରଙ୍ଗ ବ୍ୟାଖ୍ୟା କରିବାକୁ ଏହି ସମାନ ଉପାୟ ବ୍ୟବହାର କରିପାରିବି | ମୋର “ଲୁଲାବାଇ-ବାଇ ଭାଲୁ” ଟୁନ୍ ଟାଇଟଲ୍ ରେ ବ୍ୟବହାର କରିଥିବା ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ ହେଉଛି ଏକ ସିଆନ୍ ଦେଖାଯାଉଥିବା ନୀଳ | ପୃଷ୍ଠଭୂମି ହେଉଛି ମୋ ଫାଉଣ୍ଡେସନ୍ ଏବଂ ଏକ ଗା er ଼ ସଂସ୍କରଣ ମଧ୍ୟରେ ଏକ ରେଡିୟଲ୍ ଗ୍ରେଡିଏଣ୍ଟ୍ |
ସଂପୂର୍ଣ୍ଣ ଭିନ୍ନ ମନୋଭାବ ସହିତ ବିକଳ୍ପ ସଂସ୍କରଣ ସୃଷ୍ଟି କରିବାକୁ, ମୋତେ କେବଳ ମୂଳ ରଙ୍ଗ ପରିବର୍ତ୍ତନ କରିବାକୁ ପଡିବ: - ଫାଉଣ୍ଡେସନ୍: # 5accd6; - ଗ୍ରାଡ୍-ଏଣ୍ଡ୍: var (- ମୂଳଦୁଆ); - ଗ୍ରାଡ୍-ଷ୍ଟାର୍ଟ: oklch (var ରୁ - - ଫାଉଣ୍ଡେସନ୍) calc (l - 0.2357) calc (c * 0.833) h);
ସେହି କଷ୍ଟମ୍ ଗୁଣଗୁଡ଼ିକୁ ମୋର SVG ଗ୍ରେଡିଏଣ୍ଟରେ ରଙ୍ଗ ମୂଲ୍ୟ ନକଲ ନକରି ବାନ୍ଧିବା ପାଇଁ, ମୁଁ ହାର୍ଡ-କୋଡେଡ୍ ଷ୍ଟପ୍-ରଙ୍ଗ ମୂଲ୍ୟଗୁଡ଼ିକୁ ଇନଲାଇନ ଶ yles ଳୀ ସହିତ ବଦଳାଇଲି:
ପରବର୍ତ୍ତୀ ସମୟରେ, ମୁଁ ନିଶ୍ଚିତ କରିବାକୁ ଆବଶ୍ୟକ କରେ ଯେ ମୋର ଟୁନ୍ ଟେକ୍ସଟ୍ ସବୁବେଳେ ଯାହା ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ ବାଛିଥାଏ ତାହା ସହିତ ଭିନ୍ନ ଅଟେ | ଏକ 180deg ରଙ୍ଗର ଘୂର୍ଣ୍ଣନ ଏକ ସଂପୃକ୍ତ ରଙ୍ଗ ଉତ୍ପାଦନ କରେ ଯାହା ନିଶ୍ଚିତ ଭାବରେ ପପ୍ ହୁଏ - କିନ୍ତୁ ଅସ୍ୱାଭାବିକ ଭାବରେ କମ୍ପନ କରିପାରିବ: .text-light { ପୁରଣ: oklch (var ରୁ - - ଫାଉଣ୍ଡେସନ୍) l c calc (h + 180)); }
ଏକ 90 ° ଶିଫ୍ଟ ସଂପୂର୍ଣ୍ଣ ସଂପନ୍ନ ନ ହୋଇ ଏକ ଉଜ୍ଜ୍ୱଳ ଦଳୀୟ ରଙ୍ଗ ଉତ୍ପାଦନ କରେ: .text-light { ପୁରଣ: oklch (var ରୁ - - ଫାଉଣ୍ଡେସନ୍) l c calc (h - 90)); }
କୁଇକ୍ ଡ୍ର ମ୍ୟାକଗ୍ରାଙ୍କ 1959 ଟୁନ୍ ଟାଇଟଲ୍ “ଏଲ୍ କାବୋଙ୍ଗ” ର ମୋର ମନୋରଞ୍ଜନ ସମାନ କ ques ଶଳ ବ୍ୟବହାର କରେ କିନ୍ତୁ ଏକ ବିବିଧ ପ୍ୟାଲେଟ୍ ସହିତ | ଉଦାହରଣ ସ୍ୱରୂପ, ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ ଏବଂ ଏକ ଗା er ଼ ଛାଇ ମଧ୍ୟରେ ଆଉ ଏକ ରେଡିଆଲ୍ ଗ୍ରେଡିଏଣ୍ଟ୍ ଅଛି |
ପୃଷ୍ଠଭୂମିରେ ଥିବା କୋଠା ଏବଂ ଗଛ ସମାନ ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗର ଭିନ୍ନ ଛାଇ | ସେହି ପଥଗୁଡ଼ିକ ପାଇଁ, ମୁଁ ଦୁଇଟି ଅତିରିକ୍ତ ପୂର୍ଣ୍ଣ ରଙ୍ଗ ଆବଶ୍ୟକ କରେ: .bg-mid { ପୁରଣ: oklch (var ରୁ - - ଫାଉଣ୍ଡେସନ୍) calc (l - 0.04) calc (c * 0.91) h); }
.bg-dark { ପୁରଣ: oklch (var ରୁ - - ଫାଉଣ୍ଡେସନ୍) calc (l - 0.12) calc (c * 0.64) h); }
ଯେତେବେଳେ ଫାଉଣ୍ଡେସନ ଗତି କରିବା ଆରମ୍ଭ କରେ | ଏପର୍ଯ୍ୟନ୍ତ, ମୁଁ ଦେଖାଇଥିବା ସବୁକିଛି ସ୍ଥିର ହୋଇଛି | ଫାଉଣ୍ଡେସନ ରଙ୍ଗ ବଦଳାଇବା ପାଇଁ ଯେତେବେଳେ କେହି ରଙ୍ଗ ବାଛିବା ବ୍ୟବହାର କରନ୍ତି, ସେହି ପରିବର୍ତ୍ତନ ତୁରନ୍ତ ଘଟେ | କିନ୍ତୁ ଆନିମେଟେଡ୍ ଗ୍ରାଫିକ୍ସ କ୍ୱଚିତ୍ ସ୍ଥିର ଥାଏ - ସୂଚକ ନାମରେ ଅଛି | ତେଣୁ, ଯଦି ରଙ୍ଗ ସିଷ୍ଟମର ଏକ ଅଂଶ, ତେବେ ଏହା ମଧ୍ୟ ଜୀବନ୍ତ ହୋଇପାରିବ ନାହିଁ | ଫାଉଣ୍ଡେସନ ରଙ୍ଗକୁ ଆନିମେଟ କରିବାକୁ, ମୋତେ ପ୍ରଥମେ ଏହାର OKLCH ଚ୍ୟାନେଲରେ ବିଭକ୍ତ କରିବାକୁ ପଡିବ |- ହାଲୁକାତା, କ୍ରୋମା, ଏବଂ ରଙ୍ଗ | କିନ୍ତୁ ସେଠାରେ ଏକ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ଅତିରିକ୍ତ ପଦକ୍ଷେପ ଅଛି: ମୋତେ ସେହି ମୂଲ୍ୟଗୁଡ଼ିକୁ ଟାଇପ୍ ହୋଇଥିବା କଷ୍ଟମ୍ ଗୁଣ ଭାବରେ ପଞ୍ଜିକରଣ କରିବାକୁ ପଡିବ | କିନ୍ତୁ ଏହାର ଅର୍ଥ କ’ଣ? ଡିଫଲ୍ଟ ଭାବରେ, ଏକ ବ୍ରାଉଜର୍ ଜାଣେ ନାହିଁ ଯେ ଏକ CSS କଷ୍ଟମ୍ ପ୍ରପର୍ଟି ମୂଲ୍ୟ ଏକ ରଙ୍ଗ, ଦ length ର୍ଘ୍ୟ, ସଂଖ୍ୟା, କିମ୍ବା ଅନ୍ୟ କିଛି ସମ୍ପୁର୍ଣ୍ଣ ଭାବରେ ପ୍ରତିନିଧିତ୍ୱ କରେ କି ନାହିଁ | ଏହାର ପ୍ରାୟତ means ଅର୍ଥ ହେଉଛି ଯେ ସେମାନେ ଆନିମେସନ୍ ସମୟରେ ସୁଗମ ଭାବରେ ଇଣ୍ଟରପୋଲେଟ୍ ହୋଇପାରିବେ ନାହିଁ, ଏବଂ ଗୋଟିଏ ମୂଲ୍ୟରୁ ଅନ୍ୟ ମୂଲ୍ୟକୁ ଡେଇଁପାରିବେ | ଏକ କଷ୍ଟମ୍ ପ୍ରପର୍ଟି ପଞ୍ଜିକରଣ କରିବା ବ୍ରାଉଜରକୁ ଏହା ପ୍ରତିନିଧିତ୍ୱ କରୁଥିବା ମୂଲ୍ୟର ପ୍ରକାର ଏବଂ ସମୟ ସହିତ ଏହା କିପରି ବ୍ୟବହାର କରିବା ଉଚିତ ତାହା କହିଥାଏ | ଏହି ପରିପ୍ରେକ୍ଷୀରେ, ମୁଁ ଚାହୁଁଛି ବ୍ରାଉଜର୍ ମୋ ରଙ୍ଗ ଚ୍ୟାନେଲଗୁଡ଼ିକୁ ସଂଖ୍ୟା ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ ଯାହା ଦ୍ smooth ାରା ସେମାନେ ସୁରୁଖୁରୁରେ ଆନିମେସନ୍ ହୋଇପାରିବେ | @ ପ୍ରପର୍ଟି - f-l { ବାକ୍ୟବିନ୍ୟାସ: "<ସଂଖ୍ୟା>"; ଉତ୍ତରାଧିକାରୀ: ସତ୍ୟ; ପ୍ରାରମ୍ଭିକ ମୂଲ୍ୟ: 0.40; }
@ ପ୍ରପର୍ଟି - f-c { ବାକ୍ୟବିନ୍ୟାସ: "<ସଂଖ୍ୟା>"; ଉତ୍ତରାଧିକାରୀ: ସତ୍ୟ; ପ୍ରାରମ୍ଭିକ ମୂଲ୍ୟ: 0.11; }
@ ପ୍ରପର୍ଟି - f-h { ବାକ୍ୟବିନ୍ୟାସ: "<ସଂଖ୍ୟା>"; ଉତ୍ତରାଧିକାରୀ: ସତ୍ୟ; ପ୍ରାରମ୍ଭିକ ମୂଲ୍ୟ: 305; }
ଥରେ ପଞ୍ଜୀକୃତ ହୋଇଗଲେ, ଏହି କଷ୍ଟମ୍ ଗୁଣଗୁଡିକ ଦେଶୀ CSS ପରି ଆଚରଣ କରେ | ବ୍ରାଉଜର୍ ସେମାନଙ୍କୁ ଫ୍ରେମ୍-ବାଇ-ଫ୍ରେମ୍ ଇଣ୍ଟରପୋଲେଟ୍ କରିପାରିବ | ମୁଁ ତାପରେ ସେହି ଚ୍ୟାନେଲଗୁଡ଼ିକରୁ ମୂଳ ରଙ୍ଗ ପୁନ build ନିର୍ମାଣ କରେ: - ଫାଉଣ୍ଡେସନ୍: oklch (var (- f-l) var (- f-c) var (- f-h));
ଏହା ଅନ୍ୟ କ numer ଣସି ସାଂଖ୍ୟିକ ମୂଲ୍ୟ ପରି ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ ଆନିମେଟେବଲ୍ ହୋଇଯାଏ | ଏଠାରେ ଏକ ସରଳ “ଶ୍ୱାସକ୍ରିୟା” ଆନିମେସନ୍ ଯାହା ସମୟ ସହିତ ଧୀରେ ଧୀରେ ହାଲୁକା ପରିବର୍ତ୍ତନ କରେ: @keyframes ନିଶ୍ୱାସ 0%, 100% {--f-l: 0.36; } 50% {--f-l: 0.46; } }
.toon-title { ଆନିମେସନ୍: 10s ସହଜ-ଇନ୍-ଆଉଟ୍ ଅସୀମ; }
କାରଣ ଭରିବା, ଗ୍ରେଡିଏଣ୍ଟ୍, ଏବଂ ଷ୍ଟ୍ରୋକରେ ଥିବା ଅନ୍ୟ ସମସ୍ତ ରଙ୍ଗ - ଫାଉଣ୍ଡେସନ୍ ରୁ ଉତ୍ପନ୍ନ, ସେମାନେ ସମସ୍ତେ ଏକତ୍ର ଆନିମେସନ୍ କରନ୍ତି, ଏବଂ କିଛି ହସ୍ତକୃତ ଭାବରେ ଅପଡେଟ୍ ହେବା ଆବଶ୍ୟକ ନାହିଁ | ଗୋଟିଏ ଆନିମେଟେଡ୍ ରଙ୍ଗ, ଅନେକ ପ୍ରଭାବ | ଏହି ପ୍ରକ୍ରିୟା ଆରମ୍ଭରେ, ମୁଁ ଭାବିଲି CSS ଆପେକ୍ଷିକ ରଙ୍ଗ ମୂଲ୍ୟ ଅଧିକ ସମ୍ଭାବନା ପ୍ରଦାନ କରିପାରିବ କି ଏହାକୁ କାର୍ଯ୍ୟକାରୀ କରିବା ପାଇଁ ସରଳ ମଧ୍ୟ କରିବ | ମୁଁ ନିକଟରେ ମୋର ୱେବସାଇଟ୍ ର ଯୋଗାଯୋଗ ପୃଷ୍ଠାରେ ଏକ ନୂତନ ସୁନା ଖଣି ପୃଷ୍ଠଭୂମି ଯୋଡିଥିଲି, ଏବଂ ପ୍ରଥମ ପୁନରାବୃତ୍ତିରେ ତେଲ ପ୍ରଦୀପ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଥିଲା ଯାହା ଉଜ୍ଜ୍ୱଳ ଏବଂ ସୁଇଙ୍ଗ୍ |
ମୁଁ ଅନୁସନ୍ଧାନ କରିବାକୁ ଚାହୁଁଥିଲି କି CSS ଆପେକ୍ଷିକ ରଙ୍ଗଗୁଡିକ ଆନିମେସନ୍ କିପରି ଖଣି ଭିତର ଅଂଶକୁ ଦୀପରୁ ରଙ୍ଗ ଦେଇ ଟିଣ୍ଟି କରି ଅଧିକ ବାସ୍ତବ କରିପାରେ | ମୁଁ ଚାହୁଁଥିଲି ଯେ ସେମାନେ ଆଖପାଖ ଜଗତକୁ ପ୍ରଭାବିତ କରନ୍ତୁ, ପ୍ରକୃତ ଆଲୋକ ଯେପରି | ତେଣୁ, ଏକାଧିକ ରଙ୍ଗ ଆନିମେସନ୍ କରିବା ପରିବର୍ତ୍ତେ, ମୁଁ ଏକ କ୍ଷୁଦ୍ର ଆଲୋକ ବ୍ୟବସ୍ଥା ନିର୍ମାଣ କଲି ଯାହା କେବଳ ଗୋଟିଏ ରଙ୍ଗକୁ ଆନିମେସନ୍ କରେ |
ମୋର ପ୍ରଥମ କାର୍ଯ୍ୟ ଥିଲା ପୃଷ୍ଠଭୂମି ଏବଂ ମୋ ଲ୍ୟାମ୍ପ ମଧ୍ୟରେ ଏକ ଓଭର ଲେୟାର ସ୍ଲଟ୍ କରିବା: <ପଥ id = "ଆଚ୍ଛାଦନ" fill = "var (- overlay-tint)" [...] style = "ମିଶ୍ରଣ-ମିଶ୍ରଣ-ଧାରା: ରଙ୍ଗ" />
ମୁଁ ମିକ୍ସ-ବ୍ଲେଣ୍ଡ-ମୋଡ୍ ବ୍ୟବହାର କଲି: ରଙ୍ଗ କାରଣ ଏହା ଅନ୍ତର୍ନିହିତ ଆଲୋକକୁ ସଂରକ୍ଷଣ କରିବାବେଳେ ଏହା ତଳେ ଥିବା ବିଷୟକୁ ସୂଚିତ କରେ | ଯେହେତୁ ମୁଁ କେବଳ ଚାହେଁ ଯେ ଆନିମେସନ୍ ଅନ୍ ହୋଇଗଲେ ଓଭରଲେ ଦୃଶ୍ୟମାନ ହୁଏ, ମୁଁ ଓଭରଲେଟ୍ ଅପ୍ଟ-ଇନ୍ କଲି: .svg-mine #overlay { ପ୍ରଦର୍ଶନ: କିଛି ନୁହେଁ; }
@ ମିଡିଆ (ପସନ୍ଦ-ହ୍ରାସ-ଗତି: ପସନ୍ଦ ନାହିଁ) { .svg-mine [data-animations = on] #overlay { ପ୍ରଦର୍ଶନ: ବ୍ଲକ; ସ୍ୱଚ୍ଛତା: 0.5; } }
ଆଚ୍ଛାଦନ ସ୍ଥାନରେ ଥିଲା, କିନ୍ତୁ ଏପର୍ଯ୍ୟନ୍ତ ଦୀପଗୁଡ଼ିକ ସହିତ ସଂଯୁକ୍ତ ହୋଇନାହିଁ | ମୋର ଏକ ଆଲୋକ ଉତ୍ସ ଦରକାର | ମୋର ଦୀପଗୁଡ଼ିକ ସରଳ, ଏବଂ ପ୍ରତ୍ୟେକଟି ଏକ ବୃତ୍ତ ଉପାଦାନ ଧାରଣ କରେ ଯାହା ମୁଁ ଏକ ଫିଲ୍ଟର୍ ସହିତ ଅସ୍ପଷ୍ଟ | ଫିଲ୍ଟର୍ ସମଗ୍ର ବୃତ୍ତ ଉପରେ ଏକ ନରମ ଅସ୍ପଷ୍ଟତା ସୃଷ୍ଟି କରେ |
ଅଲଗା ଅଲଗା ଏବଂ ଲ୍ୟାମ୍ପକୁ ପୃଥକ ଭାବରେ ଆନିମେସନ୍ କରିବା ପରିବର୍ତ୍ତେ, ମୁଁ ଗୋଟିଏ “ଫ୍ଲେମ୍” ରଙ୍ଗ ଟୋକେନ୍ ଆନିମେଟ କରେ ଏବଂ ସେଥିରୁ ଅନ୍ୟ ସମସ୍ତ ଜିନିଷ ପାଇଥାଏ | ପ୍ରଥମେ, ମୁଁ OKLCH ଚ୍ୟାନେଲଗୁଡ଼ିକ ପାଇଁ ତିନୋଟି ଟାଇପ୍ ହୋଇଥିବା କଷ୍ଟମ୍ ଗୁଣ ପଞ୍ଜିକରଣ କରେ: @ ପ୍ରପର୍ଟି --fl-l { ବାକ୍ୟବିନ୍ୟାସ: "<ସଂଖ୍ୟା>"; ଉତ୍ତରାଧିକାରୀ: ସତ୍ୟ; ପ୍ରାରମ୍ଭିକ ମୂଲ୍ୟ: 0.86; } @ ପ୍ରପର୍ଟି --fl-c { ବାକ୍ୟବିନ୍ୟାସ: "<ସଂଖ୍ୟା>"; ଉତ୍ତରାଧିକାରୀ: ସତ୍ୟ; ପ୍ରାରମ୍ଭିକ ମୂଲ୍ୟ: 0.12; } @ ପ୍ରପର୍ଟି --fl-h { ବାକ୍ୟବିନ୍ୟାସ: "<ସଂଖ୍ୟା>"; ଉତ୍ତରାଧିକାରୀ: ସତ୍ୟ; ପ୍ରାରମ୍ଭିକ ମୂଲ୍ୟ: 95; }
ମୁଁ ସେହି ଚ୍ୟାନେଲଗୁଡିକୁ ଆନିମେସନ୍ କଲି, ଜାଣିଶୁଣି କମଳା ଆଡକୁ କିଛି ଫ୍ରେମ୍ କୁ ଠେଲି ଦେଲି ତେଣୁ ଫ୍ଲିକର୍ ଫାୟାର ଲାଇଟ୍ ଭାବରେ ସ୍ପଷ୍ଟ ଭାବରେ ପ read େ:
@keyframes flame { 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; } }
ତା’ପରେ ମୁଁ ସେହି ଆନିମେସନ୍ କୁ SVG କୁ ସ୍କୋପ୍ କଲି, ତେଣୁ ସେୟାର୍ ଭେରିଏବଲ୍ ଉଭୟ ଲ୍ୟାମ୍ପ ଏବଂ ମୋ ଓଭରଲେଜ୍ ପାଇଁ ଉପଲବ୍ଧ:
@ ମିଡିଆ (ପସନ୍ଦ-ହ୍ରାସ-ଗତି: ପସନ୍ଦ ନାହିଁ) { .svg-mine [data-animations = on] { ଆନିମେସନ୍: ଅଗ୍ନି 3.6s ଅସୀମ ରେଖା; ବିଚ୍ଛିନ୍ନତା: ବିଚ୍ଛିନ୍ନ;
/ * ଆନିମେଟେଡ୍ ଚ୍ୟାନେଲରୁ ଏକ ଅଗ୍ନି ରଙ୍ଗ ନିର୍ମାଣ କରନ୍ତୁ * / - ଫ୍ଲେମ୍: oklch (var (- fl-l) var (- fl-c) var (- fl-h));
/ * ପ୍ରଦୀପ ରଙ୍ଗ ଅଗ୍ନିରୁ ଉତ୍ପନ୍ନ * / - ଲ୍ୟାମ୍ପ-କୋର୍: oklch (var (- flame) calc (l + 0.05) calc (c * 0.70) h);
/ * ସମାନ ଅଗ୍ନିରୁ ଉତ୍ପନ୍ନ ଓଭରଲେଟ୍ ଟିଣ୍ଟ୍ * / - ଓଭରଲେ-ଟିଣ୍ଟ: oklch (var ରୁ - - ଅଗ୍ନି) calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
ଶେଷରେ, ମୁଁ ସେହି ଉତ୍ପନ୍ନ ରଙ୍ଗଗୁଡ଼ିକୁ ଜ୍ୟୋତି ପ୍ରଦୀପ ଏବଂ ସେମାନେ ପ୍ରଭାବିତ କରୁଥିବା ଓଭରଲେଜରେ ପ୍ରୟୋଗ କଲି: @ ମିଡିଆ (ପସନ୍ଦ-ହ୍ରାସ-ଗତି: ପସନ୍ଦ ନାହିଁ) { .svg-mine [data-animations = on] # mine-lamp-1> ସର୍କଲ୍, .svg-mine [data-animations = on] # mine-lamp-2> ସର୍କଲ୍ { ପୂରଣ: var (- ପ୍ରଦୀପ-କୋର); }
.svg-mine [data-animations = on] #overlay { ପ୍ରଦର୍ଶନ: ବ୍ଲକ; ପୂରଣ: var (- ଓଭରଲେଟ୍-ଟିଣ୍ଟ); ସ୍ୱଚ୍ଛତା: 0.5; } }
ଯେତେବେଳେ ନିଆଁ କମଳା ଆଡକୁ ଗତି କରେ, ଦୀପ ଗରମ ହୁଏ, ଏବଂ ଦୃଶ୍ୟ ସେମାନଙ୍କ ସହିତ ଗରମ ହୁଏ | ଯେତେବେଳେ ନିଆଁ ଥଣ୍ଡା ହୁଏ, ସବୁକିଛି ଏକତ୍ର ହୋଇଯାଏ | ସର୍ବୋତ୍ତମ ଅଂଶ ହେଉଛି କିଛି ହସ୍ତକୃତ ଭାବରେ ଲେଖାଯାଇ ନାହିଁ | ଯଦି ମୁଁ ଫାଉଣ୍ଡେସନ ରଙ୍ଗ ପରିବର୍ତ୍ତନ କରେ କିମ୍ବା ଫ୍ଲେମ୍ ଆନିମେସନ୍ ରେଞ୍ଜକୁ ଟୁକ୍ କରେ, ସମଗ୍ର ଲାଇଟିଂ ସିଷ୍ଟମ୍ ଏକାସାଙ୍ଗରେ ଅପଡେଟ୍ ହୁଏ | ଆପଣ ମୋ ୱେବସାଇଟ୍ ରେ ଅନ୍ତିମ ଫଳାଫଳ ଦେଖିପାରିବେ | ପୁନ use ବ୍ୟବହାର, ପୁନର୍ବାର, ପୁନ is ସମୀକ୍ଷା | ସେହି ହାନ୍ନା-ବାରବେରା ଆନିମେଟରଗୁଡିକ ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଉପାଦାନଗୁଡ଼ିକୁ ପୁନ ur ସ୍ଥାପିତ କରିବାକୁ ବାଧ୍ୟ ହୋଇଥିଲେ, କିନ୍ତୁ ମୁଁ ରଙ୍ଗକୁ ପୁନ use ବ୍ୟବହାର କରେ କାରଣ ଏହା ମୋର କାର୍ଯ୍ୟକୁ ଅଧିକ ସ୍ଥିର ଏବଂ ପରିଚାଳନା କରିବା ସହଜ କରିଥାଏ | CSS ଆପେକ୍ଷିକ ରଙ୍ଗ ମୂଲ୍ୟ ମୋତେ ଅନୁମତି ଦିଏ:
ଗୋଟିଏ ଫାଉଣ୍ଡେସନ୍ ରଙ୍ଗ ବ୍ୟାଖ୍ୟା କରନ୍ତୁ, ଅନ୍ୟ ରଙ୍ଗଗୁଡ଼ିକ ଏହା ସହିତ କିପରି ଜଡିତ, ବର୍ଣ୍ଣନା କର, ସେହି ସମ୍ପର୍କଗୁଡିକ ସବୁ ସ୍ଥାନରେ ପୁନ use ବ୍ୟବହାର କରନ୍ତୁ, ଏବଂ ଗୋଟିଏ ମୂଲ୍ୟ ପରିବର୍ତ୍ତନ କରି ସିଷ୍ଟମକୁ ଆନିମେଟ କରନ୍ତୁ |
ଆପେକ୍ଷିକ ରଙ୍ଗ କେବଳ ଥିମ୍ କରିବା ସହଜ କରେ ନାହିଁ | ଏହା ଏକ ଚିନ୍ତାଧାରାକୁ ଉତ୍ସାହିତ କରେ ଯେଉଁଠାରେ ରଙ୍ଗ, ଗତି ପରି, ଉଦ୍ଦେଶ୍ୟମୂଳକ - ଏବଂ ଯେଉଁଠାରେ ଗୋଟିଏ ମୂଲ୍ୟ ବଦଳାଇବା ଏହା ତଳେ ଥିବା କାର୍ଯ୍ୟକୁ ପୁନ r ଲିଖନ ନକରି ସମଗ୍ର ଦୃଶ୍ୟକୁ ରୂପାନ୍ତର କରିପାରିବ |
