CSS ಮತ್ತು SVG ಅನಿಮೇಷನ್ಗಳ ಬಗ್ಗೆ ನಾನು ಎಲ್ಲವನ್ನೂ ಕಲಿಯಲು ಅಗತ್ಯವಿರುವ ಯೋಜನೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನಾನು ಈ ಸರಣಿಯನ್ನು ಸ್ಮಾಶಿಂಗ್ ಅನಿಮೇಷನ್ಗಳು ಮತ್ತು "ಹೌ ಕ್ಲಾಸಿಕ್ ಕಾರ್ಟೂನ್ಗಳು ಆಧುನಿಕ CSS ಅನ್ನು ಹೇಗೆ ಪ್ರೇರೇಪಿಸುತ್ತದೆ" ಎಂದು ಬರೆಯಲು ಪ್ರಾರಂಭಿಸಿದೆ. ಈ ವರ್ಷವನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು, ಟೂನ್ ಶೀರ್ಷಿಕೆಗಳನ್ನು ತುಂಬಾ ಪ್ರಭಾವಶಾಲಿಯಾಗಿ ಮಾಡುವ ಅಂಶವನ್ನು ರಚಿಸಲು ಆಧುನಿಕ CSS ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ನಾನು ನಿಮಗೆ ತೋರಿಸಲು ಬಯಸುತ್ತೇನೆ: ಅವುಗಳ ಮುದ್ರಣಕಲೆ. ಶೀರ್ಷಿಕೆ ಕಲಾಕೃತಿ ವಿನ್ಯಾಸ 1920 ರ ದಶಕ ಮತ್ತು 30 ರ ದಶಕದ ಆರಂಭದಲ್ಲಿ, ಚಲನಚಿತ್ರದ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ನ ಮುದ್ರಣಕಲೆಯು ಒಂದು ಮನಸ್ಥಿತಿಯನ್ನು ಸೃಷ್ಟಿಸಿತು, ದೃಶ್ಯವನ್ನು ಹೊಂದಿಸಿತು ಮತ್ತು ಪ್ರೇಕ್ಷಕರಿಗೆ ಅವರು ನೋಡಲು ಪಾವತಿಸಿದ ಚಲನಚಿತ್ರದ ಪ್ರಕಾರವನ್ನು ನೆನಪಿಸಿತು.
ಕಾರ್ಟೂನ್ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ಗಳು ಬ್ರ್ಯಾಂಡಿಂಗ್, ಮೂಡ್ ಮತ್ತು ದೃಶ್ಯ-ಸೆಟ್ಟಿಂಗ್ ಕೂಡ ಆಗಿದ್ದವು, ಎಲ್ಲವನ್ನೂ ಒಂದಾಗಿ ಸುತ್ತಿಕೊಳ್ಳಲಾಯಿತು. ಆರಂಭಿಕ ವರ್ಷಗಳಲ್ಲಿ, ಪ್ರಮುಖ ಸ್ಟುಡಿಯೋ ಬಜೆಟ್ಗಳು ದೊಡ್ಡದಾಗಿದ್ದಾಗ, ಈ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ವಿವರಣಾತ್ಮಕ ಮತ್ತು ವರ್ಣಚಿತ್ರಗಳಾಗಿದ್ದವು.
ಆದರೆ 1950 ರ ದಶಕದಲ್ಲಿ ಟೆಲಿವಿಷನ್ ಪ್ರವರ್ಧಮಾನಕ್ಕೆ ಬಂದಾಗ, ಬಜೆಟ್ ಕಡಿಮೆಯಾಯಿತು ಮತ್ತು ಲಾರೆನ್ಸ್ "ಆರ್ಟ್" ಗೋಬಲ್ ಅವರಂತಹ ಕಲಾವಿದರು ವಿನ್ಯಾಸಗೊಳಿಸಿದ ಕಾರ್ಡ್ಗಳು ಹೊಸ ದೃಶ್ಯ ಭಾಷೆಯನ್ನು ಅಳವಡಿಸಿಕೊಂಡವು, ಹೆಚ್ಚು ಗ್ರಾಫಿಕ್, ಶೈಲೀಕೃತ ಮತ್ತು ಕಡಿಮೆ ಸಂಕೀರ್ಣವಾದವು. ಗಮನಿಸಿ: ಲಾರೆನ್ಸ್ "ಆರ್ಟ್" ಗೋಬಲ್ ಮಧ್ಯ-ಶತಮಾನದ ಅಮೇರಿಕನ್ ಅನಿಮೇಷನ್ನ ಸಾಮಾನ್ಯವಾಗಿ ಕಡೆಗಣಿಸಲ್ಪಟ್ಟ ನಾಯಕರಲ್ಲಿ ಒಬ್ಬರು. ಅವರು ಪ್ರಾಥಮಿಕವಾಗಿ 1950 ಮತ್ತು 1960 ರ ದಶಕದ ಅತ್ಯಂತ ಪ್ರಭಾವಶಾಲಿ ವರ್ಷಗಳಲ್ಲಿ ಹನ್ನಾ-ಬಾರ್ಬೆರಾಗಾಗಿ ಕೆಲಸ ಮಾಡಿದರು. ಗೋಬಲ್ ಪಾತ್ರದ ಆನಿಮೇಟರ್ ಆಗಿರಲಿಲ್ಲ. ವಾತಾವರಣವನ್ನು ಸೃಷ್ಟಿಸುವುದು ಅವರ ಪಾತ್ರವಾಗಿತ್ತು, ಆದ್ದರಿಂದ ಅವರು ದಿ ಫ್ಲಿಂಟ್ಸ್ಟೋನ್ಸ್, ಹಕಲ್ಬೆರಿ ಹೌಂಡ್, ಕ್ವಿಕ್ ಡ್ರಾ ಮೆಕ್ಗ್ರಾ ಮತ್ತು ಯೋಗಿ ಬೇರ್ಗಾಗಿ ಪರಿಸರವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿದರು, ಜೊತೆಗೆ ಧ್ವನಿಯನ್ನು ಹೊಂದಿಸುವ ಆರಂಭಿಕ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿದರು. ಅವರ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ಗಳು, ಲೋಗೋ ಓವರ್ಲೇಡ್ನೊಂದಿಗೆ ವರ್ಣಚಿತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿದ್ದು, ಹಾನ್ನಾ-ಬಾರ್ಬೆರಾ ಅವರ ಸಾಂಪ್ರದಾಯಿಕ ನೋಟವನ್ನು ವಿವರಿಸಲು ಸಹಾಯ ಮಾಡಿತು. ಕ್ವಿಕ್ ಡ್ರಾ ಮ್ಯಾಕ್ಗ್ರಾ ಮತ್ತು ಯೋಗಿ ಬೇರ್ನಂತಹ ಪಾತ್ರಗಳಿಗಾಗಿ ಗೋಬಲ್ ಅವರ ಕಲಾಕೃತಿಯು ಚಿಕ್ಕ ಟಿವಿ ಪರದೆಗಳಲ್ಲಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿತ್ತು. ಕಾರ್ಟೂನ್ನಿಂದ ಸ್ಟಿಲ್ ಅನ್ನು ಪುನರುತ್ಪಾದಿಸುವ ಬದಲು, ಅವರು ಒಂದೇ, ಬಲವಾದ ಕಲ್ಪನೆಯನ್ನು - ಆಗಾಗ್ಗೆ ಸಿಲೂಯೆಟ್ನಲ್ಲಿ - ಅದರ ಸಾರವನ್ನು ಸೆರೆಹಿಡಿಯುವಲ್ಲಿ ಗಮನಹರಿಸಿದರು. "ದಿ ಬಝಿನ್ ಬೇರ್" ನಲ್ಲಿ ಯೋಗಿ ಹೆಲಿಕಾಪ್ಟರ್ನಲ್ಲಿ ಝೇಂಕರಿಸುತ್ತಿದ್ದಾರೆ. ಅವರು "ಬೇರ್ ಆನ್ ಎ ಪಿಕ್ನಿಕ್" ನಲ್ಲಿ ಪಿಕ್-ಎ-ನಿಕ್ ಬ್ಯಾಸ್ಕೆಟ್ ಅನ್ನು ಕೈಯಲ್ಲಿ ಹಿಡಿದುಕೊಂಡು ಪುಟಿಯುತ್ತಾರೆ ಮತ್ತು ಅವರ "ಪ್ರೈಜ್ ಫೈಟ್ ಫೈಟ್" ಗಾಗಿ ಯೋಗಿ ಶೀರ್ಷಿಕೆ ಪಠ್ಯವನ್ನು ಬಾಕ್ಸ್ ಮಾಡಿದ್ದಾರೆ.
ಅವಲಂಬಿಸಲು ಕಡಿಮೆ ಅಥವಾ ಯಾವುದೇ ಚಲನೆಯಿಲ್ಲದೆ, ಗೋಬಲ್ನ ಏಕ ಚೌಕಟ್ಟುಗಳು ಮನಸ್ಥಿತಿಯನ್ನು ಸೃಷ್ಟಿಸಬೇಕು, ದೃಶ್ಯವನ್ನು ಹೊಂದಿಸಬೇಕು ಮತ್ತು ಕಥೆಯನ್ನು ವಿವರಿಸಬೇಕು. ಅವರು ಇದನ್ನು ಸಮತಟ್ಟಾದ ಬಣ್ಣಗಳು, ಗ್ರಾಫಿಕ್ ಆಕಾರಗಳು ಮತ್ತು ಕಲಾಕೃತಿಯಲ್ಲಿ ಆಗಾಗ್ಗೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟ ಮುದ್ರಣಕಲೆಗಳನ್ನು ಬಳಸಿ ಮಾಡಿದರು.
ವೆಬ್ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವ ವಿನ್ಯಾಸಕರಾಗಿ, ಬ್ರ್ಯಾಂಡ್ನ ವ್ಯಕ್ತಿತ್ವವನ್ನು ಹೇಗೆ ತಿಳಿಸುವುದು, ಮೊದಲ ಪ್ರಭಾವ ಬೀರುವುದು ಮತ್ತು ಉತ್ಪನ್ನ ಅಥವಾ ವೆಬ್ಸೈಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಯಾರೊಬ್ಬರ ಅನುಭವಕ್ಕಾಗಿ ನಿರೀಕ್ಷೆಗಳನ್ನು ಹೊಂದಿಸುವುದು ಹೇಗೆ ಎಂಬುದರ ಕುರಿತು ಟೂನ್ ಶೀರ್ಷಿಕೆಗಳು ನಮಗೆ ಸಾಕಷ್ಟು ಕಲಿಸಬಹುದು. ಪರಿಣಾಮಕಾರಿ ಬ್ಯಾನರ್ಗಳು, ಲ್ಯಾಂಡಿಂಗ್-ಪೇಜ್ ಹೆಡರ್ಗಳು ಮತ್ತು ಉತ್ತಮ ಓಲ್ ಫ್ಯಾಶನ್ ಸ್ಪ್ಲಾಶ್ ಸ್ಕ್ರೀನ್ಗಳನ್ನು ರಚಿಸಲು ಕಲಾವಿದರ ತಂತ್ರಗಳಿಂದ ನಾವು ಕಲಿಯಬಹುದು. ಟೂನ್ ಶೀರ್ಷಿಕೆ ಮುದ್ರಣಕಲೆ ಚಿತ್ರಣದೊಂದಿಗೆ ಪ್ರಕಾರವನ್ನು ವಿಲೀನಗೊಳಿಸುವುದು ಹೆಡರ್ ಅಥವಾ ನಾಯಕನಿಗೆ ಅಗತ್ಯವಿರುವ ಪಂಚ್ ಅನ್ನು ಹೇಗೆ ನೀಡುತ್ತದೆ ಎಂಬುದನ್ನು ಕಾರ್ಟೂನ್ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ಗಳು ತೋರಿಸುತ್ತವೆ. ಬೆರಳೆಣಿಕೆಯಷ್ಟು ಪಠ್ಯ-ನೆರಳು, ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್ ಮತ್ತು ರೂಪಾಂತರ ತಂತ್ರಗಳೊಂದಿಗೆ, ಆಧುನಿಕ CSS ನಿಮಗೆ ಅದೇ ಶಕ್ತಿಯನ್ನು ಸ್ಪರ್ಶಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
ಟೂನ್ ಪಠ್ಯ ಶೀರ್ಷಿಕೆ ಜನರೇಟರ್ ಈ ಲೇಖನವನ್ನು ಬರೆಯುವ ಮೂಲಕ ಭಾಗಶಃ, ನಾನು ತುಂಬಾ ಇಷ್ಟಪಡುವ ಕಾರ್ಟೂನ್ ಶೀರ್ಷಿಕೆಗಳಂತೆ ಪಠ್ಯವನ್ನು ರಚಿಸುವ ಸಾಧನವನ್ನು ಹೊಂದಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ ಎಂದು ನಾನು ಅರಿತುಕೊಂಡೆ. ಹಾಗಾಗಿ ನಾನು ಒಂದನ್ನು ಮಾಡಿದ್ದೇನೆ. ಮೈ ಟೂನ್ ಪಠ್ಯ ಶೀರ್ಷಿಕೆ ಜನರೇಟರ್ ಬಣ್ಣಗಳು, ಸ್ಟ್ರೋಕ್ಗಳು ಮತ್ತು ಬಹು ಪಠ್ಯ ನೆರಳುಗಳನ್ನು ಪ್ರಯೋಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನೀವು ಪೇಂಟ್ ಆರ್ಡರ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು, ಅಕ್ಷರದ ಅಂತರವನ್ನು ಅನ್ವಯಿಸಬಹುದು, ಮಾದರಿ ಫಾಂಟ್ಗಳ ಆಯ್ಕೆಯಲ್ಲಿ ನಿಮ್ಮ ಪಠ್ಯವನ್ನು ಪೂರ್ವವೀಕ್ಷಣೆ ಮಾಡಬಹುದು ಮತ್ತು ನಂತರ ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ ಬಳಸಲು ನಿಮ್ಮ ಕ್ಲಿಪ್ಬೋರ್ಡ್ಗೆ ರಚಿಸಿದ CSS ಅನ್ನು ನೇರವಾಗಿ ನಕಲಿಸಬಹುದು. ಟೂನ್ ಶೀರ್ಷಿಕೆ CSS ಟೂನ್ ಪಠ್ಯ ಶೀರ್ಷಿಕೆ ಜನರೇಟರ್ ನಿಮಗೆ ಒದಗಿಸುವ CSS ಅನ್ನು ನೀವು ಕಾಪಿ-ಪೇಸ್ಟ್ ಮಾಡಬಹುದು. ಆದರೆ ಅದು ಏನು ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ಹತ್ತಿರದಿಂದ ನೋಡೋಣ. ಪಠ್ಯ ನೆರಳು ಆಗೀ ಡಾಗ್ಗೀ ಅವರ ಸಂಚಿಕೆ "ಯುಕ್-ಯುಕ್ ಡಕ್" ನಿಂದ ಈ ಶೀರ್ಷಿಕೆಯ ಪ್ರಕಾರವನ್ನು ನೋಡಿ, ಅದರ ಮಸುಕಾದ ಹಳದಿ ಅಕ್ಷರಗಳು ಮತ್ತು ಗಾಢವಾದ, ಗಟ್ಟಿಯಾದ, ಆಫ್ಸೆಟ್ ನೆರಳು ಅದನ್ನು ಹಿನ್ನೆಲೆಯಿಂದ ಎತ್ತುವ ಮತ್ತು ಆಳದ ಭ್ರಮೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
ಪಠ್ಯ-ನೆರಳು ನಾಲ್ಕು ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಎಂದು ನಿಮಗೆ ಈಗಾಗಲೇ ತಿಳಿದಿರಬಹುದು: (1) ಅಡ್ಡ ಮತ್ತು (2) ಲಂಬವಾದ ಆಫ್ಸೆಟ್ಗಳು, (3) ಮಸುಕು, ಮತ್ತು (4) ಘನ ಅಥವಾ ಅರೆ-ಪಾರದರ್ಶಕ ಬಣ್ಣ. ಆ ಆಫ್ಸೆಟ್ ಮೌಲ್ಯಗಳು ಧನಾತ್ಮಕ ಅಥವಾ ಋಣಾತ್ಮಕವಾಗಿರಬಹುದು, ಆದ್ದರಿಂದ ನಾನು "ಯುಕ್-ಯುಕ್ ಡಕ್" ಅನ್ನು ಕೆಳಗೆ ಮತ್ತು ಬಲಕ್ಕೆ ಎಳೆದ ಗಟ್ಟಿಯಾದ ನೆರಳು ಬಳಸಿ ಪುನರಾವರ್ತಿಸಬಹುದು: ಬಣ್ಣ: #f7f76d; ಪಠ್ಯ-ನೆರಳು: 5px 5px 0 #1e1904;
ಮತ್ತೊಂದೆಡೆ, ಈ "ಪಿಂಟ್ ಜೈಂಟ್" ಶೀರ್ಷಿಕೆಯು ಅದರ ನಕಾರಾತ್ಮಕ ಅರೆ-ಮೃದುವಾದ ನೆರಳಿನೊಂದಿಗೆ ವಿಭಿನ್ನ ಭಾವನೆಯನ್ನು ಹೊಂದಿದೆ: ಬಣ್ಣ: #c2a872; ಪಠ್ಯ ನೆರಳು: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
ಹೆಚ್ಚುವರಿ ಆಳವನ್ನು ಸೇರಿಸಲು ಮತ್ತು ಹೆಚ್ಚು ಆಸಕ್ತಿದಾಯಕ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು, ನಾನು ಬಹು ನೆರಳುಗಳನ್ನು ಲೇಯರ್ ಮಾಡಬಹುದು. "ಲೆಟ್ಸ್ ಡಕ್ ಔಟ್" ಗಾಗಿ, ನಾನು ನಾಲ್ಕು ನೆರಳುಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತೇನೆ: ಮೊದಲನೆಯದು ಋಣಾತ್ಮಕ ಸಮತಲ ಆಫ್ಸೆಟ್ನೊಂದಿಗೆ ಪಠ್ಯವನ್ನು ಹಿನ್ನೆಲೆಯಿಂದ ಮೇಲಕ್ಕೆತ್ತಲು ಘನ ನೆರಳು, ನಂತರ ಕ್ರಮೇಣ ಮೃದುವಾದ ನೆರಳುಗಳು ಅದರ ಸುತ್ತಲೂ ಅಸ್ಪಷ್ಟತೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತವೆ: ಬಣ್ಣ: #6F4D80; ಪಠ್ಯ ನೆರಳು: -5px5px 0 #260e1e, /* ನೆರಳು 1 */ 0 0 15px #e9ce96, /* ನೆರಳು 2 */ 0 0 30px #e9ce96, /* ನೆರಳು 3 */ 0 0 30px #e9ce96; /* ನೆರಳು 4 */
ಈ ನೆರಳುಗಳು ಪಠ್ಯ-ನೆರಳುಗಳನ್ನು ಬಳಸುವುದು ಕೇವಲ ಬೆಳಕಿನ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸುವುದಲ್ಲ ಎಂದು ತೋರಿಸುತ್ತದೆ, ಏಕೆಂದರೆ ಅವುಗಳು ಅಲಂಕಾರಿಕವಾಗಿರಬಹುದು ಮತ್ತು ವ್ಯಕ್ತಿತ್ವವನ್ನು ಸೇರಿಸಬಹುದು. ಪಠ್ಯ ಸ್ಟ್ರೋಕ್ ಅನೇಕ ಕಾರ್ಟೂನ್ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ಗಳು ದಪ್ಪ ಬಾಹ್ಯರೇಖೆಯೊಂದಿಗೆ ಅಕ್ಷರಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ, ಅದು ಅವುಗಳನ್ನು ಹಿನ್ನೆಲೆಯಿಂದ ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ. ನಾನು ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಈ ಪರಿಣಾಮವನ್ನು ಮರುಸೃಷ್ಟಿಸಬಹುದು. ದೀರ್ಘಕಾಲದವರೆಗೆ, ಈ ಆಸ್ತಿ -ವೆಬ್ಕಿಟ್- ಪೂರ್ವಪ್ರತ್ಯಯದ ಮೂಲಕ ಮಾತ್ರ ಲಭ್ಯವಿತ್ತು, ಆದರೆ ಇದು ಈಗ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆ ಎಂದರ್ಥ.
ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್ ಎರಡು ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಸಂಕ್ಷಿಪ್ತ ರೂಪವಾಗಿದೆ. ಮೊದಲನೆಯದು, ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್-ಅಗಲ, ಪ್ರತ್ಯೇಕ ಅಕ್ಷರಗಳ ಸುತ್ತಲೂ ಬಾಹ್ಯರೇಖೆಯನ್ನು ಸೆಳೆಯುತ್ತದೆ, ಆದರೆ ಎರಡನೆಯದು, ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್-ಬಣ್ಣ, ಅದರ ಬಣ್ಣವನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. "Whatever Goes Pup" ಗಾಗಿ ನಾನು ಹಳದಿ ಪಠ್ಯಕ್ಕೆ 4px ನೀಲಿ ಸ್ಟ್ರೋಕ್ ಅನ್ನು ಸೇರಿಸಿದ್ದೇನೆ: ಬಣ್ಣ: #eff0cd; -ವೆಬ್ಕಿಟ್-ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್: 4px #7890b5; ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್: 4px #7890b5;
ಸ್ಟ್ರೋಕ್ಗಳು ನೆರಳುಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟಾಗ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಬಹುದು, ಆದ್ದರಿಂದ "ಗ್ರೋಯಿಂಗ್, ಗ್ರೋಯಿಂಗ್, ಗಾನ್" ಗಾಗಿ ನಾನು ಈ ಮೂರು ಆಯಾಮದ ಪಠ್ಯ ಪರಿಣಾಮವನ್ನು ರಚಿಸಲು ಕೇವಲ ಮಸುಕಾಗಿರುವ 1px ನೆರಳುಗೆ ತೆಳುವಾದ 3px ಸ್ಟ್ರೋಕ್ ಅನ್ನು ಸೇರಿಸಿದ್ದೇನೆ: ಬಣ್ಣ: #fbb999; ಪಠ್ಯ ನೆರಳು: 3px 5px 1px #5160b1; -ವೆಬ್ಕಿಟ್-ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್: 3px #984336; ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್: 3px #984336;
ಪೇಂಟ್ ಆರ್ಡರ್ ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್ ಅನ್ನು ಬಳಸುವುದು ಯಾವಾಗಲೂ ನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶವನ್ನು ಉಂಟುಮಾಡುವುದಿಲ್ಲ, ವಿಶೇಷವಾಗಿ ತೆಳುವಾದ ಅಕ್ಷರಗಳು ಮತ್ತು ದಪ್ಪವಾದ ಸ್ಟ್ರೋಕ್ಗಳೊಂದಿಗೆ, ಏಕೆಂದರೆ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಬ್ರೌಸರ್ ತುಂಬುವಿಕೆಯ ಮೇಲೆ ಸ್ಟ್ರೋಕ್ ಅನ್ನು ಸೆಳೆಯುತ್ತದೆ. ದುಃಖಕರವೆಂದರೆ, ನಾನು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ಕೆಚ್ನಲ್ಲಿ ಮಾಡುವಂತೆ ಸ್ಟ್ರೋಕ್ ಪ್ಲೇಸ್ಮೆಂಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಲು CSS ನನಗೆ ಇನ್ನೂ ಅನುಮತಿಸುವುದಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಪೇಂಟ್-ಆರ್ಡರ್ ಆಸ್ತಿಯು ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿದ್ದು ಅದು ಫಿಲ್ನ ಮುಂಭಾಗಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಸ್ಟ್ರೋಕ್ ಅನ್ನು ಹಿಂದೆ ಇರಿಸಲು ನನಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಪೇಂಟ್-ಆರ್ಡರ್: ಸ್ಟ್ರೋಕ್ ಸ್ಟ್ರೋಕ್ ಅನ್ನು ಮೊದಲು ಬಣ್ಣಿಸುತ್ತದೆ, ನಂತರ ಫಿಲ್, ಆದರೆ ಪೇಂಟ್-ಆರ್ಡರ್: ಫಿಲ್ ವಿರುದ್ಧವಾಗಿ ಮಾಡುತ್ತದೆ: ಬಣ್ಣ: #fbb999; ಬಣ್ಣ-ಆದೇಶ: ತುಂಬು; ಪಠ್ಯ ನೆರಳು: 3px 5px 1px #5160b1; ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್-ಬಣ್ಣ:#984336; ಪಠ್ಯ-ಸ್ಟ್ರೋಕ್ ಅಗಲ: 3px;
ಪರಿಣಾಮಕಾರಿ ಸ್ಟ್ರೋಕ್ ಅಕ್ಷರಗಳನ್ನು ಓದುವಂತೆ ಮಾಡುತ್ತದೆ, ತೂಕವನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು - ನೆರಳುಗಳು ಮತ್ತು ಬಣ್ಣದ ಕ್ರಮದೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ - ಫ್ಲಾಟ್ ಟೆಕ್ಸ್ಟ್ ನೈಜ ಉಪಸ್ಥಿತಿಯನ್ನು ನೀಡುತ್ತದೆ. ಪಠ್ಯದ ಒಳಗಿನ ಹಿನ್ನೆಲೆಗಳು ಅನೇಕ ಕಾರ್ಟೂನ್ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ಗಳು ಅಕ್ಷರಗಳಿಗೆ ವಿನ್ಯಾಸ, ಗ್ರೇಡಿಯಂಟ್ಗಳು ಅಥವಾ ಸಚಿತ್ರ ವಿವರಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಫ್ಲಾಟ್ ಬಣ್ಣವನ್ನು ಮೀರಿವೆ. ಕೆಲವೊಮ್ಮೆ ಇದು ಒಂದು ವಿನ್ಯಾಸವಾಗಿದೆ, ಇತರ ಬಾರಿ ಇದು ಸೂಕ್ಷ್ಮವಾದ ನಾದದ ಬದಲಾವಣೆಯೊಂದಿಗೆ ಗ್ರೇಡಿಯಂಟ್ ಆಗಿರಬಹುದು. ವೆಬ್ನಲ್ಲಿ, ಪಠ್ಯದ ಹಿಂದೆ ಹಿನ್ನೆಲೆ ಚಿತ್ರ ಅಥವಾ ಗ್ರೇಡಿಯಂಟ್ ಬಳಸಿ ಮತ್ತು ನಂತರ ಅದನ್ನು ಅಕ್ಷರಗಳ ಆಕಾರಕ್ಕೆ ಕ್ಲಿಪ್ ಮಾಡುವ ಮೂಲಕ ನಾನು ಈ ಪರಿಣಾಮವನ್ನು ಮರುಸೃಷ್ಟಿಸಬಹುದು. ಇದು ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುವ ಎರಡು ಗುಣಲಕ್ಷಣಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ: ಹಿನ್ನೆಲೆ-ಕ್ಲಿಪ್: ಪಠ್ಯ ಮತ್ತು ಪಠ್ಯ-ಭರ್ತಿ-ಬಣ್ಣ: ಪಾರದರ್ಶಕ.
ಮೊದಲಿಗೆ, ನಾನು ಪಠ್ಯದ ಹಿಂದೆ ಹಿನ್ನೆಲೆಯನ್ನು ಅನ್ವಯಿಸುತ್ತೇನೆ. ಇದು ಬಿಟ್ಮ್ಯಾಪ್ ಅಥವಾ ವೆಕ್ಟರ್ ಇಮೇಜ್ ಅಥವಾ CSS ಗ್ರೇಡಿಯಂಟ್ ಆಗಿರಬಹುದು. ಕ್ವಿಕ್ ಡ್ರಾ ಮೆಕ್ಗ್ರಾ ಸಂಚಿಕೆ "ಬಾಬಾ ಬೈಟ್" ನಿಂದ ಈ ಉದಾಹರಣೆಗಾಗಿ, ಶೀರ್ಷಿಕೆ ಪಠ್ಯವು ಡಾರ್ಕ್ನಿಂದ ಬೆಳಕಿಗೆ ಸೂಕ್ಷ್ಮವಾದ ಮೇಲ್ಭಾಗ-ಕೆಳಭಾಗದ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ: ಹಿನ್ನೆಲೆ: ರೇಖೀಯ-ಗ್ರೇಡಿಯಂಟ್(0deg, #667b6a, #1d271a);
ಮುಂದೆ, ನಾನು ಆ ಹಿನ್ನೆಲೆಯನ್ನು ಗ್ಲಿಫ್ಗಳಿಗೆ ಕ್ಲಿಪ್ ಮಾಡುತ್ತೇನೆ ಮತ್ತು ಪಠ್ಯವನ್ನು ಪಾರದರ್ಶಕವಾಗಿಸುತ್ತೇನೆ ಆದ್ದರಿಂದ ಹಿನ್ನೆಲೆ ತೋರಿಸುತ್ತದೆ: -ವೆಬ್ಕಿಟ್-ಹಿನ್ನೆಲೆ-ಕ್ಲಿಪ್: ಪಠ್ಯ; -ವೆಬ್ಕಿಟ್-ಪಠ್ಯ-ಭರ್ತಿ-ಬಣ್ಣ: ಪಾರದರ್ಶಕ;
ಕೇವಲ ಆ ಎರಡು ಸಾಲುಗಳೊಂದಿಗೆ, ಪಠ್ಯದ ಹಿಂದೆ ಹಿನ್ನೆಲೆಯನ್ನು ಇನ್ನು ಮುಂದೆ ಚಿತ್ರಿಸಲಾಗುವುದಿಲ್ಲ; ಬದಲಾಗಿ, ಅದರೊಳಗೆ ಚಿತ್ರಿಸಲಾಗಿದೆ. ಸ್ಟ್ರೋಕ್ ಮತ್ತು ನೆರಳುಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ ಈ ತಂತ್ರವು ವಿಶೇಷವಾಗಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಕ್ಲಿಪ್ ಮಾಡಿದ ಗ್ರೇಡಿಯಂಟ್ ಅಕ್ಷರಗಳನ್ನು ಬಣ್ಣ ಮತ್ತು ವಿನ್ಯಾಸದೊಂದಿಗೆ ಒದಗಿಸುತ್ತದೆ, ಒಂದು ಸ್ಟ್ರೋಕ್ ಅದರ ಅಂಚುಗಳನ್ನು ತೀಕ್ಷ್ಣವಾಗಿ ಇರಿಸುತ್ತದೆ ಮತ್ತು ನೆರಳು ಅದನ್ನು ಹಿನ್ನೆಲೆಯಿಂದ ಮೇಲಕ್ಕೆತ್ತುತ್ತದೆ. ಒಟ್ಟಾಗಿ, ಅವರು ಸ್ವಲ್ಪ CSS ಗಿಂತ ಹೆಚ್ಚೇನೂ ಬಳಸದೆ ಕೈಯಿಂದ ಚಿತ್ರಿಸಿದ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ಗಳ ಲೇಯರ್ಡ್ ನೋಟವನ್ನು ಮರುಸೃಷ್ಟಿಸುತ್ತಾರೆ. ಯಾವಾಗಲೂ, ಕ್ಲಿಪ್ ಮಾಡಿದ ಪಠ್ಯವನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಪರೀಕ್ಷಿಸಿ, ಬ್ರೌಸರ್ ಕ್ವಿರ್ಕ್ಗಳು ಕೆಲವೊಮ್ಮೆ ನೆರಳುಗಳು ಮತ್ತು ರೆಂಡರಿಂಗ್ನ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಪಠ್ಯವನ್ನು ಪ್ರತ್ಯೇಕ ಅಕ್ಷರಗಳಾಗಿ ವಿಭಜಿಸುವುದು ಕೆಲವೊಮ್ಮೆ ನಾನು ಸಂಪೂರ್ಣ ಪದ ಅಥವಾ ಶೀರ್ಷಿಕೆಯನ್ನು ಶೈಲಿ ಮಾಡಲು ಬಯಸುವುದಿಲ್ಲ. ನಾನು ಪ್ರತ್ಯೇಕ ಅಕ್ಷರಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಬಯಸುತ್ತೇನೆ - ಒಂದು ಪಾತ್ರವನ್ನು ಸ್ಥಳಕ್ಕೆ ತಳ್ಳಲು, ಒಂದು ಗ್ಲಿಫ್ ಹೆಚ್ಚುವರಿ ತೂಕವನ್ನು ನೀಡಲು ಅಥವಾ ಕೆಲವು ಅಕ್ಷರಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಅನಿಮೇಟ್ ಮಾಡಲು. ಸರಳ HTML ಮತ್ತು CSS ನಲ್ಲಿ, ಅದನ್ನು ಮಾಡಲು ಒಂದೇ ಒಂದು ವಿಶ್ವಾಸಾರ್ಹ ಮಾರ್ಗವಿದೆ: ಪ್ರತಿ ಅಕ್ಷರವನ್ನು ಅದರ ಸ್ವಂತ ಸ್ಪ್ಯಾನ್ ಅಂಶದಲ್ಲಿ ಸುತ್ತಿ. ನಾನು ಅದನ್ನು ಕೈಯಾರೆ ಮಾಡಬಹುದು, ಆದರೆ ಅದು ದುರ್ಬಲವಾಗಿರುತ್ತದೆ, ನಿರ್ವಹಿಸಲು ಕಷ್ಟವಾಗುತ್ತದೆ ಮತ್ತು ನಕಲು ಬದಲಾದಾಗ ತ್ವರಿತವಾಗಿ ಕುಸಿಯುತ್ತದೆ. ಬದಲಿಗೆ, ನನಗೆ ಪ್ರತಿ-ಅಕ್ಷರ ನಿಯಂತ್ರಣದ ಅಗತ್ಯವಿದ್ದಾಗ, ನಾನು splt.js ನಂತಹ ಪಠ್ಯ-ವಿಭಜಿಸುವ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುತ್ತೇನೆ (ಇತರ ಪರಿಹಾರಗಳು ಲಭ್ಯವಿದ್ದರೂ). ಇದು ಪಠ್ಯ ನೋಡ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪದಗಳು ಅಥವಾ ಅಕ್ಷರಗಳನ್ನು ಸುತ್ತುತ್ತದೆ, ನನ್ನ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಗೊಂದಲಗೊಳಿಸದೆಯೇ ಅನಿಮೇಟ್ ಮಾಡಲು ಮತ್ತು ಶೈಲಿಗೆ ಹೆಚ್ಚುವರಿ ಕೊಕ್ಕೆಗಳನ್ನು ನೀಡುತ್ತದೆ. ಇದು ನನ್ನ HTML ಅನ್ನು ಓದಬಲ್ಲ ಮತ್ತು ಶಬ್ದಾರ್ಥವನ್ನು ಇರಿಸುವ ಒಂದು ವಿಧಾನವಾಗಿದೆ, ನನಗೆ ಉತ್ತಮವಾದ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುವಾಗ ನಾನು ಕ್ಲಾಸಿಕ್ ಕಾರ್ಟೂನ್ ಶೀರ್ಷಿಕೆ ಕಾರ್ಡ್ಗಳಲ್ಲಿ ನೀವು ನೋಡುವ ಅಸಮ, ವಿಶಿಷ್ಟವಾದ ಮುದ್ರಣಕಲೆಯನ್ನು ಮರುಸೃಷ್ಟಿಸಲು ಅಗತ್ಯವಿದೆ. ಆದಾಗ್ಯೂ, ಈ ವಿಧಾನವು ಬರುತ್ತದೆಹೆಚ್ಚಿನ ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳು ಪಠ್ಯ ನೋಡ್ಗಳನ್ನು ಕ್ರಮವಾಗಿ ಓದುವುದರಿಂದ ಪ್ರವೇಶಿಸುವಿಕೆ ಎಚ್ಚರಿಕೆಗಳು. ಆದ್ದರಿಂದ ಇದು:
ಹಮ್ ಸ್ವೀಟ್ ಹಮ್
ನೀವು ನಿರೀಕ್ಷಿಸಿದಂತೆ ಓದುತ್ತದೆ: ಹೂಂ ಸ್ವೀಟ್ ಹೂಂ
ಆದರೆ ಇದು:
H u m
…ಬ್ರೌಸರ್ ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಅನ್ನು ಅವಲಂಬಿಸಿ ವಿಭಿನ್ನವಾಗಿ ಅರ್ಥೈಸಿಕೊಳ್ಳಬಹುದು. ಕೆಲವರು ಅಕ್ಷರಗಳನ್ನು ಜೋಡಿಸಿ ಪದಗಳನ್ನು ಸರಿಯಾಗಿ ಓದುತ್ತಾರೆ. ಇತರರು ಅಕ್ಷರಗಳ ನಡುವೆ ವಿರಾಮಗೊಳಿಸಬಹುದು, ಇದು ಕೆಟ್ಟ ಸನ್ನಿವೇಶದಲ್ಲಿ ಈ ರೀತಿ ಧ್ವನಿಸಬಹುದು: "H..." "U..." "M..."
ದುಃಖಕರವೆಂದರೆ, ಕೆಲವು ವಿಭಜಿಸುವ ಪರಿಹಾರಗಳು ಯಾವಾಗಲೂ ಪ್ರವೇಶಿಸಬಹುದಾದ ಫಲಿತಾಂಶವನ್ನು ನೀಡುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ನಾನು ನನ್ನ ಸ್ವಂತ ಪಠ್ಯ ಸ್ಪ್ಲಿಟರ್, splinter.js ಅನ್ನು ಬರೆದಿದ್ದೇನೆ, ಅದು ಪ್ರಸ್ತುತ ಬೀಟಾದಲ್ಲಿದೆ. ವೈಯಕ್ತಿಕ ಅಕ್ಷರಗಳನ್ನು ಪರಿವರ್ತಿಸುವುದು ನನ್ನ ಟೂನ್ ಟೆಕ್ಸ್ಟ್ ಸ್ಪ್ಲಿಟರ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು, ನಾನು ವಿಭಜಿಸಲು ಬಯಸುವ ಅಂಶಕ್ಕೆ ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುತ್ತೇನೆ:
ಹಮ್ ಸ್ವೀಟ್ ಹಮ್
ಮೊದಲಿಗೆ, ನನ್ನ ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರತಿ ಪದವನ್ನು ಪ್ರತ್ಯೇಕ ಅಕ್ಷರಗಳಾಗಿ ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ ಮತ್ತು ವರ್ಗ ಮತ್ತು ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅನ್ವಯಿಸುವ ಸ್ಪ್ಯಾನ್ ಅಂಶದಲ್ಲಿ ಸುತ್ತುತ್ತದೆ:
ಸ್ಕ್ರಿಪ್ಟ್ ನಂತರ ಸ್ಪ್ಲಿಟ್ ಎಲಿಮೆಂಟ್ನ ಆರಂಭಿಕ ವಿಷಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಪ್ರವೇಶವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡಲು ಅದನ್ನು ಏರಿಯಾ ಗುಣಲಕ್ಷಣವಾಗಿ ಸೇರಿಸುತ್ತದೆ:
ಆ ವರ್ಗದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅನ್ವಯಿಸುವುದರೊಂದಿಗೆ, ನಾನು ಆಯ್ಕೆ ಮಾಡಿದಂತೆ ಪ್ರತ್ಯೇಕ ಪಾತ್ರಗಳನ್ನು ನಾನು ಶೈಲಿ ಮಾಡಬಹುದು.
ಉದಾಹರಣೆಗೆ, "ಹಮ್ ಸ್ವೀಟ್ ಹಮ್" ಗಾಗಿ, ಅದರ ಅಕ್ಷರಗಳು ಬೇಸ್ಲೈನ್ನಿಂದ ಹೇಗೆ ಬದಲಾಗುತ್ತವೆ ಎಂಬುದನ್ನು ಪುನರಾವರ್ತಿಸಲು ನಾನು ಬಯಸುತ್ತೇನೆ. ನನ್ನ ಟೂನ್ ಟೆಕ್ಸ್ಟ್ ಸ್ಪ್ಲಿಟರ್ ಅನ್ನು ಬಳಸಿದ ನಂತರ, ನಾನು ಅರೆ-ಯಾದೃಚ್ಛಿಕ ನೋಟವನ್ನು ರಚಿಸಲು ಹಲವಾರು :nth-child ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನಾಲ್ಕು ವಿಭಿನ್ನ ಅನುವಾದ ಮೌಲ್ಯಗಳನ್ನು ಅನ್ವಯಿಸಿದೆ: /* 4ನೇ, 8ನೇ, 12ನೇ... */ .toon-char:nth-child(4n) {translate: 0 -8px; } /* 1ನೇ, 5ನೇ, 9ನೇ... */ .toon-char:nth-child(4n+1) {translate: 0 -4px; } /* 2ನೇ, 6ನೇ, 10ನೇ... */ .toon-char:nth-child(4n+2) {translate: 0 4px; } /* 3ನೇ, 7ನೇ, 11ನೇ... */ .toon-char:nth-child(4n+3) {translate: 0 8px; }
ಆದರೆ ಅನುವಾದವು ನನ್ನ ಟೂನ್ ಪಠ್ಯವನ್ನು ಪರಿವರ್ತಿಸಲು ನಾನು ಬಳಸಬಹುದಾದ ಒಂದು ಆಸ್ತಿ ಮಾತ್ರ.
ಇನ್ನಷ್ಟು ಅಸ್ತವ್ಯಸ್ತವಾಗಿರುವ ನೋಟಕ್ಕಾಗಿ ನಾನು ಆ ಪ್ರತ್ಯೇಕ ಅಕ್ಷರಗಳನ್ನು ತಿರುಗಿಸಬಹುದು: /* 4ನೇ, 8ನೇ, 12ನೇ... */ .ಟೂನ್-ಲೈನ್ .ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4ನಿ) {ತಿರುಗಿಸಿ: -4ಡಿಗ್; } /* 1ನೇ, 5ನೇ, 9ನೇ... */ .ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4n+1) {ತಿರುಗಿಸಿ: -8deg; } /* 2ನೇ, 6ನೇ, 10ನೇ... */ .ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4n+2) {ತಿರುಗಿಸಿ: 4ಡಿ; } /* 3ನೇ, 7ನೇ, 11ನೇ... */ .ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4n+3) {ತಿರುಗಿಸಿ: 8ಡಿ; }
ಆದರೆ ಅನುವಾದವು ನನ್ನ ಟೂನ್ ಪಠ್ಯವನ್ನು ಪರಿವರ್ತಿಸಲು ನಾನು ಬಳಸಬಹುದಾದ ಒಂದು ಆಸ್ತಿ ಮಾತ್ರ. ಇನ್ನಷ್ಟು ಅಸ್ತವ್ಯಸ್ತವಾಗಿರುವ ನೋಟಕ್ಕಾಗಿ ನಾನು ಆ ಪ್ರತ್ಯೇಕ ಅಕ್ಷರಗಳನ್ನು ತಿರುಗಿಸಬಹುದು: /* 4ನೇ, 8ನೇ, 12ನೇ... */ .ಟೂನ್-ಲೈನ್ .ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4ನಿ) { ತಿರುಗಿಸಿ: -4 ಡಿಗ್ರಿ; }
/* 1ನೇ, 5ನೇ, 9ನೇ... */ .ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4n+1) { ತಿರುಗಿಸಿ: -8ಡಿಗ್ರಿ; }
/* 2ನೇ, 6ನೇ, 10ನೇ... */ .ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4n+2) { ತಿರುಗಿಸಿ: 4 ಡಿಗ್ರಿ; }
/* 3ನೇ, 7ನೇ, 11ನೇ... */ .ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4n+3) { ತಿರುಗಿಸಿ: 8ಡಿ; }
ಮತ್ತು, ಸಹಜವಾಗಿ, ಆ ಪಾತ್ರಗಳನ್ನು ಸರಕ್ಕನೆ ಮಾಡಲು ಮತ್ತು ನನ್ನ ಟೂನ್ ಪಠ್ಯ ಶೈಲಿಯ ಶೀರ್ಷಿಕೆಗಳಿಗೆ ಜೀವ ತುಂಬಲು ನಾನು ಅನಿಮೇಷನ್ಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಮೊದಲಿಗೆ, ನಾನು ಅಕ್ಷರಗಳನ್ನು ತಿರುಗಿಸುವ ಕೀಫ್ರೇಮ್ ಅನಿಮೇಷನ್ ಅನ್ನು ರಚಿಸಿದ್ದೇನೆ:
@keyframes ಸರಕ್ಕನೆ { 0%, 100% {ರೂಪಾಂತರ: ತಿರುಗಿಸು(var(--base-rotate, 0deg)); } 25% {ರೂಪಾಂತರ: ತಿರುಗಿಸು(ಕ್ಯಾಲ್ಕ್(ವರ್(--ಬೇಸ್-ರೋಟೇಟ್, 0ಡಿಗ್) + 3ಡಿಗ್)); } 50% {ರೂಪಾಂತರ: ತಿರುಗಿಸು(ಕ್ಯಾಲ್ಕ್(ವರ್(--ಬೇಸ್-ರೋಟೇಟ್, 0ಡಿಗ್) - 2ಡಿಗ್)); } 75% {ರೂಪಾಂತರ: ತಿರುಗಿಸು(ಕ್ಯಾಲ್ಕ್(ವರ್(--ಬೇಸ್-ರೋಟೇಟ್, 0ಡಿಗ್) + 1ಡಿಗ್)); } }
ನನ್ನ ಟೂನ್ ಟೆಕ್ಸ್ಟ್ ಸ್ಪ್ಲಿಟರ್ ರಚಿಸಿದ ಸ್ಪ್ಯಾನ್ ಅಂಶಗಳಿಗೆ ಅದನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು: .ಟೂನ್-ಚಾರ್ { ಅನಿಮೇಷನ್: ಜಿಗಲ್ 3s ಅನಂತ ಸುಲಭ-ಔಟ್; ರೂಪಾಂತರ-ಮೂಲ: ಮಧ್ಯದ ಕೆಳಭಾಗ; }
ಮತ್ತು ಅಂತಿಮವಾಗಿ, ಪ್ರತಿ ಅಕ್ಷರವು ಸರಕ್ಕನೆ ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು ತಿರುಗುವಿಕೆಯ ಮೊತ್ತ ಮತ್ತು ವಿಳಂಬವನ್ನು ಹೊಂದಿಸುವುದು: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4ನಿ) {ಅನಿಮೇಷನ್-ವಿಳಂಬ: 0.1ಸೆ; } .ಟೂನ್-ಚಾರ್:ನೇ-ಮಗು(4n+1) {ಅನಿಮೇಷನ್-ವಿಳಂಬ: 0.3ಸೆ; } .toon-char:nth-child(4n+2) {ಆನಿಮೇಷನ್-ವಿಳಂಬ: 0.5s; } .toon-char:nth-child(4n+3) {ಆನಿಮೇಷನ್-ವಿಳಂಬ: 0.7s; }
ಪ್ರಭಾವ ಬೀರಲು ಒಂದು ಫ್ರೇಮ್ ಕಾರ್ಟೂನ್ ಶೀರ್ಷಿಕೆ ಕಲಾವಿದರು ಪ್ರಭಾವ ಬೀರಲು ಒಂದು ಚೌಕಟ್ಟನ್ನು ಹೊಂದಿದ್ದರು ಮತ್ತು ಅವರ ಮುದ್ರಣಕಲೆಯು ಅವರು ಚಿತ್ರಿಸಿದ ಕಲಾಕೃತಿಯಷ್ಟೇ ಮುಖ್ಯವಾಗಿತ್ತು. ವೆಬ್ನಲ್ಲೂ ಇದು ನಿಜ. ಉತ್ತಮವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಹೆಡರ್ ಅಥವಾ ಹೀರೋಪ್ರದೇಶಕ್ಕೆ ಸ್ಪಷ್ಟತೆ, ಪಾತ್ರ ಮತ್ತು ಆತ್ಮವಿಶ್ವಾಸದ ಅಗತ್ಯವಿದೆ - ಕೇವಲ ಮರೆಯಾದ ಪೂರ್ಣ ಅಗಲದ ಹಿನ್ನೆಲೆ ಚಿತ್ರವಲ್ಲ. ಕೆಲವು ಎಚ್ಚರಿಕೆಯಿಂದ ಆಯ್ಕೆಮಾಡಿದ CSS ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ - ನೆರಳುಗಳು, ಸ್ಟ್ರೋಕ್ಗಳು, ಕ್ಲಿಪ್ ಮಾಡಿದ ಹಿನ್ನೆಲೆಗಳು ಮತ್ತು ಕೆಲವು ಸಂಯಮದ ಅನಿಮೇಷನ್ - ನಾವು ಅದೇ ಪರಿಣಾಮವನ್ನು ಮರುಸೃಷ್ಟಿಸಬಹುದು. ನಾನು ಟೂನ್ ಪಠ್ಯವನ್ನು ಪ್ರೀತಿಸುತ್ತೇನೆ ಏಕೆಂದರೆ ನಾನು ನಾಸ್ಟಾಲ್ಜಿಕ್ ಆಗಿಲ್ಲ, ಆದರೆ ಅದರ ವಿನ್ಯಾಸ ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿದೆ. ಉದ್ದೇಶಪೂರ್ವಕ ಆಯ್ಕೆಗಳನ್ನು ಮಾಡಿ, ಮತ್ತು ಸ್ವಲ್ಪ ಟೂನ್ ಪಠ್ಯ ಮುದ್ರಣಕಲೆಯು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಿಗೆ ಪಂಚ್ ಸೇರಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಡಿ.
