CSS болон SVG анимэйшнүүдийн талаар чадах бүхнээ сурах шаардлагатай төслийг дуусгасны дараа би Smashing Animations болон "Сонгодог хүүхэлдэйн кинонууд орчин үеийн CSS-ийг хэрхэн урамшуулдаг вэ" сэдвээр энэхүү цувралыг бичиж эхэлсэн. Энэ жилийг дуусгахын тулд би та бүхэнд орчин үеийн CSS-ийг ашиглан Toon Titles-ийг маш их нөлөө үзүүлдэг элемент болох тэдгээрийн хэв маягийг бий болгохыг харуулахыг хүсч байна. Гарчиг Уран бүтээлийн дизайн 1920-иод оны 30-аад оны эхэн үеийн чимээгүй эрин үед киноны нэрийн хуудасны хэв маяг нь сэтгэлийн хөдөлгөөнийг бий болгож, дүр төрхийг бүрдүүлж, үзэгчдэд ямар төрлийн кино үзэхийг сануулдаг байв.
Хүүхэлдэйн киноны нэрийн картууд нь брэнд, сэтгэл санааны байдал, дүр зураглал зэргийг багтаасан бөгөөд бүгдийг нэг дор цуглуулсан. Эхний жилүүдэд томоохон студийн төсөв илүү их байсан үед эдгээр нэрийн хуудаснууд нь ихэвчлэн дүрсэлсэн, уран зурагтай байдаг.
Гэвч 1950-иад оны үед телевиз хөгжихөд төсөв буурч, Лоуренс "Арт" Гобл зэрэг уран бүтээлчдийн бүтээсэн картууд шинэ дүрслэлийн хэлийг нэвтрүүлж, илүү график, загварлаг, нарийн төвөгтэй болсон. Тайлбар: Лоуренс "Арт" Гобл бол зууны дунд үеийн Америкийн хүүхэлдэйн киноны голдуу үл тоомсорлодог баатруудын нэг юм. Тэрээр 1950, 1960-аад оны хамгийн нөлөө бүхий жилүүдэд Ханна-Барберад голчлон ажиллаж байжээ. Гобл дүрийн аниматор биш байсан. Түүний үүрэг бол уур амьсгалыг бий болгох явдал байсан тул тэрээр The Flintstones, Huckleberry Hound, Quick Draw McGraw, Yogi Bear-ийн орчин, мөн өнгө аясыг тодорхойлсон нээлтийн нэрийн картуудыг зохион бүтээсэн. Түүний нэрийн хуудас, лого давхардсан зургууд нь Ханна-Барберагийн дүр төрхийг тодорхойлоход тусалсан. Quick Draw McGraw, Yogi Bear зэрэг дүрүүдэд зориулсан Гоблийн уран бүтээл нь жижиг телевизийн дэлгэцэн дээр үр дүнтэй байсан. Тэрээр хүүхэлдэйн киноны зургийг хуулбарлахын оронд түүний мөн чанарыг агуулсан ганц, хүчтэй санааг ихэвчлэн дүрслэн харуулахад анхаарлаа төвлөрүүлжээ. "The Buzzin' Bear" кинонд Йоги нисдэг тэргээр эргэлдэнэ. Тэрээр гартаа гоёмсог сагс барин үсэрч, "Залхуурсан баавгай" кинонд "Айдас шагналын төлөө" киноныхоо гарчигтай Йоги гарчгийн бичвэрийг хайрцагласан байна.
Хөдөлгөөн багатай эсвэл огтхон ч найдахгүйгээр Гоблийн дан кадрууд сэтгэлийн хөдөлгөөнийг бий болгож, дүр зургийг гаргаж, түүхийг дүрслэх ёстой байв. Тэд үүнийг уран бүтээлд байнга нэгтгэдэг хавтгай өнгө, график хэлбэр, хэвлэх аргыг ашиглан хийсэн.
Вэб дээр ажилладаг дизайнеруудын хувьд toon гарчигууд нь брэндийн зан чанарыг хэрхэн илэрхийлэх, анхны сэтгэгдэл төрүүлэх, бүтээгдэхүүн эсвэл вэбсайтыг ашиглан хэн нэгний туршлагыг хэрхэн хүлээж авах талаар маш их зүйлийг зааж өгдөг. Бид уран бүтээлчдийн арга барилаас суралцаж, үр дүнтэй баннер, буух хуудасны гарчиг, тэр ч байтугай сайн загвартай дэлгэцийг бүтээх боломжтой. Toon Title Typography Хүүхэлдэйн киноны гарчгийн картууд нь төрлийг зураглалтай нэгтгэх нь толгой хэсэг эсвэл баатарт хэрэгтэй цохилтыг хэрхэн өгч байгааг харуулдаг. Цөөн хэдэн текст-сүүдэр, текст зураас болон хувиргах аргуудын тусламжтайгаар орчин үеийн CSS нь ижил энергийг ашиглах боломжийг танд олгоно.
Toon текстийн гарчиг үүсгэгч Энэ нийтлэлийг бичиж байхдаа би маш их дуртай хүүхэлдэйн киноны гарчигтай текст үүсгэх хэрэгсэлтэй байх нь ашигтай гэдгийг ойлгосон. Тиймээс би нэгийг хийсэн. My Toon Text Title Generator нь танд өнгө, зураас болон олон текстийн сүүдэртэй туршилт хийх боломжийг олгоно. Та будгийн дарааллыг тохируулж, үсгийн хоорондын зайг хэрэглэж, жишээ фонтоор текстээ урьдчилан харж, дараа нь үүсгэсэн CSS-г шууд санах ойдоо хуулж төсөлд ашиглах боломжтой. Toon Гарчиг CSS Та зүгээр л Toon Text Title Generator-ийн өгсөн CSS-г хуулж буулгаж болно. Гэхдээ энэ нь юу болохыг илүү нарийвчлан авч үзье. Текстийн сүүдэр Ажиги Доггигийн "Юк-Юк нугас" цувралын цайвар шар үсэг, арын дэвсгэрийг арилгаж, гүний хуурмаг байдлыг бий болгодог бараан, хатуу, офсет сүүдэртэй энэ гарчгийн төрлийг хараарай.
Текст-сүүдэр нь (1) хэвтээ ба (2) босоо офсет, (3) бүдэгрүүлэх, (4) хатуу эсвэл хагас тунгалаг өнгө гэсэн дөрвөн утгыг хүлээн зөвшөөрдөг гэдгийг та аль хэдийн мэдэж байгаа байх. Эдгээр офсет утгууд нь эерэг эсвэл сөрөг байж болох тул би "Юк-Юк нугас"-ыг доош болон баруун тийш татсан хатуу сүүдрийг ашиглан хуулбарлаж чадна: өнгө: #f7f76d; текст-сүүдэр: 5px 5px 0 #1e1904;
Нөгөөтэйгүүр, энэхүү "Pint Giant" гарчиг нь сөрөг хагас зөөлөн сүүдэрээрээ өөр мэдрэмж төрүүлдэг. өнгө: #c2a872; текст сүүдэр: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Нэмэлт гүн нэмж, илүү сонирхолтой эффект үүсгэхийн тулд би олон сүүдэрлэж болно. “Let’s Duck Out” киноны хувьд би дөрвөн сүүдрийг хослуулсан: эхнийх нь сөрөг хэвтээ офсет бүхий хатуу сүүдэр, текстийг арын дэвсгэрээс нь салгаж, дараа нь аажмаар зөөлөн сүүдрийг бүдгэрүүлэхийн тулд: өнгө: #6F4D80; текст сүүдэр: -5px5px 0 #260e1e, /* Сүүдэр 1 */ 0 0 15px #e9ce96, /* Сүүдэр 2 */ 0 0 30px #e9ce96, /* Сүүдэр 3 */ 0 0 30px #e9ce96; /* Сүүдэр 4 */
Эдгээр сүүдэрүүд нь текст-сүүдэр ашиглах нь зөвхөн гэрэлтүүлгийн эффект үүсгэх биш гэдгийг харуулж байгаа бөгөөд тэдгээр нь гоёл чимэглэлийн болон хувийн шинж чанарыг нэмж өгдөг. Текстийн цохилт Олон хүүхэлдэйн киноны гарчигтай картууд нь тод тоймтой үсгүүдийг агуулсан байдаг бөгөөд энэ нь тэднийг цаанаас нь онцгой болгодог. Би энэ эффектийг текст зураас ашиглан дахин үүсгэж болно. Удаан хугацааны туршид энэ өмчийг зөвхөн -webkit- угтвараар ашиглах боломжтой байсан ч орчин үеийн хөтчүүд дээр дэмжигдсэн гэсэн үг.
text-stroke нь хоёр шинж чанарын товчлол юм. Эхнийх нь текстийн зураасны өргөн нь тус тусдаа үсгүүдийн эргэн тойронд контур зурдаг бол хоёр дахь нь текстийн зураасны өнгө нь түүний өнгийг хянадаг. "Whatever Goes Pup" киноны хувьд би шар бичвэрт 4px цэнхэр зураас нэмсэн: өнгө: #eff0cd; -webkit-текст-харвалт: 4px #7890b5; текстийн харвалт: 4px #7890b5;
Цус харвалт нь сүүдэртэй хослуулсан тохиолдолд онцгой ач холбогдолтой байдаг тул "Өсөх, ургах, алга болох" киноны хувьд би энэ гурван хэмжээст текст эффектийг үүсгэхийн тулд бүдгэрүүлсэн 1px сүүдэрт нимгэн 3px зураас нэмсэн: өнгө: #fbb999; текст-сүүдэр: 3px 5px 1px #5160b1; -webkit-текст-харвалт: 3px #984336; текстийн харвалт: 3px #984336;
Будгийн захиалга Текстийн зураасыг ашиглах нь үргэлж хүлээгдэж буй үр дүнг өгдөггүй, ялангуяа нимгэн үсэг, бүдүүн зураастай, учир нь хөтөч анхдагч байдлаар бөглөх дээр зураас зурдаг. Харамсалтай нь, CSS нь Sketch дээр ихэвчлэн хийдэг шиг харвалтын байршлыг тохируулахыг зөвшөөрөхгүй хэвээр байна. Гэсэн хэдий ч, будагны дарааллын шинж чанар нь намайг дүүргэгчийн урд биш харин ард талд байрлуулах боломжийг олгодог үнэт зүйлстэй.
paint-order: stroke нь эхлээд зураасыг, дараа нь дүүргэлтийг буддаг, харин paint-order: fill нь эсрэгээр: өнгө: #fbb999; будагны дараалал: дүүргэх; текст-сүүдэр: 3px 5px 1px #5160b1; текст-цус харвалт-өнгө:#984336; текстийн зураасны өргөн: 3px;
Үр дүнтэй цус харвалт нь үсгүүдийг уншигдахуйц байлгаж, жин нэмдэг бөгөөд сүүдэр, будгийн дараалалтай хослуулсан тохиолдолд хавтгай текстийг бодитоор харуулах болно. Текст доторх дэвсгэр дэвсгэрүүд Олон хүүхэлдэйн киноны гарчгийн картууд нь үсгийн үсэгт бүтэц, градиент эсвэл зурагтай дэлгэрэнгүй мэдээллийг нэмснээр хавтгай өнгөнөөс давж гардаг. Заримдаа энэ нь бүтэц, зарим тохиолдолд өнгө аястай шилжилттэй градиент байж болно. Вэб дээр би текстийн ард дэвсгэр зураг эсвэл градиент ашиглан энэ эффектийг дахин үүсгэж, дараа нь үсгийн хэлбэрт оруулан хайчилж болно. Энэ нь хамт ажилладаг хоёр шинж чанарт тулгуурладаг: background-clip: text, text-fill-color: transparent.
Эхлээд би текстийн ард дэвсгэр зурдаг. Энэ нь битмап эсвэл вектор зураг эсвэл CSS градиент байж болно. McGraw-ийн Quick Draw цувралын "Baba Bait" цувралын жишээн дээр гарчгийн текст нь харанхуйгаас цайвар хүртэл нарийн дээд доод градиентийг агуулна. дэвсгэр: шугаман-градиент(0deg, #667b6a, #1d271a);
Дараа нь би тэр дэвсгэрийг глифт хайчилж, текстийг ил тод болгохын тулд дэвсгэр нь дараах байдлаар харагдах болно. -webkit-background-clip: текст; -webkit-text-fill-color: ил тод;
Зөвхөн эдгээр хоёр мөрийн тусламжтайгаар арын дэвсгэрийг текстийн ард зурахаа больсон; оронд нь дотор нь будсан байна. Энэ техник нь цус харвалт, сүүдэртэй хослуулсан тохиолдолд ялангуяа сайн ажилладаг. Тайруулсан градиент нь үсгийг өнгө, бүтэцтэй болгож, зураас нь ирмэгийг нь хурц байлгаж, сүүдэр нь түүнийг дэвсгэрээс дээшлүүлдэг. Тэд хамтдаа бага зэрэг CSS-ийг ашиглан гараар будсан гарчгийн картуудын давхраатай дүр төрхийг дахин бүтээдэг. Хөтөчийн хачирхалтай байдал нь заримдаа сүүдэр болон дүрслэлд нөлөөлж болзошгүй тул тайрч авсан текстийг үргэлж шалгаарай. Текстийг бие даасан тэмдэгт болгон хуваах Заримдаа би бүхэл бүтэн үг эсвэл гарчгийг хэвлэхийг хүсдэггүй. Би үсгүүдийг тус тусад нь хэвлэхийг хүсч байна - дүрийг байранд нь оруулах, нэг глифт нэмэлт жин өгөх эсвэл хэд хэдэн үсгийг бие даан дүрслэх. Энгийн HTML болон CSS дээр үүнийг хийх цорын ганц найдвартай арга байдаг: тэмдэгт бүрийг өөрийн span элементээр боож өгнө. Би үүнийг гараар хийж чадна, гэхдээ энэ нь хэврэг, засвар үйлчилгээ хийхэд хэцүү байх бөгөөд хуулбар өөрчлөгдөхөд хурдан нурах болно. Үүний оронд үсэг тус бүрийг хянах шаардлагатай үед би splt.js гэх мэт текст хуваах санг ашигладаг (хэдийгээр бусад шийдлүүд байдаг). Энэ нь текстийн зангилаа авч, автоматаар үг эсвэл тэмдэгтүүдийг ороож, тэмдэглэгээнд саад учруулахгүйгээр хөдөлгөөн хийх, хэв маягийг өөрчлөх нэмэлт дэгээ өгдөг. Энэ нь миний HTML-г уншигдахуйц, утга санаатай байлгах арга барил бөгөөд надад сонгодог хүүхэлдэйн киноны гарчгийн картуудад харагддаг тэгш бус, өвөрмөц хэв маягийг дахин бүтээхэд хэрэгтэй нарийн хяналтыг өгдөг. Гэсэн хэдий ч энэ арга нь хамт ирдэгИхэнх дэлгэц уншигчид текстийн цэгүүдийг дарааллаар нь уншдаг тул хүртээмжтэй байдлын анхааруулга. Тэгэхээр энэ:
Hum Sweet Hum
… таны бодож байснаар уншина: Хум Амтат Хум
Гэхдээ энэ нь:
H у м
… хөтөч болон дэлгэц уншигчаас хамааран өөр өөрөөр тайлбарлаж болно. Зарим нь үсгүүдийг хооронд нь холбож, үгсийг зөв унших болно. Бусад нь үсгүүдийн хооронд түр зогсоож магадгүй бөгөөд энэ нь хамгийн муу тохиолдолд дараах байдалтай сонсогдож магадгүй юм. “H…” “U…” “M…”
Харамсалтай нь, зарим хуваах шийдлүүд нь үргэлж хүртээмжтэй үр дүнг өгдөггүй тул би өөрийн текст задлагч splinter.js-ийг бичсэн бөгөөд энэ нь одоогоор бета хувилбар юм. Хувь хүний үсгийг хувиргах Toon Text Splitter-ээ идэвхжүүлэхийн тулд би хуваахыг хүсэж буй элементдээ өгөгдлийн атрибут нэмнэ:
Хамтлаг Хум
Нэгдүгээрт, миний скрипт үг бүрийг тус тусад нь үсэг болгон салгаж, анги болон ARIA шинж чанаруудыг ашиглан span элементэд ороосон:
Дараа нь скрипт нь хуваах элементийн анхны агуулгыг авч, хүртээмжтэй байлгахад туслахын тулд ариа шинж чанар болгон нэмдэг:
Эдгээр ангийн шинж чанаруудыг ашигласнаар би хувийн тэмдэгтүүдийг хүссэнээрээ загварчилж чадна.
Жишээлбэл, "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; }
Гэхдээ орчуулга бол миний toon текстийг хувиргахад ашиглах цорын ганц өмч юм.
Би мөн эдгээр дүрүүдийг илүү эмх замбараагүй болгохын тулд эргүүлж болно: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { эргүүлэх: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { эргүүлэх: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { эргүүлэх: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { эргүүлэх: 8deg; }
Гэхдээ орчуулга бол миний toon текстийг хувиргахад ашиглах цорын ганц өмч юм. Би мөн эдгээр дүрүүдийг илүү эмх замбараагүй болгохын тулд эргүүлж болно: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { эргүүлэх: -4 градус; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { эргүүлэх: -8 градус; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { эргүүлэх: 4 градус; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { эргүүлэх: 8 градус; }
Мэдээжийн хэрэг, би эдгээр дүрүүдийг эргүүлэхийн тулд хөдөлгөөнт дүрс нэмж, текстийн хэв маягийн гарчигуудыг амилуулж чадна. Эхлээд би дүрүүдийг эргүүлдэг түлхүүр фрэймийн хөдөлгөөнт дүрс үүсгэсэн:
@keyframes jiggle { 0%, 100% { хувиргах: эргүүлэх(var(--суурь-эргэлт, 0deg)); } 25% { хувиргах: эргүүлэх(calc(var(--суурь-эргэлт, 0deg) + 3deg)); } 50% { хувиргах: эргүүлэх(calc(var(--суурь-эргэлт, 0deg) - 2deg)); } 75% { хувиргах: эргүүлэх(calc(var(--суурь-эргэлт, 0deg) + 1deg)); } }
Үүнийг миний Toon Text Splitter-ийн үүсгэсэн span элементүүдэд хэрэглэхээс өмнө: .toon-char { хөдөлгөөнт дүрс: jiggle 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; }
.toon-char:nth-child(4n) { хөдөлгөөнт саатал: 0.1s; } .toon-char:nth-child(4n+1) { хөдөлгөөнт саатал: 0.3с; } .toon-char:nth-child(4n+2) { хөдөлгөөнт саатал: 0.5с; } .toon-char:nth-child(4n+3) { хөдөлгөөнт саатал: 0.7с; }
Сэтгэгдэл төрүүлэх нэг жааз Хүүхэлдэйн киноны уран бүтээлчид сэтгэгдэл төрүүлэхийн тулд нэг жаазтай байсан бөгөөд тэдний хэвлэмэл зураг нь зурсан урлагийн бүтээлээс дутахгүй чухал байв. Вэб дээр ч мөн адил. Сайн зохион бүтээсэн толгой эсвэл баатарТалбайд тодорхой байдал, зан чанар, өөртөө итгэх итгэл хэрэгтэй - зүгээр л бүдгэрсэн арын дэвсгэр зураг биш. Хэд хэдэн анхааралтай сонгосон CSS шинж чанарууд - сүүдэр, зураас, тайрсан дэвсгэр болон зарим хязгаарлагдмал хөдөлгөөнт дүрс - бид ижил нөлөөг дахин үүсгэж чадна. Би дурсаж байгаадаа биш, харин санаатай дизайнтай учраас toon текстэд дуртай. Санаатайгаар сонголт хийж, бага зэрэг тоон бичвэрийн хэв маягийг таны загварт цоолтуурын оруулаарай.
