ຫຼັງຈາກສໍາເລັດໂຄງການທີ່ຮຽກຮ້ອງໃຫ້ຂ້ອຍຮຽນຮູ້ທຸກຢ່າງທີ່ຂ້ອຍສາມາດເຮັດໄດ້ກ່ຽວກັບ CSS ແລະ SVG animations, ຂ້ອຍເລີ່ມຂຽນຊຸດນີ້ກ່ຽວກັບ Smashing Animations ແລະ "How Classic Cartoons Inspire Modern CSS." ໃນຮອບປີນີ້, ຂ້ອຍຢາກສະແດງວິທີການໃຊ້ CSS ທີ່ທັນສະໄຫມເພື່ອສ້າງອົງປະກອບທີ່ເຮັດໃຫ້ Toon Titles ມີຜົນກະທົບຫຼາຍ: typography ຂອງພວກເຂົາ. Title Artwork Design ໃນຍຸກທີ່ງຽບສະຫງົບຂອງຊຸມປີ 1920 ແລະຕົ້ນຊຸມປີ 30, ການພິມນາມບັດຂອງຮູບເງົາໄດ້ສ້າງອາລົມ, ຕັ້ງສາກ, ແລະເຕືອນຜູ້ຊົມກ່ຽວກັບປະເພດຂອງຮູບເງົາທີ່ເຂົາເຈົ້າໄດ້ເບິ່ງ.
ບັດຫົວຂໍ້ກາຕູນຍັງເປັນການສ້າງຍີ່ຫໍ້, ອາລົມ, ແລະການຈັດສາກ, ທັງໝົດຖືກມ້ວນເປັນອັນດຽວ. ໃນຊຸມປີຕົ້ນ, ເມື່ອງົບປະມານສະຕູດິໂອໃຫຍ່ກວ່າ, ບັດຫົວຂໍ້ເຫຼົ່ານີ້ມັກຈະເປັນຮູບແຕ້ມແລະສີ.
ແຕ່ເມື່ອໂທລະທັດຈະເລີນເຕີບໂຕໃນຊຸມປີ 1950, ງົບປະມານຫຼຸດລົງ, ແລະບັດທີ່ອອກແບບໂດຍນັກສິລະປິນເຊັ່ນ Lawrence “Art” Goble ໄດ້ຮັບຮອງເອົາພາສາທີ່ມີສາຍຕາໃຫມ່, ກາຍເປັນຮູບພາບ, ມີສີສັນ, ແລະມີຄວາມຊັບຊ້ອນຫນ້ອຍລົງ. ໝາຍເຫດ: Lawrence “Art” Goble ແມ່ນໜຶ່ງໃນວິລະຊົນທີ່ມັກເບິ່ງຂ້າມຂອງອະນິເມຊັນກາງສັດຕະວັດຂອງອາເມຣິກາ. ລາວໄດ້ເຮັດວຽກຕົ້ນຕໍສໍາລັບ Hanna-Barbera ໃນລະຫວ່າງປີທີ່ມີອິດທິພົນທີ່ສຸດຂອງ 1950s ແລະ 1960s. Goble ບໍ່ແມ່ນນັກເຄື່ອນໄຫວລັກສະນະ. ບົດບາດຂອງລາວແມ່ນການສ້າງບັນຍາກາດ, ດັ່ງນັ້ນລາວໄດ້ອອກແບບສະພາບແວດລ້ອມສໍາລັບ The Flintstones, Huckleberry Hound, Quick Draw McGraw, ແລະ Yogi Bear, ເຊັ່ນດຽວກັນກັບບັດຫົວຂໍ້ເປີດທີ່ກໍານົດສຽງ. ບັດຊື່ຂອງລາວ, ມີຮູບແຕ້ມທີ່ມີໂລໂກ້ຊ້ອນທັບ, ຊ່ວຍກໍານົດຮູບສັນຍາລັກຂອງ Hanna-Barbera. ສິນລະປະຂອງ Goble ສໍາລັບຕົວລະຄອນເຊັ່ນ Quick Draw McGraw ແລະ Yogi Bear ມີປະສິດທິພາບໃນຫນ້າຈໍໂທລະພາບຂະຫນາດນ້ອຍກວ່າ. ແທນທີ່ຈະສ້າງຮູບແຕ້ມຈາກກາຕູນ, ລາວໄດ້ສຸມໃສ່ການນໍາສະເຫນີແນວຄວາມຄິດອັນດຽວ, ທີ່ເຂັ້ມແຂງ - ມັກຈະຢູ່ໃນຮູບເງົາ - ທີ່ຈັບຄວາມສໍາຄັນຂອງມັນ. ໃນ "The Buzzin 'Bear," Yogi buzzes ໂດຍໃນ helicopter. ລາວ bounces ໄປ, ກະຕ່າ pic-a-nic ໃນມື, ໃນ "Bear on a Picnic," ແລະສໍາລັບ "Prize Fight Fright," Yogi ໃສ່ກ່ອງຂໍ້ຄວາມຫົວຂໍ້.
ໂດຍມີການເຄື່ອນໄຫວໜ້ອຍ ຫຼືບໍ່ມີເລີຍທີ່ຈະອີງໃສ່, ເຟຣມດຽວຂອງ Goble ຕ້ອງໄດ້ສ້າງອາລົມ, ຕັ້ງສາກ, ແລະບັນຍາຍເລື່ອງໃດໜຶ່ງ. ພວກເຂົາເຮັດອັນນີ້ໂດຍໃຊ້ສີຮາບພຽງ, ຮູບຮ່າງກຣາຟິກ, ແລະຕົວພິມທີ່ຖືກລວມເຂົ້າກັນເລື້ອຍໆເຂົ້າໃນວຽກງານສິລະປະ.
ໃນຖານະນັກອອກແບບທີ່ເຮັດວຽກຢູ່ໃນເວັບ, ຫົວຂໍ້ toon ສາມາດສອນພວກເຮົາຫຼາຍຢ່າງກ່ຽວກັບວິທີການຖ່າຍທອດບຸກຄະລິກກະພາບຂອງຍີ່ຫໍ້, ສ້າງຄວາມປະທັບໃຈຄັ້ງທໍາອິດ, ແລະກໍານົດຄວາມຄາດຫວັງສໍາລັບປະສົບການຂອງຜູ້ໃດຜູ້ຫນຶ່ງທີ່ໃຊ້ຜະລິດຕະພັນຫຼືເວັບໄຊທ໌. ພວກເຮົາສາມາດຮຽນຮູ້ຈາກເຕັກນິກການຂອງສິລະປິນໃນການສ້າງປ້າຍໂຄສະນາປະສິດທິຜົນ, ຫົວຫນ້າທີ່ຫນ້າດິນ, ແລະແມ້ກະທັ້ງຫນ້າຈໍ splash ທີ່ດີ. Toon Title Typography ບັດຫົວຂໍ້ກາຕູນສະແດງໃຫ້ເຫັນວ່າການລວມປະເພດກັບຮູບພາບເຮັດໃຫ້ການເຈາະຫົວຫຼື hero ຕ້ອງການ. ດ້ວຍມືຂອງເງົາ, ຂໍ້ຄວາມ, ແລະການປ່ຽນແປງ tricks, CSS ທີ່ທັນສະໄຫມຊ່ວຍໃຫ້ທ່ານສາມາດເຂົ້າໄປໃນພະລັງງານດຽວກັນ.
The Toon Text Title Generator Partway ໂດຍຜ່ານການຂຽນບົດຄວາມນີ້, ຂ້າພະເຈົ້າຮູ້ວ່າມັນຈະເປັນປະໂຫຍດທີ່ຈະມີເຄື່ອງມືສໍາລັບການສ້າງຂໍ້ຄວາມທີ່ມີລັກສະນະຄ້າຍຄືຫົວຂໍ້ກາຕູນທີ່ຂ້າພະເຈົ້າຮັກຫຼາຍ. ດັ່ງນັ້ນຂ້າພະເຈົ້າໄດ້ເຮັດຫນຶ່ງ. My Toon Text Title Generator ໃຫ້ທ່ານທົດລອງດ້ວຍສີ, ຈັງຫວະ, ແລະເງົາຂໍ້ຄວາມຫຼາຍຮູບ. ທ່ານສາມາດປັບລໍາດັບສີ, ນໍາໃຊ້ຊ່ອງຫວ່າງຂອງຕົວອັກສອນ, ເບິ່ງຂໍ້ຄວາມຂອງທ່ານໃນການຄັດເລືອກຂອງຕົວອັກສອນຕົວຢ່າງ, ແລະຫຼັງຈາກນັ້ນຄັດລອກ CSS ທີ່ສ້າງຂຶ້ນໂດຍກົງໃສ່ clipboard ຂອງທ່ານເພື່ອໃຊ້ໃນໂຄງການ. Toon Title CSS ທ່ານພຽງແຕ່ສາມາດຄັດລອກ - ວາງ CSS ທີ່ Toon Text Title Generator ໃຫ້ທ່ານ. ແຕ່ໃຫ້ເບິ່ງໃກ້ຊິດກັບສິ່ງທີ່ມັນເຮັດ. ເງົາຂໍ້ຄວາມ ເບິ່ງປະເພດໃນຫົວຂໍ້ນີ້ຈາກຕອນຂອງ Augie Doggie "Yuk-Yuk Duck," ທີ່ມີຕົວອັກສອນສີເຫຼືອງຈືດໆແລະເງົາຊ້ໍາ, ແຂງ, ຊົດເຊີຍທີ່ຍົກມັນອອກຈາກພື້ນຫລັງແລະສ້າງພາບລວງຕາຂອງຄວາມເລິກ.
ເຈົ້າຄົງຈະຮູ້ແລ້ວວ່າເງົາຕົວໜັງສືຍອມຮັບສີ່ຄ່າ: (1) ລວງນອນ ແລະ (2) ການຊົດເຊີຍແນວຕັ້ງ, (3) ມົວ, ແລະ (4) ສີທີ່ສາມາດແຂງ ຫຼື ເຄິ່ງໂປ່ງໃສ. ຄ່າຊົດເຊີຍເຫຼົ່ານັ້ນສາມາດເປັນບວກ ຫຼືລົບໄດ້, ດັ່ງນັ້ນຂ້ອຍສາມາດເຮັດເລື້ມຄືນ “Yuk-Yuk Duck” ໂດຍໃຊ້ເງົາແຂງທີ່ດຶງລົງມາທາງຂວາ: ສີ: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
ໃນທາງກົງກັນຂ້າມ, ຫົວຂໍ້ "Pint Giant" ນີ້ມີຄວາມຮູ້ສຶກທີ່ແຕກຕ່າງກັນກັບເງົາເຄິ່ງອ່ອນໆໃນແງ່ລົບຂອງມັນ: ສີ: #c2a872; text-shadow: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
ເພື່ອເພີ່ມຄວາມເລິກພິເສດແລະສ້າງຜົນກະທົບທີ່ຫນ້າສົນໃຈຫຼາຍ, ຂ້ອຍສາມາດວາງຫຼາຍເງົາ. ສໍາລັບ “Let's Duck Out,” ຂ້ອຍໄດ້ລວມເອົາສີ່ເງົາ: ອັນທໍາອິດເປັນເງົາແຂງທີ່ມີການຊົດເຊີຍທາງຂວາງທາງລົບເພື່ອຍົກຂໍ້ຄວາມອອກຈາກພື້ນຫຼັງ, ຕິດຕາມດ້ວຍເງົາທີ່ອ່ອນລົງເລື້ອຍໆເພື່ອສ້າງຄວາມມົວອ້ອມຮອບມັນ: ສີ: #6F4D80; text-shadow: -5px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96 ; /* ເງົາ 4 */
ເງົາເຫຼົ່ານີ້ສະແດງໃຫ້ເຫັນວ່າການໃຊ້ເງົາຂໍ້ຄວາມບໍ່ພຽງແຕ່ສ້າງຜົນກະທົບຂອງແສງ, ຍ້ອນວ່າພວກມັນຍັງສາມາດຕົກແຕ່ງແລະເພີ່ມບຸກຄະລິກກະພາບ. Text Stroke ບັດຊື່ກາຕູນຫຼາຍອັນມີຕົວອັກສອນທີ່ມີໂຄງຮ່າງອັນກ້າຫານທີ່ເຮັດໃຫ້ພວກມັນໂດດເດັ່ນຈາກພື້ນຫຼັງ. ຂ້ອຍສາມາດສ້າງຜົນກະທົບນີ້ຄືນໃຫມ່ໂດຍໃຊ້ text-stroke. ເປັນເວລາດົນນານ, ຊັບສິນນີ້ສາມາດໃຊ້ໄດ້ຜ່ານ -webkit- ຄໍານໍາຫນ້າ, ແຕ່ນັ້ນກໍ່ຫມາຍຄວາມວ່າມັນໄດ້ຮັບການສະຫນັບສະຫນູນໃນທົ່ວຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ.
text-stroke ແມ່ນຫຍໍ້ມາຈາກສອງຄຸນສົມບັດ. ໂຕທໍາອິດ, ຄວາມກວ້າງຂອງຕົວໜັງສື, ແຕ້ມຮູບຮອບຕົວໜັງສືແຕ່ລະຕົວ, ໃນຂະນະທີ່ຕົວທີສອງ, ຕົວໜັງສື-ສີ, ຄວບຄຸມສີຂອງມັນ. ສໍາລັບ "Whatever Goes Pup," ຂ້າພະເຈົ້າໄດ້ເພີ່ມເສັ້ນເລືອດຕັນໃນສີຟ້າ 4px ໃສ່ຂໍ້ຄວາມສີເຫຼືອງ: ສີ: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Strokes ສາມາດເປັນປະໂຫຍດໂດຍສະເພາະໃນເວລາທີ່ພວກມັນຖືກລວມເຂົ້າກັບເງົາ, ດັ່ງນັ້ນສໍາລັບ "ການຂະຫຍາຍຕົວ, ການຂະຫຍາຍຕົວ, ຫມົດ," ຂ້າພະເຈົ້າໄດ້ເພີ່ມເສັ້ນເລືອດຕັນໃນ 3px ບາງໆໃສ່ເງົາ 1px ທີ່ເປົ່າຫວ່າງເພື່ອສ້າງຜົນກະທົບຂໍ້ຄວາມສາມມິຕິນີ້: ສີ: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
ສີສັ່ງ ການໃຊ້ text-stroke ບໍ່ໄດ້ໃຫ້ຜົນໄດ້ຮັບທີ່ຄາດໄວ້ສະເໝີໄປ, ໂດຍສະເພາະກັບຕົວໜັງສືບາງໆ ແລະ ເສັ້ນທີ່ໜາກວ່າ, ເພາະວ່າໂດຍຄ່າເລີ່ມຕົ້ນ browser ຈະແຕ້ມເສັ້ນທັບລົງໃສ່. ແຕ່ຫນ້າເສຍດາຍ, CSS ຍັງບໍ່ອະນຸຍາດໃຫ້ຂ້ອຍປັບການຈັດຕໍາແຫນ່ງ stroke ດັ່ງທີ່ຂ້ອຍມັກຈະເຮັດໃນ Sketch. ຢ່າງໃດກໍຕາມ, ຊັບສິນຄໍາສັ່ງສີມີມູນຄ່າທີ່ອະນຸຍາດໃຫ້ຂ້າພະເຈົ້າວາງ stroke ຫລັງ, ແທນທີ່ຈະຢູ່ທາງຫນ້າ, ຕື່ມຂໍ້ມູນໃສ່.
paint-order: stroke paints the stroke first, then the fill, ໃນຂະນະທີ່ paint-order: fill ເຮັດກົງກັນຂ້າມ: ສີ: #fbb999; paint-order: ຕື່ມ; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
ເສັ້ນເລືອດຕັນໃນທີ່ມີປະສິດທິພາບເຮັດໃຫ້ຕົວອັກສອນສາມາດອ່ານໄດ້, ເພີ່ມນ້ໍາຫນັກ, ແລະ - ເມື່ອປະສົມປະສານກັບເງົາແລະສີ - ເຮັດໃຫ້ຕົວຫນັງສືແປ. ພື້ນຫຼັງພາຍໃນຂໍ້ຄວາມ ບັດຊື່ກາຕູນຫຼາຍອັນເກີນກວ່າສີທີ່ຮາບພຽງໂດຍການເພີ່ມໂຄງສ້າງ, ຊັ້ນສີ, ຫຼືລາຍລະອຽດຮູບແຕ້ມໃສ່ຕົວອັກສອນ. ບາງຄັ້ງມັນເປັນໂຄງສ້າງ, ບາງຄັ້ງມັນອາດຈະເປັນສີທີ່ມີການປ່ຽນແປງສຽງອ່ອນໆ. ໃນເວັບ, ຂ້ອຍສາມາດສ້າງເອັບເຟັກນີ້ຄືນໃໝ່ໄດ້ໂດຍການໃຊ້ຮູບພື້ນຫຼັງ ຫຼື gradient ທາງຫຼັງຂໍ້ຄວາມ, ແລະຫຼັງຈາກນັ້ນຕັດມັນໃຫ້ເປັນຮູບຮ່າງຂອງຕົວອັກສອນ. ອັນນີ້ອາໄສຄຸນສົມບັດສອງອັນທີ່ເຮັດວຽກຮ່ວມກັນ: ຄລິບພື້ນຫຼັງ: ຂໍ້ຄວາມ ແລະຂໍ້ຄວາມຕື່ມສີ: ໂປ່ງໃສ.
ກ່ອນອື່ນ ໝົດ, ຂ້ອຍໃຊ້ພື້ນຫລັງຂອງຂໍ້ຄວາມ. ນີ້ສາມາດເປັນແຜນທີ່ບິດ ຫຼືຮູບ vector ຫຼື CSS gradient. ສໍາລັບຕົວຢ່າງນີ້ຈາກ Quick Draw McGraw ຕອນ "Baba Bait," ຂໍ້ຄວາມໃນຫົວຂໍ້ທີ່ມີການເຮັດໃຫ້ສີລະອຽດອ່ອນລົງເທິງລຸ່ມສຸດຈາກຊ້ໍາຫາແສງ: ພື້ນຫຼັງ: linear-gradient(0deg, #667b6a, #1d271a);
ຕໍ່ໄປ, ຂ້ອຍຕັດພື້ນຫລັງນັ້ນໃສ່ glyphs ແລະເຮັດໃຫ້ຂໍ້ຄວາມໂປ່ງໃສເພື່ອໃຫ້ພື້ນຫລັງສະແດງໃຫ້ເຫັນ: -webkit-background-clip: ຂໍ້ຄວາມ; -webkit-text-fill-color: ໂປ່ງໃສ;
ດ້ວຍພຽງແຕ່ສອງເສັ້ນນັ້ນ, ພື້ນຫຼັງບໍ່ໄດ້ຖືກທາສີຢູ່ເບື້ອງຫຼັງຕົວໜັງສືອີກຕໍ່ໄປ; ແທນທີ່ຈະ, ມັນໄດ້ຖືກທາສີພາຍໃນມັນ. ເຕັກນິກນີ້ເຮັດວຽກໄດ້ດີໂດຍສະເພາະເມື່ອປະສົມປະສານກັບເສັ້ນເລືອດຕັນໃນແລະເງົາ. ການຕັດສີເປັນສີໃຫ້ຕົວອັກສອນທີ່ມີສີ ແລະໂຄງສ້າງ, ເສັ້ນຂີດເຮັດໃຫ້ຂອບຂອງມັນຄົມຊັດ, ແລະເງົາຈະຍົກມັນຂຶ້ນຈາກພື້ນຫຼັງ. ຮ່ວມກັນ, ພວກເຂົາສ້າງຮູບແບບຂອງບັດຫົວຂໍ້ທີ່ແຕ້ມດ້ວຍມືໂດຍໃຊ້ CSS ເລັກນ້ອຍ. ດັ່ງທີ່ເຄີຍ, ທົດສອບຂໍ້ຄວາມທີ່ຖືກຕັດອອກຢ່າງລະມັດລະວັງ, ຍ້ອນວ່າບາງຄັ້ງ browser quirks ສາມາດສົ່ງຜົນກະທົບຕໍ່ເງົາແລະການສະແດງຜົນ. ການແບ່ງຂໍ້ຄວາມອອກເປັນລັກສະນະສ່ວນບຸກຄົນ ບາງຄັ້ງຂ້ອຍບໍ່ຢາກສະໄຕລ໌ຄໍາສັບຫຼືຫົວຂໍ້ທັງຫມົດ. ຂ້ອຍຕ້ອງການສະໄຕລ໌ຕົວອັກສອນແຕ່ລະຕົວ - ເພື່ອປັບຕົວລະຄອນເຂົ້າໃສ່, ໃຫ້ມີນ້ຳໜັກເພີ່ມເຕີມໜຶ່ງ glyph, ຫຼື ເຄື່ອນໄຫວຕົວອັກສອນສອງສາມຕົວຢ່າງເປັນອິດສະຫຼະ. ໃນ HTML ແລະ CSS ທໍາມະດາ, ມີພຽງແຕ່ວິທີຫນຶ່ງທີ່ເຊື່ອຖືໄດ້ທີ່ຈະເຮັດແນວນັ້ນ: ຫໍ່ແຕ່ລະຕົວອັກສອນໃນອົງປະກອບ span ຂອງຕົນເອງ. ຂ້ອຍສາມາດເຮັດສິ່ງນັ້ນໄດ້ດ້ວຍຕົນເອງ, ແຕ່ມັນຈະອ່ອນແອ, ຍາກທີ່ຈະຮັກສາ, ແລະຈະແຕກແຍກຢ່າງໄວວາເມື່ອການສໍາເນົາການປ່ຽນແປງ. ແທນທີ່ຈະ, ເມື່ອຂ້ອຍຕ້ອງການການຄວບຄຸມຕົວຫນັງສື, ຂ້ອຍໃຊ້ຫ້ອງສະຫມຸດແຍກຕົວຫນັງສືເຊັ່ນ splt.js (ເຖິງແມ່ນວ່າມີວິທີແກ້ໄຂອື່ນໆ). ນີ້ໃຊ້ເວລາເປັນຂໍ້ຄວາມແລະ wraps ຄໍາຫຼືຕົວອັກສອນອັດຕະໂນມັດ, ເຮັດໃຫ້ຂ້າພະເຈົ້າ hook ເພີ່ມເຕີມຕໍ່ກັບການເຄື່ອນໄຫວແລະຮູບແບບໂດຍບໍ່ມີການ messing ເຖິງ markup ຂອງຂ້າພະເຈົ້າ. ມັນເປັນວິທີການທີ່ຮັກສາ HTML ຂອງຂ້ອຍໃຫ້ສາມາດອ່ານໄດ້ແລະ semantic, ໃນຂະນະທີ່ໃຫ້ຂ້ອຍມີການຄວບຄຸມທີ່ມີຄວາມລະອຽດ, ຂ້ອຍຈໍາເປັນຕ້ອງສ້າງຕົວພິມທີ່ບໍ່ສະເຫມີກັນ, ລັກສະນະທີ່ເຈົ້າເຫັນຢູ່ໃນບັດຫົວຂໍ້ກາຕູນຄລາສສິກ. ຢ່າງໃດກໍຕາມ, ວິທີການນີ້ມາພ້ອມກັບຂໍ້ເຕືອນກ່ຽວກັບການເຂົ້າເຖິງ, ຍ້ອນວ່າຜູ້ອ່ານຫນ້າຈໍສ່ວນໃຫຍ່ອ່ານຂໍ້ຄວາມຕາມລໍາດັບ. ດັ່ງນັ້ນນີ້:
Hum Sweet Hum
...ອ່ານຕາມທີ່ເຈົ້າຄາດຫວັງ: Hum ຫວານ Hum
ແຕ່ນີ້:
H u m
…ສາມາດຖືກຕີຄວາມແຕກຕ່າງກັນໄປຕາມຕົວທ່ອງເວັບ ແລະຕົວອ່ານໜ້າຈໍ. ບາງຄົນຈະປະກອບຕົວອັກສອນແລະອ່ານຄໍາທີ່ຖືກຕ້ອງ. ຄົນອື່ນອາດຈະຢຸດຊົ່ວຄາວລະຫວ່າງຕົວອັກສອນ, ເຊິ່ງໃນກໍລະນີຮ້າຍແຮງທີ່ສຸດອາດຈະຟັງຄື: “H…” “U…” “M…”
ແຕ່ຫນ້າເສຍດາຍ, ບາງວິທີແກ້ໄຂການແບ່ງປັນບໍ່ໄດ້ໃຫ້ຜົນໄດ້ຮັບທີ່ສາມາດເຂົ້າເຖິງໄດ້ສະເຫມີ, ດັ່ງນັ້ນຂ້ອຍໄດ້ຂຽນຕົວແຍກຂໍ້ຄວາມຂອງຂ້ອຍເອງ, splinter.js, ເຊິ່ງປະຈຸບັນຢູ່ໃນເບຕ້າ. ການຫັນປ່ຽນຕົວອັກສອນສ່ວນບຸກຄົນ ເພື່ອເປີດໃຊ້ Toon Text Splitter ຂອງຂ້ອຍ, ຂ້ອຍເພີ່ມ data- attribute ກັບອົງປະກອບທີ່ຂ້ອຍຕ້ອງການແບ່ງປັນ:
Hum Sweet Hum
ທໍາອິດ, script ຂອງຂ້ອຍແຍກແຕ່ລະຄໍາອອກເປັນຕົວອັກສອນແຕ່ລະຄົນແລະຫໍ່ມັນຢູ່ໃນອົງປະກອບ span ທີ່ມີຄຸນລັກສະນະຂອງຫ້ອງຮຽນແລະ ARIA:
ຈາກນັ້ນສະຄຣິບເອົາເນື້ອຫາເບື້ອງຕົ້ນຂອງອົງປະກອບແຍກ ແລະເພີ່ມມັນເປັນຄຸນລັກສະນະ aria ເພື່ອຊ່ວຍຮັກສາການເຂົ້າເຖິງ:
ດ້ວຍຄຸນລັກສະນະຂອງຊັ້ນຮຽນເຫຼົ່ານັ້ນ, ຂ້ອຍສາມາດສະໄຕລ໌ຕົວອັກສອນສ່ວນຕົວຕາມທີ່ຂ້ອຍເລືອກ.
ຕົວຢ່າງ, ສໍາລັບ "Hum Sweet Hum," ຂ້ອຍຕ້ອງການເຮັດຊ້ໍາວິທີທີ່ຕົວອັກສອນຂອງມັນປ່ຽນໄປຈາກພື້ນຖານ. ຫຼັງຈາກໃຊ້ Toon Text Splitter ຂອງຂ້ອຍ, ຂ້ອຍໄດ້ນຳໃຊ້ສີ່ຄ່າການແປທີ່ແຕກຕ່າງກັນໂດຍໃຊ້ຕົວເລືອກ :nth-child ຫຼາຍໆອັນເພື່ອສ້າງແບບເຄິ່ງສຸ່ມ: /* ທີ 4, 8, 12... */ .toon-char:nth-child(4n) {ແປ: 0 -8px; } /* ທີ 1, 5, 9... */ .toon-char:nth-child(4n+1) { ແປພາສາ: 0 -4px; } /* ທີ 2, 6, 10... */ .toon-char:nth-child(4n+2) { ແປພາສາ: 0 4px; } /* ທີ 3, 7, 11... */ .toon-char:nth-child(4n+3) {ແປ: 0 8px; }
ແຕ່ການແປພາສາແມ່ນພຽງແຕ່ຄຸນສົມບັດຫນຶ່ງທີ່ຂ້ອຍສາມາດໃຊ້ເພື່ອປ່ຽນຂໍ້ຄວາມຂອງຂ້ອຍ.
ຂ້ອຍຍັງສາມາດຫມຸນຕົວລະຄອນສ່ວນບຸກຄົນເຫຼົ່ານັ້ນເພື່ອໃຫ້ເບິ່ງທີ່ວຸ່ນວາຍຫຼາຍຂຶ້ນ: /* ທີ 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* ທີ 1, 5, 9... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* ທີ 2, 6, 10... */ .toon-char:nth-child(4n+2) { rotate: 4deg; } /* ທີ 3, 7, 11... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
ແຕ່ການແປພາສາແມ່ນພຽງແຕ່ຄຸນສົມບັດຫນຶ່ງທີ່ຂ້ອຍສາມາດໃຊ້ເພື່ອປ່ຽນຂໍ້ຄວາມຂອງຂ້ອຍ. ຂ້ອຍຍັງສາມາດຫມຸນຕົວລະຄອນສ່ວນບຸກຄົນເຫຼົ່ານັ້ນເພື່ອໃຫ້ເບິ່ງທີ່ວຸ່ນວາຍຫຼາຍຂຶ້ນ: /* ທີ 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; }
/* ທີ 1, 5, 9... */ .toon-char:nth-child(4n+1) { rotate: -8deg; }
/* ທີ 2, 6, 10... */ .toon-char:nth-child(4n+2) { rotate: 4deg; }
/* ທີ 3, 7, 11... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
ແລະ, ແນ່ນອນ, ຂ້ອຍສາມາດເພີ່ມພາບເຄື່ອນໄຫວເພື່ອ jiggle ລັກສະນະເຫຼົ່ານັ້ນແລະນໍາເອົາຫົວຂໍ້ແບບຂໍ້ຄວາມຂອງຂ້ອຍກັບຊີວິດ. ທໍາອິດ, ຂ້ອຍສ້າງອະນິເມຊັນຄີເຟຣມທີ່ rotates ຕົວອັກສອນ:
@keyframes ຈີກໆ { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
ກ່ອນທີ່ຈະນໍາໃຊ້ມັນກັບອົງປະກອບ span ທີ່ສ້າງຂຶ້ນໂດຍ Toon Text Splitter ຂອງຂ້ອຍ: .toon-char { ພາບເຄື່ອນໄຫວ: jiggle 3s infinite ease-in-out; transform-origin: ກາງລຸ່ມ; }
ແລະສຸດທ້າຍ, ກໍານົດຈໍານວນການຫມຸນແລະການຊັກຊ້າກ່ອນທີ່ແຕ່ລະຕົວລະຄອນຈະເລີ່ມ jiggle: .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; }
.toon-char:nth-child(4n) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { animation-delay: 0.3s; } .toon-char:nth-child(4n+2) { animation-delay: 0.5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
ກອບຫນຶ່ງເພື່ອເຮັດໃຫ້ປະທັບໃຈ ນັກສິລະປິນຊື່ກາຕູນມີກອບຫນຶ່ງເພື່ອສ້າງຄວາມປະທັບໃຈ, ແລະການພິມຂອງພວກເຂົາມີຄວາມສໍາຄັນເທົ່າກັບວຽກງານສິລະປະທີ່ເຂົາເຈົ້າແຕ້ມ. ຄືກັນຢູ່ໃນເວັບ. ຫົວ ຫຼື ຮີໂຣທີ່ອອກແບບໄດ້ດີພື້ນທີ່ຕ້ອງການຄວາມຊັດເຈນ, ລັກສະນະ, ແລະຄວາມຫມັ້ນໃຈ - ບໍ່ແມ່ນພຽງແຕ່ຮູບພາບພື້ນຫລັງຄວາມກວ້າງເຕັມທີ່ຈືດໆ. ດ້ວຍຄຸນສົມບັດ CSS ທີ່ເລືອກຢ່າງລະມັດລະວັງຈຳນວນໜຶ່ງ - ເງົາ, ຈັງຫວະ, ພາບພື້ນຫຼັງທີ່ຖືກຕັດອອກ, ແລະບາງພາບເຄື່ອນໄຫວທີ່ຖືກຍັບຍັ້ງ - ພວກເຮົາສາມາດສ້າງຜົນກະທົບດຽວກັນນັ້ນຄືນມາໄດ້. ຂ້າພະເຈົ້າມັກບົດຄວາມ toon ບໍ່ແມ່ນຍ້ອນວ່າຂ້າພະເຈົ້າ nostalgic, ແຕ່ເນື່ອງຈາກວ່າການອອກແບບຂອງມັນແມ່ນຕັ້ງໃຈ. ເລືອກໂດຍເຈດຕະນາ, ແລະໃຫ້ຕົວພິມຕົວອັກສອນເລັກນ້ອຍເພີ່ມຄວາມດີໃຈໃຫ້ກັບການອອກແບບຂອງທ່ານ.
