Ман ба наздикӣ графикаи мутаҳаррикро дар вебсайти худ бо мавзӯи нав ва як гурӯҳи қаҳрамонҳои пешрав навсозӣ кардам ва усулҳои зиёдеро, ки дар ин силсила мубодила кардам, дар амал татбиқ кардам. Якчанд аниматсияҳои ман ҳангоми муоширати касе бо онҳо ё дар вақтҳои гуногуни рӯз намуди зоҳириро тағир медиҳанд.
Рангҳо дар графикаи болои саҳифаҳои блоги ман ҳар рӯз аз субҳ то шом иваз мешаванд. Сипас, режими барф мавҷуд аст, ки рангҳои хунук ва мавзӯи зимистонро бо хушмуомилагӣ бо қабати қабати ва режими омехта илова мекунад.
Ҳангоми кор кардан дар ин, ман ҳайрон шудам, ки оё арзишҳои ранги нисбии CSS метавонанд ба ман назорати бештар дода, инчунин равандро содда кунанд. Эзоҳ: Дар ин дарс, ман ба арзишҳои нисбии ранг ва фазои ранги OKLCH барои графика ва аниматсияҳои мавзӯъ тамаркуз хоҳам кард. Агар шумо хоҳед, ки ба рангҳои нисбӣ чуқуртар ғарқ шавед, Аҳмад Шадид дастури олиҷаноби интерактивӣ эҷод кардааст. Дар мавриди фазои рангӣ, gamuts ва OKLCH, Ҷефф Грэм дар бораи онҳо навишт.
Истифодаи такрории элементҳо муҳим буд. Заминаҳо то ҳадди имкон дубора истифода мешуданд, бо масштабҳо ва қабатҳо барои сохтани саҳнаҳои нав аз як асари санъат кӯмак мекунанд. Он аз зарурат ба вуҷуд омадааст, аммо он инчунин фикр карданро аз рӯи силсилаҳо ташвиқ мекард, на саҳнаҳои алоҳида. Мушкилот бо дастӣ навсозии палитраҳои ранг Биёед рост ба даъвати ман биравем. Дар унвонҳои Toon ба ин монанд - бар асоси эпизоди Йоги Хирс дар соли 1959 "Хирс-хайр" - ва умуман кори ман, палитраҳо бо якчанд рангҳои интихобшуда маҳдуданд.
Ман сояҳо ва тобишҳоро аз он чизе, ки ман "таҳкурсӣ" меномам, эҷод мекунам, то палитраро бидуни илова кардани рангҳои бештар васеъ кунам.
Дар Sketch, ман дар фазои ранги HSL кор мекунам, аз ин рӯ ин раванд афзоиш ё кам кардани арзиши равшании ранги таҳкурсии маро дар бар мегирад. Ростқавлона, ин кори душвор нест - аммо интихоби ранги дигари таҳкурсӣ эҷоди маҷмӯи нави сояҳо ва рангҳоро талаб мекунад. Ин корро дастӣ ва такроран иҷро кардан, зуд меҳнатталаб мешавад.
Ман дар бораи HSL - H (ранг), S (сершавӣ) ва L (равшанӣ) - фазои рангро зикр кардам, аммо ин танҳо яке аз роҳҳои тавсифи ранг аст. RGB - R (сурх), G (сабз), B (кабуд) - эҳтимол аз ҳама шинос аст, ҳадди аққал дар шакли шонздаҳӣ. Инчунин LAB - L (сабукӣ), A (сабз-сурх), B (кабуд-зард) - ва навтар, аммо ҳоло ба таври васеъ дастгирӣшаванда LCH - L (равшанӣ), C (chroma), H (ранг) - модел дар шакли OKLCH вуҷуд дорад. Бо LCH - махсусан OKLCH дар CSS - ман метавонам арзиши равшании ранги таҳкурсии худро танзим кунам.
Ё ман метавонам ранги онро тағир диҳам. Chroma LCH ва Saturation HSL ҳарду шиддат ё сарвати рангро тавсиф мекунанд, аммо онҳо инро бо тарзҳои гуногун мекунанд. LCH ба ман доираи васеътар ва омезиши пешгӯишавандаи байни рангҳоро медиҳад.
Ман инчунин метавонам рангро тағир дода, палитраи рангҳоро эҷод кунам, ки якхела равшанӣ ва арзишҳои хрома доранд. Дар HSL ва LCH, спектри ранг аз сурх оғоз мешавад, аз сабз ва кабуд мегузарад ва ба сурх бармегардад.
Чаро OKLCH тағир ёфт, ки чӣ гуна ман дар бораи ранг фикр мекунам Дастгирии браузер барои фазои рангии OKLCH ҳоло васеъ паҳн шудааст, ҳатто агар асбобҳои тарроҳӣ, аз ҷумла Sketch - ба даст наомадаанд. Хушбахтона, ин набояд шуморо аз истифодаи OKLCH боздорад. Браузерҳо бо хурсандӣ арзишҳои Hex, HSL, LAB ва RGB -ро ба OKLCH барои шумо табдил медиҳанд. Шумо метавонед амволи фармоишии CSS-ро бо ранги таҳкурсӣ дар ҳама гуна фазо муайян кунед, аз ҷумла Hex: /* Ранги асос */ --found: #5accd6;
Ҳама гуна рангҳои аз он гирифташуда ба таври худкор ба OKLCH табдил дода мешаванд: --foundation-light: oklch(аз var(--foundation) [...]; } --foundation-mid: oklch (аз var(--foundation) [...]; } --foundation-dark: oklch(аз var(--foundation) [...]; }
Ранги нисбӣ ҳамчун системаи тарроҳӣ Дар бораи рангҳои нисбӣ чунин фикр кунед: "Ин рангро бигиред, онро тағир диҳед ва баъд ба ман натиҷа диҳед." Ду роҳи танзими ранг вуҷуд дорад: тағироти мутлақ ва тағироти мутаносиб. Онҳо дар код ба ҳам монанданд, аммо вақте ки шумо иваз кардани рангҳои таҳкурсиро оғоз мекунед, хеле фарқ мекунанд. Фаҳмидани ин фарқият он чизест, ки метавонад бо истифода аз ранги нисбӣ ба система табдил ёбад. /* Ранги асос */ --found: #5accd6;
Масалан, арзиши равшании ранги таҳкурсии ман 0,7837 аст, дар ҳоле ки версияи ториктар арзиши 0,5837 дорад. Барои ҳисоб кардани тафовут, ман арзиши пастро аз арзиши баландтар тарҳ мекунам ва натиҷаро бо истифода аз функсияи calc() татбиқ мекунам: --foundation-торик: oklch(аз var(--foundation) calc(l - 0,20) c h);
Барои ноил шудан ба ранги сабуктар, ман ба ҷои ин фарқиятро илова мекунам: --foundation-light: oklch(аз var(--foundation) calc(l+0,10)c h);
Хромаислоҳот ҳамон равандро пайгирӣ мекунанд. Барои кам кардани шиддати ранги таҳкурсии ман аз 0,1035 то 0,0035, ман як арзишро аз дигараш хориҷ мекунам: oklch(аз var(--foundation) l calc(c - 0,10) h);
Барои сохтани палитраи рангҳо, ман фарқияти байни арзиши рангии ранги таҳкурсии ман (200) ва ранги нави худро (260) ҳисоб мекунам: oklch(аз var(--foundation) l c calc(h + 60));
Ин ҳисобҳо мутлақанд. Вақте ки ман маблағи муқарраршударо хориҷ мекунам, ман ба таври муассир мегӯям: "Ҳамеша ин қадар кам кунед." Ҳамин чиз ҳангоми илова кардани арзишҳои собит амал мекунад: ҳисоб (c - 0,10) ҳисоб (c + 0,10)
Ман ҳудуди ин равишро дар роҳи душвор омӯхтам. Вақте ки ман ба тарҳ кардани арзишҳои собит хрома такя кардам, пас аз тағир додани таҳкурсӣ рангҳо ба хокистарӣ афтоданд. Палитра, ки барои як ранг кор мекард, барои ранги дигар ҷудо шуд. Зарбкунӣ дигар хел рафтор мекунад. Вақте ки ман хромаро зиёд мекунам, ман ба браузер мегӯям: "Шиддатнокии ин рангро ба андозаи таносуб кам кунед." Муносибати байни рангҳо, ҳатто вақте ки таҳкурсӣ тағир меёбад, боқӣ мемонад: ҳисоб (c * 0,10)
Ман онро кӯчонед, миқёс кунед, онро гардиш кунед
Ҳаракати сабукӣ (илова кардан ё кам кардан), Миқёси хрома (зарб кардан), Рангро гардиш кунед (дараҷаҳоро илова ё кам кунед).
Ман хромаро миқёс мекунам, зеро ман мехоҳам тағироти шиддат ба ранги асосӣ мутаносиб монад. Муносибатҳои рангҳо гардиш мебошанд, аз ин рӯ зиёд кардани ранг маъно надорад. Сабукӣ дарккунанда ва мутлақ аст - зиёд кардани он аксар вақт натиҷаҳои аҷиб меорад.
Аз як ранг то тамоми мавзӯъ Ранги нисбӣ ба ман имкон медиҳад, ки ранги таҳкурсиро муайян кунам ва аз он ҳама рангҳои дигареро, ки ба ман лозим аст - пуркунӣ, зарбаҳо, градиентҳо, сояҳо - тавлид кунам. Дар он вақт, ранг палитра буданро қатъ мекунад ва ба система табдил меёбад. Тасвирҳои SVG майл доранд, ки ҳамон чанд рангро дар пуркунӣ, зарбаҳо ва градиентҳо дубора истифода баранд. Ранги нисбӣ ба шумо имкон медиҳад, ки ин муносибатҳоро як маротиба муайян кунед ва онҳоро дар ҳама ҷо дубора истифода баред - ба мисли аниматорҳо заминаҳоро барои эҷоди саҳнаҳои нав истифода кардаанд.
Ранги таҳкурсиро як маротиба иваз кунед ва ҳар як ранги ҳосилшуда ба таври худкор бидуни аз нав ҳисоб кардани чизе бо даст навсозӣ мешавад. Берун аз графикаи аниматсионӣ, ман метавонам ҳамин равишро барои муайян кардани рангҳо барои ҳолати унсурҳои интерактивӣ, ба монанди тугмаҳо ва истинодҳо истифода барам. Ранги таҳкурсие, ки ман дар сарлавҳаи Toon "Lullabye-Bye Bear" истифода кардам, кабуди кабуд аст. Замина як градиенти радиалӣ байни таҳкурсии ман ва версияи ториктар аст.
Барои эҷод кардани версияҳои алтернативӣ бо табъи комилан гуногун, ман танҳо бояд ранги таҳкурсиро тағир диҳам: --found: #5accd6; --grad-end: var(--foundation); --grad-start: oklch (аз var(--foundation) calc(l - 0,2357) calc(c * 0,833) h);
Барои пайваст кардани ин хосиятҳои фармоишӣ ба градиенти SVG-и худ бе такрор кардани арзишҳои ранг, ман арзишҳои сахт-рамзи қатъии рангро бо услубҳои дохилӣ иваз кардам:
Баъдан, ман бояд боварӣ ҳосил кунам, ки Text Text-и ман ҳамеша бо ҳар ранги таҳкурсии интихобкардаам муқобилат кунад. Гардиши ранги 180 дараҷа ранги иловагиеро ба вуҷуд меорад, ки бешубҳа пайдо мешавад - аммо метавонад ба таври нороҳат ларзиш кунад: .text-light { пур кардан: oklch (аз var(--foundation) l c calc(h + 180)); }
Гузариш ба 90° ранги дуюмдараҷаи равшанеро ба вуҷуд меорад, ки комилан пурракунанда нест: .text-light { пур кардан: oklch (аз var(--foundation) l c calc(h - 90)); }
Таъхири ман аз унвони Toon Quick Draw McGraw дар соли 1959 "El Kabong" ҳамон усулҳоро истифода мебарад, аммо бо палитраи гуногунтар. Масалан, байни ранги таҳкурсӣ ва сояи ториктар градиенти дигари радиалӣ мавҷуд аст.
Бино ва дарахт дар замина танҳо сояҳои гуногуни як ранги таҳкурсӣ мебошанд. Барои ин роҳҳо ба ман ду ранги иловагии пур кардан лозим буд: .bg-mid { пур кардан: oklch (аз var(--foundation) calc(l - 0,04) calc(c * 0,91) h); }
.bg-dark { пур кардан: oklch (аз var(--foundation) calc(l - 0,12) calc(c * 0,64) h); }
Вақте ки пойгоҳҳо ба ҳаракат оғоз мекунанд То ҳол ҳама чизе, ки ман нишон додам, статикӣ буд. Ҳатто вақте ки касе интихобкунандаи рангро барои тағир додани ранги таҳкурсӣ истифода мебарад, ин тағирот фавран ба амал меояд. Аммо графикаи аниматсионӣ хеле кам меистад - калид дар ном аст. Ҳамин тавр, агар ранг як қисми система бошад, ҳеҷ сабабе вуҷуд надорад, ки он низ онро ҷоннок карда наметавонад. Барои аниматсия кардани ранги таҳкурсӣ, ман аввал бояд онро ба каналҳои OKLCH он тақсим кунам— равшанӣ, хрома ва ранг. Аммо як қадами муҳими иловагӣ вуҷуд дорад: ман бояд ин арзишҳоро ҳамчун хосиятҳои фармоишии чопшуда сабт кунам. Аммо ин чӣ маъно дорад? Бо нобаёнӣ, браузер намедонад, ки оё арзиши хоси CSS ранг, дарозӣ, рақам ё чизи дигарро комилан ифода мекунад. Ин аксар вақт маънои онро дорад, ки онҳоро ҳангоми аниматсия ба осонӣ интерполяция кардан мумкин нест ва аз як арзиш ба дигараш гузаред. Бақайдгирии моликияти фармоишӣ ба браузер намуди арзишеро, ки он намояндагӣ мекунад ва бо мурури замон чӣ гуна бояд рафтор кунад, мегӯяд. Дар ин ҳолат, ман мехоҳам, ки браузер ба каналҳои рангии ман ҳамчун рақам муносибат кунад, то онҳо ба осонӣ аниматсия карда шаванд. @property --f-l { синтаксис: "<рақам>"; мерос мегирад: ҳақиқӣ; арзиши ибтидоӣ: 0,40; }
@property --f-c { синтаксис: "<рақам>"; мерос мегирад: ҳақиқӣ; арзиши ибтидоӣ: 0,11; }
@property --f-h { синтаксис: "<рақам>"; мерос мегирад: ҳақиқӣ; арзиши ибтидоӣ: 305; }
Пас аз сабти ном, ин хосиятҳои фармоишӣ мисли CSS-и ватанӣ рафтор мекунанд. Браузер метавонад онҳоро чаҳорчӯба ба чаҳорчӯба интерполясия кунад. Пас аз он ман ранги таҳкурсиро аз он каналҳо барқарор мекунам: --бунёд: oklch(var(--f-l) var(--f-c) var(--f-h));
Ин имкон медиҳад, ки ранги таҳкурсӣ мисли ҳар як арзиши рақамӣ аниматсионӣ шавад. Ин аст як аниматсияи оддии "нафаскашӣ", ки бо мурури замон сабукиро ба таври нарм иваз мекунад: @keyframes нафас мегирад { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { аниматсия: 10 сония нафаскашии беохир; }
Азбаски ҳама рангҳои дигар дар пуркунӣ, градиентҳо ва зарбаҳо аз --foundation гирифта шудаанд, онҳо ҳама якҷоя зинда мешаванд ва ҳеҷ чиз набояд дастӣ нав карда шавад. Як ранги аниматсионӣ, бисёр эффектҳо Дар оғози ин раванд, ман дар ҳайрат будам, ки оё арзишҳои нисбии рангҳои CSS метавонанд имконоти бештареро пешниҳод кунанд ва инчунин татбиқи онҳоро осонтар кунанд. Ман ба наздикӣ ба саҳифаи тамоси вебсайти худ заминаи нави кони тиллоро илова кардам ва итератсияи аввал лампаҳои равғаниро дар бар мегирифт, ки дурахшанда ва гардиш мекунанд.
Ман мехостам бифаҳмам, ки чӣ тавр аниматсионии рангҳои нисбии CSS метавонад дохили конро бо ранг кардани он бо рангҳои лампаҳо воқеӣтар созад. Ман мехостам, ки онҳо ба ҷаҳони гирду атрофашон таъсир расонанд, ҳамон тавре ки нури воқеӣ таъсир мерасонад. Ҳамин тавр, ба ҷои аниматсия кардани рангҳои гуногун, ман як системаи ночизи рӯшноӣ сохтам, ки танҳо як рангро аниматсия мекунад.
Вазифаи аввалини ман ҷойгир кардани қабати қабати байни замина ва лампаҳои ман буд: <роҳ id = "пӯшиш" fill = "var(--overlay-tint)" [...] style="mix-blend-mode: ранг" />
Ман режими омехта-омехтаро истифода кардам: ранг, зеро он чизеро, ки дар зери он аст, бо нигоҳ доштани равшании аслӣ ранг мекунад. Азбаски ман мехоҳам, ки қабата танҳо ҳангоми фаъол кардани аниматсияҳо намоён шавад, ман илова кардани қабатро ворид кардам: .svg-mine #overlay { намоиш: нест; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { намоиш: блок; шаффофият: 0,5; } }
Лампаҳо дар ҷои худ буданд, аммо ҳанӯз ба лампаҳо пайваст нашудаанд. Ба ман манбаи нур лозим буд. Чароғҳои ман соддаанд ва ҳар яки онҳо як унсури доира доранд, ки ман бо филтр норавшан кардаам. Филтр як норавшании хеле нармро дар тамоми давра ба вуҷуд меорад.
Ба ҷои аниматсия кардани қабати қабат ва лампаҳои алоҳида, ман як аломати рангии "шӯъла" -ро анимат мекунам ва ҳама чизи дигарро аз он мегирам. Аввалан, ман се хосиятҳои фармоишии чопшударо барои каналҳои OKLCH сабт мекунам: @property --fl-l { синтаксис: "<рақам>"; мерос мегирад: ҳақиқӣ; арзиши ибтидоӣ: 0,86; } @property --fl-c { синтаксис: "<рақам>"; мерос мегирад: ҳақиқӣ; арзиши ибтидоӣ: 0,12; } @property --fl-h { синтаксис: "<рақам>"; мерос мегирад: ҳақиқӣ; арзиши ибтидоӣ: 95; }
Ман он каналҳоро аниматсия кардам ва дидаву дониста чанд чаҳорчӯбаро ба тарафи норанҷӣ тела додам, то милт-милт ҳамчун нури оташ равшан хонда шавад:
@keyframes аланга { 0%, 100% { --fl-l: 0,86; --fl-c: 0,12; --fl-h: 95; } 6% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 92; } 12% { --fl-l: 0,83; --fl-c: 0,14; --fl-h: 100; } 18% { --fl-l: 0,88; --fl-c: 0,11; --fl-h: 94; } 24% { --fl-l: 0,82; --fl-c: 0,16; --fl-h: 82; } 30% { --fl-l: 0,90; --fl-c: 0,12; --fl-h: 90; } 36% { --fl-l: 0,79; --fl-c: 0,17; --fl-h: 76; } 44% { --fl-l: 0,87; --fl-c: 0,12; --fl-h: 96; } 52% { --fl-l: 0,81; --fl-c: 0,15; --fl-h: 102; } 60% { --fl-l: 0,89; --fl-c: 0,11; --fl-h: 93; } 68% { --fl-l: 0,83; --fl-c: 0,16; --fl-h: 85; } 76% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 91; } 84% { --fl-l: 0,85; --fl-c: 0,14; --fl-h: 98; } 92% {--fl-l: 0,80; --fl-c: 0,17; --fl-h: 74; } }
Пас аз он ман ин аниматсияро дар SVG фаро гирифтам, бинобар ин, тағирёбандаҳои муштарак ҳам барои лампаҳо ва ҳам қабати ман дастрасанд:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { аниматсия: алангаи 3.6s беохир хатти; ҷудо кардан: ҷудо кардан;
/* Аз каналҳои аниматсионӣ ранги шӯъла созед */ -- аланга: оклч(вар(--fl-l) var(--fl-c) var(--fl-h));
/* Ранги чароғ аз шӯъла гирифта шудааст */ --lamp-core: oklch(аз var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Ранги қабати қабати аз ҳамон аланга гирифташуда */ --overlay-tint: oklch (аз var(--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Ниҳоят, ман он рангҳои ҳосилшударо ба лампаҳои дурахшон ва қабате, ки онҳо таъсир мерасонанд, татбиқ кардам: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > доира, .svg-mine[data-animations=on] #mine-lamp-2 > доира { пур кардан: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { намоиш: блок; пур кардан: var(--overlay-tint); шаффофият: 0,5; } }
Вақте ки аланга ба тарафи норанҷӣ мегузарад, лампаҳо гарм мешаванд ва саҳна бо онҳо гарм мешавад. Вақте ки аланга хунук мешавад, ҳама чиз якҷоя мешавад. Беҳтарин қисми он аст, ки ҳеҷ чиз дастӣ навишта нашудааст. Агар ман ранги таҳкурсиро тағир диҳам ё диапазони аниматсияи алангаро тағир диҳам, тамоми системаи равшанӣ ҳамзамон навсозӣ мешавад. Натиҷаи ниҳоиро дар вебсайти ман дидан мумкин аст. Аз нав истифода бурдан, дубора истифода бурдан, аз нав дида баромадан Он аниматорҳои Ҳанна-Барбера маҷбур шуданд, ки унсурҳоро аз рӯи зарурат иваз кунанд, аммо ман рангҳоро дубора истифода мебарам, зеро ин кори маро устувортар ва нигоҳдории осонтар мекунад. Арзиши нисбии ранги CSS ба ман имкон медиҳад, ки:
Як ранги асосиро муайян кунед, Тавсиф кунед, ки рангҳои дигар бо он чӣ гуна алоқаманданд, Ин муносибатҳоро дар ҳама ҷо дубора истифода баред ва Бо тағир додани як арзиш системаро аниматсия кунед.
Ранги нисбӣ на танҳо мавзӯъро осонтар мекунад. Он тарзи тафаккурро ташвиқ мекунад, ки дар он ранг, ба монанди ҳаракат, қасдан аст - ва дар он ҷо тағир додани як арзиш метавонад тамоми саҳнаро бидуни дубора навиштани асари зери он тағир диҳад.
