ଏକ ପ୍ରୋଜେକ୍ଟ ସମାପ୍ତ କରିବା ପରେ ଯାହା ମୋତେ CSS ଏବଂ SVG ଆନିମେସନ୍ ବିଷୟରେ ସବୁକିଛି ଶିଖିବା ଆବଶ୍ୟକ କରେ, ମୁଁ ସ୍ମାଶିଂ ଆନିମେସନ୍ ଏବଂ “କ୍ଲାସିକ୍ କାର୍ଟୁନ୍ ଆଧୁନିକ CSS କୁ କିପରି ପ୍ରେରଣା ଦିଏ” ବିଷୟରେ ଏହି ସିରିଜ୍ ଲେଖିବା ଆରମ୍ଭ କଲି | ଏହି ବର୍ଷକୁ ବନ୍ଦ କରିବାକୁ, ମୁଁ ଆପଣଙ୍କୁ ଦେଖାଇବାକୁ ଚାହୁଁଛି ଆଧୁନିକ CSS କୁ କିପରି ବ୍ୟବହାର କରିବାକୁ ସେହି ଉପାଦାନ ସୃଷ୍ଟି କରିବାକୁ ଯାହା ଟୁନ୍ ଟାଇଟଲ୍ସକୁ ଏତେ ପ୍ରଭାବଶାଳୀ କରିଥାଏ: ସେମାନଙ୍କର ଟାଇପୋଗ୍ରାଫି | ଟାଇଟଲ୍ ଆର୍ଟୱାର୍କ ଡିଜାଇନ୍ | 1920 ଏବଂ 30 ଦଶକର ନୀରବ ଯୁଗରେ, ଏକ ଚଳଚ୍ଚିତ୍ରର ଟାଇଟଲ୍ କାର୍ଡର ଟାଇପୋଗ୍ରାଫି ଏକ ମନୋବଳ ସୃଷ୍ଟି କରିଥିଲା, ଦୃଶ୍ୟ ସ୍ଥିର କରିଥିଲା ଏବଂ ଦର୍ଶକଙ୍କୁ ସେମାନେ କେଉଁ ପ୍ରକାରର ଚଳଚ୍ଚିତ୍ର ଦେଖିବା ପାଇଁ ମନେ ପକାଇ ଦେଇଥିଲେ |
କାର୍ଟୁନ୍ ଟାଇଟଲ୍ କାର୍ଡଗୁଡିକ ମଧ୍ୟ ବ୍ରାଣ୍ଡିଂ, ମୁଡ୍ ଏବଂ ଦୃଶ୍ୟ ସେଟିଂ ଥିଲା, ସମସ୍ତେ ଗୋଟିଏରେ ଗଡ଼ିଗଲେ | ପ୍ରାରମ୍ଭିକ ବର୍ଷଗୁଡିକରେ, ଯେତେବେଳେ ପ୍ରମୁଖ ଷ୍ଟୁଡିଓ ବଜେଟ୍ ଅଧିକ ଥିଲା, ଏହି ଟାଇଟଲ୍ କାର୍ଡଗୁଡ଼ିକ ପ୍ରାୟତ illust ଦୃଷ୍ଟାନ୍ତମୂଳକ ଏବଂ ଚିତ୍ରକର |
କିନ୍ତୁ ଯେତେବେଳେ ୧ 5050 ୦ ଦଶକରେ ଟେଲିଭିଜନ୍ ବୃଦ୍ଧି ପାଇଲା, ବଜେଟ୍ ହ୍ରାସ ହେଲା, ଏବଂ ଲରେନ୍ସ “ଆର୍ଟ” ଗୋବଲ୍ ପରି କଳାକାରଙ୍କ ଦ୍ୱାରା ଡିଜାଇନ୍ ହୋଇଥିବା କାର୍ଡଗୁଡ଼ିକ ଏକ ନୂତନ ଭିଜୁଆଲ୍ ଭାଷା ଗ୍ରହଣ କଲେ, ଯାହା ଅଧିକ ଗ୍ରାଫିକ୍, ଷ୍ଟାଇଲାଇଜଡ୍ ଏବଂ କମ୍ ଜଟିଳ ହୋଇଗଲା | ଟିପ୍ପଣୀ: ମଧ୍ୟ-ଶତାବ୍ଦୀର ଆମେରିକୀୟ ଆନିମେସନ୍ ର ପ୍ରାୟତ over ଅଣଦେଖା ହୋଇଥିବା ହିରୋମାନଙ୍କ ମଧ୍ୟରୁ ଲରେନ୍ସ “ଆର୍ଟ” ଗୋବଲ୍ | ସେ ମୁଖ୍ୟତ 1950 1950 ଏବଂ 1960 ଦଶକର ସବୁଠାରୁ ପ୍ରଭାବଶାଳୀ ବର୍ଷରେ ହାନ୍ନା-ବାରବେରା ପାଇଁ କାର୍ଯ୍ୟ କରିଥିଲେ | ଗୋବଲ୍ ଏକ ଚରିତ୍ର ଆନିମେଟର ନୁହେଁ | ତାଙ୍କର ଭୂମିକା ବାତାବରଣ ସୃଷ୍ଟି କରିବା ଥିଲା, ତେଣୁ ସେ ଦି ଫ୍ଲିଣ୍ଟଷ୍ଟୋନ୍, ହକ୍ଲେବେରୀ ହାଉଣ୍ଡ, କୁଇକ୍ ଡ୍ର ମ୍ୟାକଗ୍ରା, ଏବଂ ଯୋଗୀ ଭାଲୁ ପାଇଁ ପରିବେଶ ପରିକଳ୍ପନା କରିଥିଲେ ଏବଂ ଓପନିଂ ଟାଇଟଲ୍ କାର୍ଡ ମଧ୍ୟ ସ୍ୱର ସ୍ଥିର କରିଥିଲେ | ତାଙ୍କର ଟାଇଟଲ୍ କାର୍ଡ, ଏକ ଲୋଗୋ ସହିତ ଚିତ୍ରିତ ଚିତ୍ରଗୁଡ଼ିକ, ହାନ୍ନା-ବାରବେରାର ଆଇକନିକ୍ ଲୁକ୍ ବ୍ୟାଖ୍ୟା କରିବାରେ ସାହାଯ୍ୟ କଲା | କୁଇକ୍ ଡ୍ର ମ୍ୟାକ୍ଗ୍ରା ଏବଂ ଯୋଗୀ ଭାଲୁ ପରି ଚରିତ୍ରମାନଙ୍କ ପାଇଁ ଗୋବଲ୍ଙ୍କ କଳା କାରନାମା ଛୋଟ ଟିଭି ପରଦାରେ ପ୍ରଭାବଶାଳୀ ଥିଲା | କାର୍ଟୁନ୍ ରୁ ଏକ ସ୍ଥିର ପୁନ oduc ପ୍ରକାଶନ କରିବା ପରିବର୍ତ୍ତେ, ସେ ଏକକ, ଦୃ strong ଼ ଧାରଣା ଉପସ୍ଥାପନ କରିବା ଉପରେ ଧ୍ୟାନ ଦେଇଥିଲେ - ପ୍ରାୟତ sil ସିଲୁଇଟ୍ ରେ - ଯାହା ଏହାର ମହତ୍ତ୍ captured କୁ କାବୁ କରିଥିଲା | “ବୁଜିନ୍” ଭାଲୁରେ ଯୋଗୀ ଏକ ହେଲିକପ୍ଟରରେ ଗୁଜବ କରନ୍ତି। ସେ ବାଉନ୍ସ, ହାତରେ ପିକ-ଏ-ନିକ୍ ଟୋକେଇ, “ଭାଲୁ ଅନ୍ ପିକନିକ୍” ରେ ଏବଂ ତାଙ୍କର “ପୁରସ୍କାର ସଂଗ୍ରାମ ଭୟ” ପାଇଁ ଯୋଗୀ ଟାଇଟଲ୍ ଟେକ୍ସଟ୍ ବକ୍ସ କରନ୍ତି |
ନିର୍ଭର କରିବାକୁ ଅଳ୍ପ ବା କ mot ଣସି ଗତି ସହିତ, ଗୋବଲ୍ ର ଏକକ ଫ୍ରେମ୍ ଏକ ମନୋବଳ ସୃଷ୍ଟି କରିବାକୁ, ଦୃଶ୍ୟ ସ୍ଥିର କରିବାକୁ ଏବଂ ଏକ କାହାଣୀ ବର୍ଣ୍ଣନା କରିବାକୁ ପଡିଲା | ଫ୍ଲାଟ ରଙ୍ଗ, ଗ୍ରାଫିକ୍ ଆକୃତି ଏବଂ ଟାଇପୋଗ୍ରାଫି ବ୍ୟବହାର କରି ସେମାନେ ଏହା କରିଥିଲେ ଯାହା ବାରମ୍ବାର କଳକାରଖାନାରେ ସଂଯୁକ୍ତ ହୋଇଥିଲା |
ୱେବରେ କାମ କରୁଥିବା ଡିଜାଇନର୍ ଭାବରେ, ଟୁନ୍ ଟାଇଟଲ୍ ଆମକୁ ଏକ ବ୍ରାଣ୍ଡର ବ୍ୟକ୍ତିତ୍ୱ କିପରି ପହଞ୍ଚାଇବ, ପ୍ରଥମ ଭାବନା ସୃଷ୍ଟି କରିବ, ଏବଂ ଏକ ଉତ୍ପାଦ କିମ୍ବା ୱେବସାଇଟ୍ ବ୍ୟବହାର କରି କାହାର ଅଭିଜ୍ଞତା ପାଇଁ ଆଶା ସ୍ଥିର କରିପାରିବ | ପ୍ରଭାବଶାଳୀ ବ୍ୟାନର, ଲ୍ୟାଣ୍ଡିଂ-ପେଜ୍ ହେଡର୍, ଏବଂ ଭଲ ଓଲ୍ ଫ୍ୟାଶନ୍ ସ୍ପ୍ଲାସ୍ ସ୍କ୍ରିନ୍ ତିଆରି କରିବାକୁ ଆମେ କଳାକାରମାନଙ୍କ କ ques ଶଳରୁ ଶିଖିପାରିବା | ଟୁନ୍ ଟାଇଟଲ୍ ଟାଇପୋଗ୍ରାଫି | କାର୍ଟୁନ୍ ଟାଇଟଲ୍ କାର୍ଡ ଦର୍ଶାଏ ଯେ ଚିତ୍ର ସହିତ ମିଶ୍ରଣ ପ୍ରକାର କିପରି ଏକ ହେଡର୍ କିମ୍ବା ହିରୋ ଆବଶ୍ୟକ କରେ | ହାତଗଣତି ପାଠ୍ୟ-ଛାୟା, ପାଠ୍ୟ-ଷ୍ଟ୍ରୋକ, ଏବଂ ରୂପାନ୍ତର କ icks ଶଳ ସହିତ, ଆଧୁନିକ CSS ଆପଣଙ୍କୁ ସେହି ସମାନ ଶକ୍ତିରେ ଟ୍ୟାପ୍ କରିବାକୁ ଦିଏ |
ଟୁନ୍ ଟେକ୍ସଟ୍ ଟାଇଟଲ୍ ଜେନେରେଟର | ଏହି ଆର୍ଟିକିଲ୍ ଲେଖିବା ଦ୍ Part ାରା, ମୁଁ ଅନୁଭବ କଲି ଯେ କାର୍ଟୁନ୍ ଟାଇଟଲ୍ ପରି ଷ୍ଟାଇଲ୍ ହୋଇଥିବା ଟେକ୍ସଟ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏକ ସାଧନ ରହିବା ଉପଯୋଗୀ ହେବ | ତେଣୁ ମୁଁ ଗୋଟିଏ ତିଆରି କଲି | ମୋ ଟୁନ୍ ଟେକ୍ସଟ୍ ଟାଇଟଲ୍ ଜେନେରେଟର ଆପଣଙ୍କୁ ରଙ୍ଗ, ଷ୍ଟ୍ରୋକ ଏବଂ ଏକାଧିକ ଟେକ୍ସଟ୍ ଛାୟା ସହିତ ପରୀକ୍ଷା କରିବାକୁ ଦିଏ | ଆପଣ ପେଣ୍ଟ୍ କ୍ରମ ଆଡଜଷ୍ଟ୍ କରିପାରିବେ, ଅକ୍ଷର ବ୍ୟବଧାନ ପ୍ରୟୋଗ କରିପାରିବେ, ନମୁନା ଫଣ୍ଟଗୁଡିକର ଚୟନରେ ଆପଣଙ୍କର ପାଠ୍ୟ ପୂର୍ବାବଲୋକନ କରିପାରିବେ, ଏବଂ ତାପରେ ଏକ ପ୍ରୋଜେକ୍ଟରେ ବ୍ୟବହାର କରିବାକୁ ନିର୍ମିତ CSS କୁ ସିଧା ଆପଣଙ୍କ କ୍ଲିପବୋର୍ଡରେ କପି କରିପାରିବେ | ଟୁନ୍ ଟାଇଟଲ୍ CSS | ଟୁନ୍ ଟେକ୍ସଟ୍ ଟାଇଟଲ୍ ଜେନେରେଟର ଆପଣଙ୍କୁ ପ୍ରଦାନ କରୁଥିବା CSS କୁ ଆପଣ କେବଳ କପି-ଲେପନ କରିପାରିବେ | କିନ୍ତୁ ଏହା କଣ କରେ ତାହା ଦେଖିବା | ପାଠ୍ୟ ଛାୟା | ଅଗି ଡଗିଙ୍କ ଏପିସୋଡ୍ “ୟୁକ୍-ୟୁକ୍ ଡକ୍” ରୁ ଏହାର ଟାଇଟଲ୍ ପ୍ରକାରକୁ ଦେଖନ୍ତୁ, ଏହାର ହଳଦିଆ ହଳଦିଆ ଅକ୍ଷର ଏବଂ ଗା dark ଼, କଠିନ, ଅଫସେଟ୍ ଛାୟା ଯାହା ଏହାକୁ ପୃଷ୍ଠଭୂମିରୁ ଉଠାଇଥାଏ ଏବଂ ଗଭୀରତାର ଭ୍ରମ ସୃଷ୍ଟି କରେ |
ଆପଣ ବୋଧହୁଏ ଆଗରୁ ଜାଣିଛନ୍ତି ଯେ ପାଠ୍ୟ-ଛାୟା ଚାରୋଟି ମୂଲ୍ୟ ଗ୍ରହଣ କରେ: (1) ଭୂସମାନ୍ତର ଏବଂ (2) ଭୂଲମ୍ବ ଅଫସେଟ୍, (3) ଅସ୍ପଷ୍ଟ, ଏବଂ (4) ଏକ ରଙ୍ଗ ଯାହା ଦୃ solid କିମ୍ବା ଅର୍ଦ୍ଧ-ସ୍ୱଚ୍ଛ ହୋଇପାରେ | ସେହି ଅଫସେଟ୍ ମୂଲ୍ୟଗୁଡ଼ିକ ସକରାତ୍ମକ କିମ୍ବା ନକାରାତ୍ମକ ହୋଇପାରେ, ତେଣୁ ମୁଁ ଟାଣାଯାଇଥିବା ଏବଂ ଡାହାଣକୁ ଏକ କଠିନ ଛାୟା ବ୍ୟବହାର କରି “ୟୁକ୍-ୟୁକ୍ ଡକ୍” କୁ ନକଲ କରିପାରିବି: ରଙ୍ଗ: # f7f76d; ପାଠ୍ୟ-ଛାୟା: 5px 5px 0 # 1e1904;
ଅନ୍ୟ ପଟେ, ଏହି “ପିଣ୍ଟ୍ ଜଏଣ୍ଟ୍” ଟାଇଟଲ୍ ଏହାର ନକାରାତ୍ମକ ଅର୍ଦ୍ଧ-କୋମଳ ଛାୟା ସହିତ ଏକ ଭିନ୍ନ ଅନୁଭବ କରେ: ରଙ୍ଗ: # c2a872; ପାଠ୍ୟ-ଛାୟା: -7px 5px 0 # b100e, 0 -5px 10px # 546c6f;
ଅତିରିକ୍ତ ଗଭୀରତା ଯୋଡିବା ଏବଂ ଅଧିକ ଆକର୍ଷଣୀୟ ପ୍ରଭାବ ସୃଷ୍ଟି କରିବାକୁ, ମୁଁ ଏକାଧିକ ଛାୟା ସ୍ତର କରିପାରେ | “ଚାଲ ଡକ୍ ଆଉଟ୍” ପାଇଁ, ମୁଁ ଚାରୋଟି ଛାୟାକୁ ଏକତ୍ର କରେ: ପ୍ରଥମଟି ଏକ ଦୃ solid ଛାୟା, ଏକ ନକାରାତ୍ମକ ଭୂସମାନ୍ତର ଅଫସେଟ୍ ସହିତ ପାଠ୍ୟକୁ ପୃଷ୍ଠଭୂମିରୁ ଉଠାଇବା ପାଇଁ, ତା’ପରେ ଧୀରେ ଧୀରେ ନରମ ଛାୟା ଦ୍ୱାରା ଏହାର ଚାରିପାଖରେ ଏକ ଅସ୍ପଷ୍ଟତା ସୃଷ୍ଟି କରେ: ରଙ୍ଗ: # 6F4D80; ପାଠ୍ୟ-ଛାୟା: -5px5px 0 # 260e1e, / * ଛାୟା 1 * / 0 0 15px # e9ce96, / * ଛାୟା 2 * / 0 0 30px # e9ce96, / * ଛାୟା 3 * / 0 0 30px # e9ce96; / * ଛାୟା 4 * /
ଏହି ଛାୟାଗୁଡିକ ଦର୍ଶାଏ ଯେ ପାଠ୍ୟ-ଛାୟା ବ୍ୟବହାର କରିବା କେବଳ ଆଲୋକ ପ୍ରଭାବ ସୃଷ୍ଟି କରିବା ନୁହେଁ, କାରଣ ସେମାନେ ମଧ୍ୟ ସାଜସଜ୍ଜା ଏବଂ ବ୍ୟକ୍ତିତ୍ୱ ଯୋଡିପାରନ୍ତି | ପାଠ୍ୟ ଷ୍ଟ୍ରୋକ | ଅନେକ କାର୍ଟୁନ୍ ଟାଇଟଲ୍ କାର୍ଡଗୁଡିକ ଏକ ବୋଲ୍ଡ ବାହ୍ୟରେଖା ସହିତ ଅକ୍ଷରଗୁଡିକ ବ feature ଶିଷ୍ଟ୍ୟ କରେ ଯାହା ସେମାନଙ୍କୁ ପୃଷ୍ଠଭୂମିରୁ ଅଲଗା କରିଥାଏ | ଟେକ୍ସଟ୍-ଷ୍ଟ୍ରୋକ ବ୍ୟବହାର କରି ମୁଁ ଏହି ପ୍ରଭାବ ସୃଷ୍ଟି କରିପାରିବି | ଦୀର୍ଘ ସମୟ ଧରି, ଏହି ସମ୍ପତ୍ତି କେବଳ -webkit- ଉପସର୍ଗ ମାଧ୍ୟମରେ ଉପଲବ୍ଧ ଥିଲା, କିନ୍ତୁ ଏହାର ଅର୍ଥ ହେଉଛି ଏହା ବର୍ତ୍ତମାନ ଆଧୁନିକ ବ୍ରାଉଜର୍ ଗୁଡିକରେ ସମର୍ଥିତ |
ଦୁଇଟି ଗୁଣ ପାଇଁ ଟେକ୍ସଟ୍-ଷ୍ଟ୍ରୋକ୍ ଏକ ଶୋର୍ଥାଣ୍ଡ୍ | ପ୍ରଥମ, ଟେକ୍ସଟ୍-ଷ୍ଟ୍ରୋକ-ଓସାର, ବ୍ୟକ୍ତିଗତ ଅକ୍ଷରର ଏକ ଚିତ୍ର ଆଙ୍କିଥିବାବେଳେ ଦ୍ୱିତୀୟଟି, ଟେକ୍ସଟ୍-ଷ୍ଟ୍ରୋକ-ରଙ୍ଗ ଏହାର ରଙ୍ଗକୁ ନିୟନ୍ତ୍ରଣ କରେ | “ଯାହା ଯାଏ ପପୁ” ପାଇଁ ମୁଁ ହଳଦିଆ ପାଠ୍ୟରେ 4px ନୀଳ ଷ୍ଟ୍ରୋକ ଯୋଡିଥିଲି: ରଙ୍ଗ: # eff0cd; -webkit-text-stroke: 4px # 7890b5; ପାଠ୍ୟ-ଷ୍ଟ୍ରୋକ: 4px # 7890b5;
ଷ୍ଟ୍ରୋକଗୁଡିକ ଛାୟା ସହିତ ମିଳିତ ହେଲେ ବିଶେଷ ଉପଯୋଗୀ ହୋଇପାରେ, ତେଣୁ “ବ owing ିବା, ବ owing ିବା, ଚାଲିଯିବା” ପାଇଁ, ମୁଁ ଏହି ତ୍ରି-ଦିଗ ବିଶିଷ୍ଟ ପାଠ୍ୟ ପ୍ରଭାବ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏକ ଅସ୍ପଷ୍ଟ 1px ଛାୟାରେ ଏକ ପତଳା 3px ଷ୍ଟ୍ରୋକ୍ ଯୋଡିଥିଲି: ରଙ୍ଗ: # fbb999; ପାଠ୍ୟ-ଛାୟା: 3px 5px 1px # 5160b1; -webkit-text-stroke: 3px # 984336; ପାଠ୍ୟ-ଷ୍ଟ୍ରୋକ: 3px # 984336;
ପେଣ୍ଟ୍ ଅର୍ଡର | ଟେକ୍ସଟ୍-ଷ୍ଟ୍ରୋକ ବ୍ୟବହାର କରିବା ସର୍ବଦା ଆଶା କରାଯାଉଥିବା ଫଳାଫଳ ସୃଷ୍ଟି କରେ ନାହିଁ, ବିଶେଷତ thin ପତଳା ଅକ୍ଷର ଏବଂ ମୋଟା ଷ୍ଟ୍ରୋକ ସହିତ, କାରଣ ଡିଫଲ୍ଟ ଭାବରେ ବ୍ରାଉଜର୍ ଫିଲ୍ ଉପରେ ଏକ ଷ୍ଟ୍ରୋକ ଆଙ୍କିଥାଏ | ଦୁ ly ଖର ବିଷୟ, CSS ତଥାପି ମୋତେ ଷ୍ଟ୍ରୋକ୍ ପ୍ଲେସମେଣ୍ଟ୍ ଆଡଜଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଏ ନାହିଁ ଯେପରି ମୁଁ ପ୍ରାୟତ S ସ୍କେଚ୍ ରେ କରେ | ତଥାପି, ପେଣ୍ଟ-ଅର୍ଡର ପ୍ରପର୍ଟିର ମୂଲ୍ୟ ଅଛି ଯାହା ମୋତେ ଷ୍ଟ୍ରୋକ୍ ପଛରେ ଭରିବା ପରିବର୍ତ୍ତେ ରଖିବା ପାଇଁ ଅନୁମତି ଦିଏ |
ପେଣ୍ଟ-ଅର୍ଡର: ଷ୍ଟ୍ରୋକ ପ୍ରଥମେ ଷ୍ଟ୍ରୋକକୁ ରଙ୍ଗ କରେ, ତା’ପରେ ଫିଲ୍, ଯେତେବେଳେ ପେଣ୍ଟ-ଅର୍ଡର: ଫିଲ୍ ବିପରୀତ କରେ: ରଙ୍ଗ: # fbb999; ପେଣ୍ଟ-ଅର୍ଡର: ପୁରଣ; ପାଠ୍ୟ-ଛାୟା: 3px 5px 1px # 5160b1; text-stroke-color: # 984336; text-stroke-width: 3px;
ଏକ ପ୍ରଭାବଶାଳୀ ଷ୍ଟ୍ରୋକ ଅକ୍ଷରଗୁଡ଼ିକୁ ପଠନୀୟ ରଖେ, ଓଜନ ଯୋଗ କରେ, ଏବଂ - ଯେତେବେଳେ ଛାୟା ଏବଂ ପେଣ୍ଟ କ୍ରମ ସହିତ ମିଳିତ ହୁଏ - ଫ୍ଲାଟ ପାଠ୍ୟକୁ ପ୍ରକୃତ ଉପସ୍ଥିତି ଦେଇଥାଏ | ପାଠ୍ୟ ଭିତରେ ପୃଷ୍ଠଭୂମି | ଅନେକ କାର୍ଟୁନ୍ ଟାଇଟଲ୍ କାର୍ଡଗୁଡ଼ିକ ଅକ୍ଷରରେ ଟେକ୍ସଚର୍, ଗ୍ରେଡିଏଣ୍ଟ୍ କିମ୍ବା ଚିତ୍ରିତ ବିବରଣୀ ଯୋଗ କରି ସମତଳ ରଙ୍ଗଠାରୁ ଅଧିକ | ବେଳେବେଳେ ତାହା ଏକ ଗଠନ, ଅନ୍ୟ ସମୟରେ ଏହା ଏକ ସୂକ୍ଷ୍ମ ଟୋନାଲ୍ ଶିଫ୍ଟ ସହିତ ଗ୍ରେଡିଏଣ୍ଟ୍ ହୋଇପାରେ | ୱେବରେ, ମୁଁ ଟେକ୍ସଟ୍ ପଛରେ ଏକ ବ୍ୟାକଗ୍ରାଉଣ୍ଡ୍ ଇମେଜ୍ କିମ୍ବା ଗ୍ରେଡିଏଣ୍ଟ୍ ବ୍ୟବହାର କରି, ଏବଂ ତା’ପରେ ଏହାକୁ ଅକ୍ଷରର ଆକାରରେ କ୍ଲିପ୍ କରି ଏହି ପ୍ରଭାବ ସୃଷ୍ଟି କରିପାରିବି | ଏହା ଏକତ୍ର କାର୍ଯ୍ୟ କରୁଥିବା ଦୁଇଟି ଗୁଣ ଉପରେ ନିର୍ଭର କରେ: ପୃଷ୍ଠଭୂମି-କ୍ଲିପ୍: ପାଠ୍ୟ ଏବଂ ପାଠ୍ୟ-ପୂର୍ଣ୍ଣ-ରଙ୍ଗ: ସ୍ୱଚ୍ଛ |
ପ୍ରଥମେ, ମୁଁ ପାଠ ପଛରେ ଏକ ପୃଷ୍ଠଭୂମି ପ୍ରୟୋଗ କରେ | ଏହା ଏକ ବିଟମ୍ୟାପ୍ କିମ୍ବା ଭେକ୍ଟର ଇମେଜ୍ କିମ୍ବା ଏକ CSS ଗ୍ରେଡିଏଣ୍ଟ୍ ହୋଇପାରେ | କୁଇକ୍ ଡ୍ର ମ୍ୟାକ୍ଗ୍ରୋ ଏପିସୋଡ୍ “ବାବା ବାଇଟ୍” ରୁ ଏହି ଉଦାହରଣ ପାଇଁ, ଟାଇଟଲ୍ ପାଠ୍ୟ ଅନ୍ଧକାରରୁ ଆଲୋକ ପର୍ଯ୍ୟନ୍ତ ଏକ ସୂକ୍ଷ୍ମ ଟପ୍ - ତଳ ଗ୍ରେଡିଏଣ୍ଟ୍ ଅନ୍ତର୍ଭୁକ୍ତ କରେ: ପୃଷ୍ଠଭୂମି: ର line ଖ୍ୟ-ଗ୍ରେଡିଏଣ୍ଟ୍ (0deg, # 667b6a, # 1d271a);
ପରବର୍ତ୍ତୀ ସମୟରେ, ମୁଁ ସେହି ପୃଷ୍ଠଭୂମିକୁ ଗ୍ଲାଇଫ୍ସକୁ କ୍ଲିପ୍ କରେ ଏବଂ ପାଠ୍ୟକୁ ସ୍ୱଚ୍ଛ କରେ ଯାହା ଦ୍ the ାରା ପୃଷ୍ଠଭୂମି ଦେଖାଏ: -webkit-background-clip: ପାଠ; -webkit-text-fill-color: ସ୍ୱଚ୍ଛ;
କେବଳ ସେହି ଦୁଇଟି ଧାଡି ସହିତ, ପୃଷ୍ଠଭୂମି ଆଉ ପାଠ ପଛରେ ଚିତ୍ରିତ ନୁହେଁ; ଏହା ପରିବର୍ତ୍ତେ, ଏହା ଭିତରେ ଚିତ୍ରିତ | ଷ୍ଟ୍ରୋକ ଏବଂ ଛାୟା ସହିତ ମିଳିତ ହେଲେ ଏହି କ que ଶଳ ବିଶେଷ ଭାବରେ ଭଲ କାମ କରେ | ଏକ କ୍ଲିପ୍ ହୋଇଥିବା ଗ୍ରେଡିଏଣ୍ଟ୍ ଅକ୍ଷରଗୁଡ଼ିକୁ ରଙ୍ଗ ଏବଂ ଗଠନ ସହିତ ପ୍ରଦାନ କରିଥାଏ, ଏକ ଷ୍ଟ୍ରୋକ ଏହାର ଧାରକୁ ତୀକ୍ଷ୍ଣ ରଖେ ଏବଂ ଏକ ଛାଇ ଏହାକୁ ପୃଷ୍ଠଭୂମିରୁ ଉଠାଇଥାଏ | ଏକତ୍ର, ସେମାନେ ଟିକିଏ CSS ଛଡା ଆଉ କିଛି ବ୍ୟବହାର କରି ହାତରେ ଚିତ୍ରିତ ଟାଇଟଲ୍ କାର୍ଡଗୁଡ଼ିକର ସ୍ତରୀୟ ଦୃଶ୍ୟ ସୃଷ୍ଟି କରନ୍ତି | ସବୁଥର ପରି, କ୍ଲିପ୍ ହୋଇଥିବା ପାଠ୍ୟକୁ ଯତ୍ନର ସହିତ ପରୀକ୍ଷା କରନ୍ତୁ, ଯେହେତୁ ବ୍ରାଉଜର୍ କ୍ୱିକ୍ସ ବେଳେବେଳେ ଛାଇ ଏବଂ ରେଣ୍ଡରିଂ ଉପରେ ପ୍ରଭାବ ପକାଇପାରେ | ବ୍ୟକ୍ତିଗତ ଅକ୍ଷରରେ ପାଠ୍ୟ ବିଭାଜନ | ବେଳେବେଳେ ମୁଁ ସମ୍ପୂର୍ଣ୍ଣ ଶବ୍ଦ କିମ୍ବା ହେଡିଙ୍ଗ୍ ଷ୍ଟାଇଲ୍ କରିବାକୁ ଚାହେଁ ନାହିଁ | ମୁଁ ବ୍ୟକ୍ତିଗତ ଅକ୍ଷର ଶ style ଳୀ କରିବାକୁ ଚାହୁଁଛି - ଏକ ଚରିତ୍ରକୁ ଜାଗାରେ ରଖିବା, ଗୋଟିଏ ଗ୍ଲାଇଫ୍ ଅତିରିକ୍ତ ଓଜନ ଦେବା, କିମ୍ବା ସ୍ letters ାଧୀନ ଭାବରେ କିଛି ଅକ୍ଷର ଆନିମେସନ୍ କରିବା | ସାଧା HTML ଏବଂ CSS ରେ, ତାହା କରିବାର କେବଳ ଗୋଟିଏ ନିର୍ଭରଯୋଗ୍ୟ ଉପାୟ ଅଛି: ପ୍ରତ୍ୟେକ ଚରିତ୍ରକୁ ନିଜସ୍ୱ ସ୍ପାନ୍ ଉପାଦାନରେ ଗୁଡ଼ାଇ ରଖନ୍ତୁ | ମୁଁ ତାହା ମାନୁଆଲୀ କରିପାରେ, କିନ୍ତୁ ତାହା ଭଗ୍ନ, ରକ୍ଷଣାବେକ୍ଷଣ କରିବା କଷ୍ଟକର, ଏବଂ କପି ପରିବର୍ତ୍ତନ ହେଲେ ଶୀଘ୍ର ଅଲଗା ହୋଇଯିବ | ଏହା ପରିବର୍ତ୍ତେ, ଯେତେବେଳେ ମୁଁ ପ୍ରତି ଅକ୍ଷର ନିୟନ୍ତ୍ରଣ ଆବଶ୍ୟକ କରେ, ମୁଁ splt.js ପରି ଏକ ପାଠ୍ୟ-ବିଭାଜନ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରେ (ଯଦିଓ ଅନ୍ୟାନ୍ୟ ସମାଧାନ ଉପଲବ୍ଧ) | ଏହା ଏକ ଟେକ୍ସଟ୍ ନୋଡ୍ ନେଇଥାଏ ଏବଂ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଶବ୍ଦ କିମ୍ବା ଅକ୍ଷର ଗୁଡ଼ାଏ, ମୋତେ ମାର୍କଅପ୍ ନକରି ମେସେଜ୍ ଏବଂ ଷ୍ଟାଇଲ୍ ପାଇଁ ଅତିରିକ୍ତ ହୁକ୍ ଦେଇଥାଏ | ଏହା ହେଉଛି ଏକ ପନ୍ଥା ଯାହା ମୋ HTML କୁ ପଠନୀୟ ଏବଂ ଅର୍ଥଗତ ରଖେ, ଯେତେବେଳେ ମୋତେ କ୍ଲାସିକ୍ କାର୍ଟୁନ୍ ଟାଇଟଲ୍ କାର୍ଡରେ ଦେଖୁଥିବା ଅସମାନ, ଚରିତ୍ରଗତ ଟାଇପୋଗ୍ରାଫି ସୃଷ୍ଟି କରିବାକୁ ମୋତେ ସୂକ୍ଷ୍ମ-ଶସ୍ୟ ନିୟନ୍ତ୍ରଣ ପ୍ରଦାନ କରେ | ତଥାପି, ଏହି ଉପାୟ ସହିତ ଆସିଥାଏ |ଆକ୍ସେସିବିଲିଟି ସଚେତନତା, ଯେହେତୁ ଅଧିକାଂଶ ସ୍କ୍ରିନ୍ ପାଠକ କ୍ରମରେ ପାଠ୍ୟ ନୋଡ୍ ପ read ନ୍ତି | ତେଣୁ ଏହା:
ହମ୍ ମିଠା ହମ୍ |
… ଆପଣ ଆଶା କରୁଥିବା ପରି ପ s ନ୍ତି: ହମ୍ ମିଠା ହମ୍ |
କିନ୍ତୁ ଏହା:
H | u | m |
… ବ୍ରାଉଜର୍ ଏବଂ ସ୍କ୍ରିନ୍ ରିଡର୍ ଉପରେ ନିର୍ଭର କରି ଭିନ୍ନ ଭାବରେ ବ୍ୟାଖ୍ୟା କରାଯାଇପାରେ | କେତେକ ଅକ୍ଷରଗୁଡ଼ିକୁ ଏକତ୍ର କରିବେ ଏବଂ ଶବ୍ଦଗୁଡ଼ିକୁ ସଠିକ୍ ଭାବରେ ପ read ିବେ | ଅନ୍ୟମାନେ ଅକ୍ଷର ମଧ୍ୟରେ ବିରାମ ଦେଇପାରନ୍ତି, ଯାହା ଏକ ଖରାପ ପରିସ୍ଥିତିରେ ପରି ଶବ୍ଦ ହୋଇପାରେ: “H…” “U…” “M…”
ଦୁ ly ଖର ବିଷୟ, କିଛି ବିଭାଜନ ସମାଧାନ ସବୁବେଳେ ଉପଲବ୍ଧ ଫଳାଫଳ ପ୍ରଦାନ କରେ ନାହିଁ, ତେଣୁ ମୁଁ ମୋର ନିଜ ଟେକ୍ସଟ୍ splitter, splinter.js ଲେଖିଛି, ଯାହା ବର୍ତ୍ତମାନ ବେଟା ରେ ଅଛି | ବ୍ୟକ୍ତିଗତ ଅକ୍ଷରଗୁଡ଼ିକର ରୂପାନ୍ତର | ମୋର ଟୁନ୍ ଟେକ୍ସଟ୍ ସ୍ପ୍ଲିଟରକୁ ସକ୍ରିୟ କରିବାକୁ, ମୁଁ ବିଭାଜନ କରିବାକୁ ଚାହୁଁଥିବା ଉପାଦାନରେ ଏକ ଡାଟା- ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡେ:
ହମ୍ ମିଠା ହମ୍ |
ପ୍ରଥମେ, ମୋ ସ୍କ୍ରିପ୍ଟ ପ୍ରତ୍ୟେକ ଶବ୍ଦକୁ ବ୍ୟକ୍ତିଗତ ଅକ୍ଷରରେ ପୃଥକ କରେ ଏବଂ ପ୍ରୟୋଗ ହୋଇଥିବା ଶ୍ରେଣୀ ଏବଂ ARIA ଗୁଣ ସହିତ ଏକ ସ୍ପାନ୍ ଉପାଦାନରେ ଗୁଡ଼ାଏ: | | |
ସ୍କ୍ରିପ୍ଟ ତାପରେ ବିଭାଜିତ ଉପାଦାନର ପ୍ରାରମ୍ଭିକ ବିଷୟବସ୍ତୁକୁ ନେଇଥାଏ ଏବଂ ଏହାକୁ ଆରିଆ ଗୁଣ ଭାବରେ ଯୋଗ କରିଥାଏ:
| | | |
ସେହି ଶ୍ରେଣୀ ଗୁଣଗୁଡିକ ପ୍ରୟୋଗ ସହିତ, ମୁଁ ତାପରେ ମୁଁ ବାଛିଥିବା ବ୍ୟକ୍ତିଗତ ବର୍ଣ୍ଣଗୁଡିକ ଶ style ଳୀ କରିପାରିବି |
ଉଦାହରଣ ସ୍ୱରୂପ, “ହମ୍ ମିଠା ହମ୍” ପାଇଁ, ମୁଁ ଏହାର ନକଲ କରିବାକୁ ଚାହୁଁଛି ଯେ ଏହାର ଅକ୍ଷରଗୁଡ଼ିକ କିପରି ବେସ୍ ଲାଇନ୍ ଠାରୁ ଦୂରେଇ ଯାଏ | ମୋର ଟୁନ୍ ଟେକ୍ସଟ୍ ସ୍ପ୍ଲିଟର ବ୍ୟବହାର କରିବା ପରେ, ମୁଁ ଅନେକ ବ୍ୟବହାର କରି ଚାରୋଟି ଭିନ୍ନ ଅନୁବାଦ ମୂଲ୍ୟ ପ୍ରୟୋଗ କଲି: ଏକ ଅର୍ଦ୍ଧ-ରାଣ୍ଡମ୍ ଲୁକ୍ ସୃଷ୍ଟି କରିବାକୁ nth-child ଚୟନକର୍ତ୍ତା: / * ଚତୁର୍ଥ, ଅଷ୍ଟମ, ଦ୍ୱାଦଶ ... * / .toon-char: nth-child (4n) {ଅନୁବାଦ: 0 -8px; } / * ପ୍ରଥମ, 5, 9 ... * / .toon-char: nth-child (4n + 1) {ଅନୁବାଦ: 0 -4px; } / * ଦ୍ୱିତୀୟ, ଷଷ୍ଠ, ଦଶମ ... * / .toon-char: nth-child (4n + 2) {ଅନୁବାଦ: 0 4px; } / * ତୃତୀୟ, ସପ୍ତମ, 11 ତମ ... * / .toon-char: nth-child (4n + 3) {ଅନୁବାଦ: 0 8px; }
କିନ୍ତୁ ଅନୁବାଦ ହେଉଛି କେବଳ ଗୋଟିଏ ଗୁଣ ଯାହା ମୁଁ ମୋର ଟୁନ୍ ଟେକ୍ସଟ୍ ରୂପାନ୍ତର କରିବାକୁ ବ୍ୟବହାର କରିପାରିବି |
ଅଧିକ ବିଶୃଙ୍ଖଳିତ ଦୃଶ୍ୟ ପାଇଁ ମୁଁ ସେହି ବ୍ୟକ୍ତିଗତ ଅକ୍ଷରଗୁଡ଼ିକୁ ମଧ୍ୟ ଘୂର୍ଣ୍ଣନ କରିପାରିବି: / * ଚତୁର୍ଥ, ଅଷ୍ଟମ, ଦ୍ୱାଦଶ ... * / .toon-line .toon-char: nth-child (4n) {ଘୂର୍ଣ୍ଣନ: -4deg; } / * ପ୍ରଥମ, 5, 9 ... * / .toon-char: nth-child (4n + 1) {ଘୂର୍ଣ୍ଣନ: -8deg; } / * ଦ୍ୱିତୀୟ, ଷଷ୍ଠ, ଦଶମ ... * / .toon-char: nth-child (4n + 2) {ଘୂର୍ଣ୍ଣନ: 4deg; } / * ତୃତୀୟ, ସପ୍ତମ, 11 ତମ ... * / .toon-char: nth-child (4n + 3) {ଘୂର୍ଣ୍ଣନ: 8deg; }
କିନ୍ତୁ ଅନୁବାଦ ହେଉଛି କେବଳ ଗୋଟିଏ ଗୁଣ ଯାହା ମୁଁ ମୋର ଟୁନ୍ ଟେକ୍ସଟ୍ ରୂପାନ୍ତର କରିବାକୁ ବ୍ୟବହାର କରିପାରିବି | ଅଧିକ ବିଶୃଙ୍ଖଳିତ ଦୃଶ୍ୟ ପାଇଁ ମୁଁ ସେହି ବ୍ୟକ୍ତିଗତ ଅକ୍ଷରଗୁଡ଼ିକୁ ମଧ୍ୟ ଘୂର୍ଣ୍ଣନ କରିପାରିବି: / * ଚତୁର୍ଥ, ଅଷ୍ଟମ, ଦ୍ୱାଦଶ ... * / .toon-line .toon-char: nth-child (4n) { ଘୂର୍ଣ୍ଣନ: -4deg; }
/ * ପ୍ରଥମ, 5, 9 ... * / .toon-char: nth-child (4n + 1) { ଘୂର୍ଣ୍ଣନ: -8deg; }
/ * ଦ୍ୱିତୀୟ, ଷଷ୍ଠ, ଦଶମ ... * / .toon-char: nth-child (4n + 2) { ଘୂର୍ଣ୍ଣନ: 4deg; }
/ * ତୃତୀୟ, ସପ୍ତମ, 11 ତମ ... * / .toon-char: nth-child (4n + 3) { ଘୂର୍ଣ୍ଣନ: 8deg; }
ଏବଂ, ଅବଶ୍ୟ, ମୁଁ ସେହି ଚରିତ୍ରଗୁଡ଼ିକୁ ଜିଗଲ୍ କରିବା ଏବଂ ମୋର ଟୁନ୍ ଟେକ୍ସଟ୍ ଷ୍ଟାଇଲ୍ ଟାଇଟଲ୍ଗୁଡ଼ିକୁ ଜୀବନ୍ତ କରିବା ପାଇଁ ଆନିମେସନ୍ ଯୋଡିପାରେ | ପ୍ରଥମେ, ମୁଁ ଏକ କୀ ଫ୍ରେମ୍ ଆନିମେସନ୍ ସୃଷ୍ଟି କଲି ଯାହା ଅକ୍ଷରଗୁଡ଼ିକୁ ଘୂର୍ଣ୍ଣନ କରେ:
@keyframes ଜିଗଲ୍ { 0%, 100% {ରୂପାନ୍ତର: ଘୂର୍ଣ୍ଣନ (var (- ଆଧାର-ଘୂର୍ଣ୍ଣନ, 0 ଡିଗ)); } 25% {ରୂପାନ୍ତର: ଘୂର୍ଣ୍ଣନ (କାଲ୍କ (var (- ଆଧାର-ଘୂର୍ଣ୍ଣନ, 0 ଡିଗ) + 3 ଡିଗ)); } 50% {ରୂପାନ୍ତର: ଘୂର୍ଣ୍ଣନ (କାଲ୍କ (var (- ଆଧାର-ଘୂର୍ଣ୍ଣନ, 0 ଡିଗ) - 2 ଡିଗ)); } 75% {ରୂପାନ୍ତର: ଘୂର୍ଣ୍ଣନ (କାଲ୍କ (var (- ଆଧାର-ଘୂର୍ଣ୍ଣନ, 0 ଡିଗ) + 1 ଡିଗ)); } }
ମୋ ଟୁନ୍ ଟେକ୍ସଟ୍ ସ୍ପ୍ଲିଟର ଦ୍ୱାରା ସୃଷ୍ଟି ହୋଇଥିବା ସ୍ପାନ୍ ଉପାଦାନଗୁଡ଼ିକରେ ଏହାକୁ ପ୍ରୟୋଗ କରିବା ପୂର୍ବରୁ: .toon-char { ଆନିମେସନ୍: ଜିଗ୍ 3s ଅସୀମ ସହଜ-ଇନ୍-ଆଉଟ୍; ରୂପାନ୍ତର-ଉତ୍ପତ୍ତି: କେନ୍ଦ୍ର ତଳ; }
ଏବଂ ଶେଷରେ, ଘୂର୍ଣ୍ଣନ ପରିମାଣ ଏବଂ ପ୍ରତ୍ୟେକ ଅକ୍ଷର ଜିଗଲ୍ ହେବା ପୂର୍ବରୁ ଏକ ବିଳମ୍ବ ସେଟିଂ: .toon-char: nth-child (4n) {- ଆଧାର-ଘୂର୍ଣ୍ଣନ: -2deg; } .toon-char: nth-child (4n + 1) {- ଆଧାର-ଘୂର୍ଣ୍ଣନ: -4deg; } .toon-char: nth-child (4n + 2) {- ଆଧାର-ଘୂର୍ଣ୍ଣନ: 2deg; } .toon-char: nth-child (4n + 3) {- ଆଧାର-ଘୂର୍ଣ୍ଣନ: 4deg; }
.toon-char: nth-child (4n) {ଆନିମେସନ୍-ବିଳମ୍ବ: 0.1s; } .toon-char: nth-child (4n + 1) {ଆନିମେସନ୍-ବିଳମ୍ବ: 0.3s; } .toon-char: nth-child (4n + 2) {ଆନିମେସନ୍-ବିଳମ୍ବ: 0.5s; } .toon-char: nth-child (4n + 3) {ଆନିମେସନ୍-ବିଳମ୍ବ: 0.7s; }
ଏକ ଇମ୍ପ୍ରେସନ୍ କରିବାକୁ ଗୋଟିଏ ଫ୍ରେମ୍ | କାର୍ଟୁନ୍ ଟାଇଟଲ୍ କଳାକାରମାନଙ୍କର ଏକ ଛାପ ସୃଷ୍ଟି କରିବାକୁ ଗୋଟିଏ ଫ୍ରେମ୍ ଥିଲା, ଏବଂ ସେମାନଙ୍କର ଟାଇପୋଗ୍ରାଫି ସେମାନେ ଚିତ୍ର କରିଥିବା ଚିତ୍ରକଳା ପରି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ | ୱେବରେ ମଧ୍ୟ ସମାନ | ଏକ ସୁସଜ୍ଜିତ ହେଡର୍ ବା ହିରୋ |କ୍ଷେତ୍ର ସ୍ୱଚ୍ଛତା, ଚରିତ୍ର, ଏବଂ ଆତ୍ମବିଶ୍ୱାସ ଆବଶ୍ୟକ କରେ - କେବଳ ଏକ ଦୁର୍ବଳ ପୂର୍ଣ୍ଣ-ଓସାର ପୃଷ୍ଠଭୂମି ପ୍ରତିଛବି ନୁହେଁ | କିଛି ଯତ୍ନର ସହିତ ମନୋନୀତ CSS ଗୁଣ ସହିତ - ଛାୟା, ଷ୍ଟ୍ରୋକ, କ୍ଲିପ୍ ପୃଷ୍ଠଭୂମି, ଏବଂ କିଛି ପ୍ରତିବନ୍ଧିତ ଆନିମେସନ୍ - ଆମେ ସେହି ସମାନ ପ୍ରଭାବ ସୃଷ୍ଟି କରିପାରିବା | ମୁଁ ଟୁନ୍ ପାଠ୍ୟକୁ ଭଲ ପାଏ କାରଣ ମୁଁ ନଷ୍ଟଲଜିକ୍ ନୁହେଁ, କିନ୍ତୁ ଏହାର ଡିଜାଇନ୍ ଉଦ୍ଦେଶ୍ୟମୂଳକ ଅଟେ | ସୁଚିନ୍ତିତ ପସନ୍ଦ କରନ୍ତୁ, ଏବଂ ଟିକିଏ ଟୁନ୍ ଟେକ୍ସଟୋଗ୍ରାଫି ଆପଣଙ୍କ ଡିଜାଇନ୍ରେ ଖୁଞ୍ଚ ଯୋଡିବାକୁ ଦିଅନ୍ତୁ |
