CSS һәм SVG анимацияләре турында кулдан килгәннең барысын да өйрәнүне таләп иткән проектны тәмамлагач, мин анимацияләрне җимерү һәм "Классик мультфильмнар хәзерге CSS-ны ничек рухландыра" турында бу серияне яза башладым. Быел әйләнеп кайту өчен, мин сезгә хәзерге CSS-ны ничек кулланырга икәнен күрсәтәсем килә, Тун исемнәрен шулкадәр тәэсирле итә торган элементны булдыру өчен: аларның типографиясе. Титул сәнгате дизайны 1920-нче еллар һәм 30-нчы еллар башындагы тынсыз чорда фильмның титул карточкасының типографиясе кәеф тудырды, күренеш куйды һәм тамашачыларга алар өчен түләгән фильм төрен искә төшерде.
Мультфильм титул карточкалары шулай ук брендинг, кәеф, сәхнә көйләүләре иде, барысы да берсенә әйләнде. Беренче елларда, зур студия бюджетлары зуррак булганда, бу исем карточкалары еш кына иллюстратив һәм рәсемле иде.
Ләкин 1950-нче елларда телевидение көчәеп киткәч, бюджетлар төште, һәм Лоренс "Сәнгать" Гобле кебек рәссамнар ясаган карточкалар яңа визуаль тел кабул иттеләр, график, стилизацияләнгән һәм катлаулырак булдылар. Искәрмә: Лоуренс "Сәнгать" Гобле - урта гасыр Америка анимациясенең еш игътибарсыз калган геройларының берсе. Ул беренче чиратта 1950-60 нчы елларның иң тәэсирле елларында Ханна-Барбера өчен эшләде. Гобль персонаж аниматоры түгел иде. Аның роле атмосфера тудыру иде, шуңа күрә ул Флинтстонс, Хаклберри Хаунд, Тиз тарту МакГроу һәм Йоги Аю өчен мохит булдырды, шулай ук тон куйган карточкалар. Аның титул карточкалары, логотип белән капланган картиналар, Ханна-Барбераның иконик күренешен билгеләргә булышты. Quick Draw McGraw һәм Yogi Bear кебек персонажлар өчен Гоблның сәнгате кечерәк телевизор экраннарында эффектив булды. Мультфильмнан һаман да кабатлау урынына, ул бер, көчле идея тәкъдим итүгә игътибар итте - еш кына силуэтта - аның асылын яулап алган. "Бузин" аюында Йоги вертолетта шаулый. Ул читкә китә, кулында пик-ник кәрзин, "Пикникта аю", һәм "Бүләк белән көрәшү өчен" Йоги исем текстын ята.
Аз гына таянырга яки хәрәкәтләнергә тиеш түгел, Гоблның бер рамкалары кәеф тудырырга, сәхнә куярга һәм хикәяне сурәтләргә тиеш иде. Алар моны яссы төсләр, график формалар, сәнгать әсәрләренә еш интеграцияләнгән типография ярдәмендә эшләделәр.
Вебда эшләүче дизайнерлар буларак, тон исемнәре безгә бренд шәхесен ничек җиткерергә, беренче тәэсир ясарга, продукт яки вебсайт кулланып кемнеңдер тәҗрибәсенә өметләр куярга мөмкин. Без рәссамнарның эффектив баннерлар, десант битләренең башлыкларын, хәтта яхшы ол модалы склад экраннарын булдыру ысулларыннан өйрәнә алабыз. Тун исеме типографиясе Мультфильм исеме карточкалары типны сурәтләү белән берләштерү башны яки герой ихтыяҗын ничек китерә икәнен күрсәтә. Текст-күләгә, текст сызу, үзгәртү хәйләләре белән заманча CSS сезгә шул ук энергиягә керергә мөмкинлек бирә.
Тун текст исеме генераторы Бу мәкаләне язып, мин бик яраткан мультфильм исемнәре кебек стильдә текст ясау коралы булу файдалы булуын аңладым. Шулай итеп мин ясадым. Минем Тон Титул Генераторы төсләр, инсультлар һәм берничә текст күләгәсе белән эксперимент ясарга мөмкинлек бирә. Сез буяу тәртибен көйли аласыз, хәреф араларын куллана аласыз, шрифтларны сайлап текстта алдан карый аласыз, аннары проектта куллану өчен ясалган CSS-ны туры буферга күчерә аласыз. Тун исеме CSS Сез Toon Text Title Generator тәкъдим иткән CSS-ны күчереп яза аласыз. Ләкин аның нәрсә эшләгәненә игътибар итик. Текст күләгәсе Бу исемдәге төргә карагыз, Аджи Догги "Yukк-Dр үрдәк" эпизодыннан, аның сары сары хәрефләре һәм кара, каты, офсет күләгәсе аны фоннан күтәрә һәм тирәнлек иллюзиясен тудыра.
Сез, мөгаен, текст күләгәсенең дүрт кыйммәтне кабул итүен беләсездер: (1) горизонталь һәм (2) вертикаль офсетлар, (3) төссезлек һәм (4) каты яки ярым үтә күренмәле төс. Бу офсет кыйммәтләре уңай яки тискәре булырга мөмкин, шуңа күрә мин “Yukк-Dр үрдәк” не каты күләгә белән аска һәм уңга күчерә алам: төс: # 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 * /
Бу күләгәләр шуны күрсәтә: текст-күләгә куллану яктырту эффектларын булдыру гына түгел, чөнки алар шулай ук декоратив һәм шәхес өсти ала. Текст сугу Күпчелек мультфильм титул карточкаларында калын сызык булган хәрефләр бар, бу аларны фоннан аерып тора. Мин бу эффектны текст-инсульт ярдәмендә ясый алам. Озак вакыт бу милек -webkit-префикс аша гына булган, ләкин бу хәзерге заман браузерларында ярдәм итә дигән сүз.
текст-инсульт - ике үзенчәлек өчен стенограмма. Беренчесе, текст-инсульт киңлеге, аерым хәрефләр тирәсендә контур ясый, икенчесе, текст-инсульт-төс, аның төсен контрольдә тота. "Нәрсә барса," өчен мин сары текстка 4px зәңгәр инсульт өстәдем: төс: # eff0cd; -webkit-text-stroke: 4px # 7890b5; текст-инсульт: 4px # 7890b5;
Инсультлар күләгәләр белән берләшкәндә аеруча файдалы булырга мөмкин, шуңа күрә "owingсү, үсә, бетте" өчен, мин бу өч үлчәмле текст эффектын булдыру өчен, 1px күләгәсенә нечкә 3px инсульт өстәдем: төс: # fbb999; текст-күләгә: 3px 5px 1px # 5160b1; -webkit-text-stroke: 3px # 984336; текст-инсульт: 3px # 984336;
Буяу заказы Текстны куллану һәрвакыт көтелгән нәтиҗәне китерми, аеруча нечкә хәрефләр һәм калынрак сугулар белән, чөнки килешү буенча браузер тутыру өстендә инсульт ясый. Кызганычка каршы, CSS миңа әле дә эскиздагы кебек инсульт урнаштыруны көйләргә рөхсәт итми. Ләкин, буяу-заказ милегенең кыйммәтләре бар, бу миңа инсультны тутыру алдына түгел, ә артка куярга мөмкинлек бирә.
буяу-заказ: инсульт башта инсультны буяды, аннары тутыру, ә буяу-заказ: тутыру киресен ясый: төс: # fbb999; буяу-заказ: тутыру; текст-күләгә: 3px 5px 1px # 5160b1; text-stroke-color: # 984336; текст-инсульт-киңлек: 3px;
Эффектив инсульт хәрефләрне укырлык итеп саклый, авырлык өсти, һәм - күләгәләр һәм буяу тәртибе белән берләшкәндә - яссы текстның реаль булуын бирә. Текст эчендәге фон Күпчелек мультфильм исем карточкалары текстка, градиентларга яки хәрефләргә иллюстрацияләнгән детальләр өстәп яссы төсләрдән артып китәләр. Кайвакыт бу текстура, бүтән вакытта нечкә тональ смена белән градиент булырга мөмкин. Вебда мин бу эффектны текст артындагы фон яки градиент ярдәмендә ясый алам, аннары аны хәрефләр формасына кысып. Бу бергә эшләүче ике үзенчәлеккә таяна: фон-клип: текст һәм текст-тутыру төсе: үтә күренмәле.
Башта мин текст артында фон кулланам. Бу битма картасы яки вектор рәсеме яки CSS градиенты булырга мөмкин. Бу мисал өчен Quick Draw McGraw эпизодыннан "Баба Байт", исем текстында караңгыдан яктылыкка нечкә өстән - аскы градиент керә: фон: сызыклы-градиент (0дег, 66 667б6а, # 1д271а);
Алга таба, мин бу фонны глифларга төшерәм һәм текстны ачык итеп ясыйм, шуңа күрә фон күрсәтә: -webkit-background-clip: текст; -webkit-text-fill-color: ачык;
Шул ике юл белән генә, текст текст артына буялмый; киресенчә, аның эчендә буялган. Бу ысул инсульт һәм күләгә белән берләшкәндә аеруча яхшы эшли. Киселгән градиент хәрефне төс һәм текстура белән тәэмин итә, инсульт аның кырларын кискен саклый, күләгә аны фоннан күтәрә. Бергәләп, алар кул белән буялган исем карточкаларының катлаулы кыяфәтен ясыйлар, бераз CSSдан башка бернәрсә дә кулланмыйлар. Alwaysәрвакыттагыча, киселгән текстны җентекләп сынап карагыз, чөнки браузерның кызыксынулары кайвакыт күләгәләргә һәм рендерингка тәэсир итә ала. Текстны индивидуаль символларга бүлү Кайвакыт мин тулы сүз яки башлам ясарга теләмим. Мин аерым хәрефләр ясарга телим - персонажны урынга куярга, бер глифка өстәмә авырлык бирергә, яки берничә хәрефне мөстәкыйль җанландырырга телим. Гади HTML һәм CSSда моның бер генә ышанычлы ысулы бар: һәр символны үз элементына төреп. Мин моны кул белән эшли алыр идем, ләкин бу зәгыйфь, саклау авыр, һәм күчермә үзгәргәндә тиз таркалыр. Моның урынына, миңа хәреф белән идарә итү кирәк булганда, мин splt.js кебек текстны бүлүче китапханә кулланам (башка карарлар булса да). Бу текст төенен ала һәм автоматик рәвештә сүзләрне яки символларны урап ала, миңа билгеләрне бозмыйча җанландыру һәм стиль өчен өстәмә калькалар бирә. Бу минем HTML-ны укырлык һәм семантик саклый торган ысул, шул ук вакытта миңа классик мультфильм исем карточкаларында күргән тигез булмаган, характерлы типографияне яңадан ясарга кирәк. Ләкин бу ысул белән киләЭкран укучыларның күбесе текст төеннәрен тәртиптә укыйлар. Шулай итеп:
Хум Татлы Хум
... сез көткәнчә укый: Хум Татлы Хум
Ләкин бу:
H u m
... браузерга һәм экран укучысына карап төрлечә аңлатырга мөмкин. Кайберәүләр хәрефләрне берләштерәчәкләр һәм сүзләрне дөрес укыйлар. Башкалар хәрефләр арасында пауза ясарга мөмкин, бу иң начар сценарийда булырга мөмкин: “H…” “U…” “M…”
Кызганычка каршы, кайбер бүлү чишелешләре һәрвакыт мөмкин булган нәтиҗәләр китерми, шуңа күрә мин үземнең текст splitter, splinter.js яздым, ул хәзерге вакытта бета. Индивидуаль хатларны үзгәртү Toon Text Splitter-ны активлаштыру өчен, мин бүлергә теләгән элементка мәгълүмат-атрибут өстим:
Hum Sweet Hum
Беренчедән, минем сценарий һәр сүзне аерым хәрефләргә аера һәм класс һәм ARIA атрибутлары белән спан элементына төрә:
Аннары сценарий бүленгән элементның башлангыч эчтәлеген ала һәм аны ария атрибуты итеп өсти:
Бу класс атрибутлары кулланылгач, мин үзем сайлаганча аерым персонажларны ясый алам.
Мәсәлән, "Hum Sweet Hum" өчен, мин аның хәрефләренең төп нигездән ничек күчүен кабатларга телим. Toon Text Splitter-ны кулланганнан соң, мин берничә төрле тәрҗемә кыйммәтен кулландым: n-баланы сайлап алучылар ярым очраклы күренеш булдыру өчен: / * 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) {әйләнү: -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дег; }
Ләкин тәрҗемә итү - минем текст текстын үзгәртү өчен куллана торган бер мөлкәт. Мин тагын да хаосик күренеш өчен шул персонажларны әйләндерә алыр идем: / * 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 (- база-әйләнү, 0дег)); } 25% {трансформация: әйләндерү (кальк (вар (- база-әйләнү, 0дег) + 3дег)); } 50% {трансформация: әйләндерү (кальк (вар (- база-әйләнү, 0дег) - 2дег)); } 75% {трансформация: әйләндерү (кальк (вар (- база-әйләнү, 0дег) + 1дег)); } }
Аны Toon Text Splitter ясаган спан элементларына кулланганчы: .toon-char { анимация: 3с чиксез җиңеллек; трансформация-чыгышы: үзәк асты; }
Finallyәм, ниһаять, әйләнү күләмен һәм һәр персонаж кычкыра башлаганчы тоткарлау: .toon-char: nth-child (4n) {- база-әйләнү: -2дег; } .toon-char: nth-child (4n + 1) {- база-әйләнү: -4дег; } .toon-char: nth-child (4n + 2) {- база-әйләнү: 2дег; } .toon-char: nth-child (4n + 3) {- база-әйләнү: 4дег; }
.toon-char: nth-child (4n) {анимация-тоткарлау: 0,1с; } .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 үзлекләре белән - күләгәләр, инсультлар, киселгән фон һәм кайбер тыелган анимация белән - без шул ук тәэсирне ясый алабыз. Мин тон текстын ностальгия булганга түгел, ә дизайны белә торып яратам. Белемле сайлау ясагыз, һәм бераз тон текстографиясе сезнең дизайннарыгызга шакмак өстәргә рөхсәт итегез.
