Мен жакында веб-сайтымдагы анимацияланган графиканы жаңы тема жана пионер каармандардын тобу менен жаңырттым, бул серияда бөлүшкөн көптөгөн ыкмаларымды иш жүзүндө колдондум. Менин анимацияларымдын айрымдары кимдир-бирөө алар менен баарлашканда же күндүн ар кайсы убакта көрүнүшүн өзгөртөт.
Менин блог баракчаларымдын үстүндөгү графикадагы түстөр күн сайын эртең мененден кечке чейин өзгөрүп турат. Андан кийин, кар режими бар, ал муздак түстөрдү жана кышкы теманы кошот, сылык катмар катмары жана аралаштыруу режими.
Бул боюнча иштеп жатып, мен CSS салыштырмалуу түс баалуулуктары процессти жөнөкөйлөтүп, мага көбүрөөк башкаруу бере алабы деп ойлоно баштадым. Эскертүү: Бул окуу куралында мен түстөрдүн салыштырмалуу баалуулуктарына жана тематикалык графика жана анимациялар үчүн OKLCH түс мейкиндигине көңүл бурам. Эгерде сиз салыштырмалуу түскө терең сүңгүүнү кааласаңыз, Ахмад Шадид эң сонун интерактивдүү гид түздү. Түстүү мейкиндиктерге, гаммаларга жана OKLCHге келсек, алар жөнүндө биздин Джефф Грэм жазган.
элементтерди кайталап пайдалануу негизги болгон. Фондор мүмкүн болушунча кайра колдонулуп, масштабдар жана катмарлар бир эле көркөм чыгармадан жаңы көрүнүштөрдү түзүүгө жардам берген. Бул зарылчылыктан келип чыккан, бирок ал жеке көрүнүштөрдү эмес, сериалдар боюнча ой жүгүртүүгө түрткү берген. Түс палитраларын кол менен жаңыртуу маселеси Келгиле, менин чакырыгыма түз келели. Ушул сыяктуу Toon Titles-де — 1959-жылдагы Йоги Bear Show эпизодунун «Бешик ыры-кош аюу» эпизодуна негизделген — жана жалпысынан менин ишим, палитралар бир нече түстөр менен чектелген.
Мен палитраны көбүрөөк түстөрдү кошпостон кеңейтүү үчүн, мен өзүмдүн "негизги" түсүм деп атаган нерседен көлөкөлөрдү жана боёкторду жасайм.
Эскизде мен HSL түс мейкиндигинде иштейм, андыктан бул процесс менин фундаменталдык түсүмдүн ачыктык маанисин жогорулатууну же азайтууну камтыйт. Чынын айтсам, бул татаал иш эмес, бирок башка тоналдык түстү тандоо үчүн жаңы түстөр жана боёкторду түзүү талап кылынат. Муну кол менен кайра-кайра жасоо тез эле түйшүктүү болуп калат.
Мен HSL — H (түс), S (каныккандык) жана L (жарыктык) — түс мейкиндигин айттым, бирок бул түстү сүрөттөөнүн бир нече жолдорунун бири гана. RGB - R (кызыл), G (жашыл), B (көк) - балким, эң эле тааныш, жок дегенде Hex түрүндө. Ошондой эле LAB - L (жеңилдүүлүк), A (жашыл-кызыл), B (көк-сары) - жана жаңыраак, бирок азыр кеңири колдоого алынган LCH - L (жеңилдүүлүк), C (хрома), H (түс) - OKLCH түрүндөгү модель. LCH менен - өзгөчө CSSдеги OKLCH - мен негиз түсүмдүн ачыктык маанисин тууралай алам.
Же анын хромасын өзгөртө алам. LCH хромасы жана HSL каныккандыгы түстүн интенсивдүүлүгүн же байлыгын сүрөттөйт, бирок алар муну ар кандай жолдор менен жасашат. LCH мага кененирээк диапазонду жана түстөрдүн ортосундагы болжолдуу аралашууну берет.
Мен ошондой эле жарыктык жана хрома баалуулуктары бирдей болгон түстөрдүн палитрасын түзүү үчүн өңдү өзгөртө алам. HSL жана LCH экөө тең, түс спектри кызылдан башталып, жашыл жана көк түскө өтүп, кайра кызылга кайтат.
Эмне үчүн OKLCH Мен түс жөнүндө кандай ойдомун өзгөрттү? OKLCH түс мейкиндигине серепчинин колдоосу азыр кеңири таралган, ал тургай дизайн куралдары, анын ичинде Sketch да жетише элек. Бактыга жараша, бул OKLCH колдонууга тоскоол болбошу керек. Браузерлер сиз үчүн Hex, HSL, LAB жана RGB баалуулуктарын OKLCHге конверттейт. Сиз каалаган мейкиндикте негиз түсү менен CSS ыңгайлаштырылган касиетин аныктай аласыз, анын ичинде Hex: /* Фонддун түсү */ --foundation: #5accd6;
Андан алынган бардык түстөр автоматтык түрдө OKLCHге айландырылат: --foundation-light: oklch(from var(--foundation) [...]; } --foundation-mid: oklch (var(--foundation) [...]; } --foundation-dark: oklch(var(--foundation) [...]; }
Салыштырмалуу түс дизайн системасы катары Салыштырмалуу түс жөнүндө ойлонуп көрүңүз: "Бул түстү алып, аны чыңдап, анан мага натыйжа бер". Түстү тууралоонун эки жолу бар: абсолюттук өзгөртүүлөр жана пропорционалдык өзгөртүүлөр. Алар код боюнча окшош көрүнөт, бирок тоналдык түстөрдү алмаштыра баштаганыңызда өзүн таптакыр башкача алып жүрүшөт. Бул айырмачылыкты түшүнүү - бул салыштырмалуу түстү системага айланта алат. /* Фонддун түсү */ --foundation: #5accd6;
Мисалы, менин фундаменталдык түсүмдүн жарыктык мааниси 0,7837, ал эми караңгы версиясы 0,5837 мааниге ээ. Айырманы эсептөө үчүн, мен жогору тургандан төмөнкү маанини чыгарып, натыйжаны calc() функциясын колдонуп колдоном: --foundation-dark: oklch(var(--фундаменттен) calc(l - 0,20) c h);
Ачык түскө жетүү үчүн, анын ордуна айырманы кошом: --фундамент-жарык: oklch(var(--фундаменттен) calc(l + 0,10) c h);
Chromaжөндөөлөр ошол эле процесстин артынан жүрөт. Негизги түсүмдүн интенсивдүүлүгүн 0,1035тен 0,0035ке чейин азайтуу үчүн, мен бир маанини экинчисинен алып салам: oklch(var(--фундаменттен) l calc(c - 0,10) h);
Түстөр палитрасын түзүү үчүн, мен фундаменталдык түсүмдүн (200) жана жаңы түсүмдүн (260) ортосундагы айырманы эсептейм: oklch(var(--фундаменттен) l c calc(h + 60));
Бул эсептөөлөр абсолюттук болуп саналат. Мен белгиленген сумманы алып салганда, мен эффективдүү айтам: "Дайыма ушуну алып салгыла". Ушул эле нерсе белгиленген маанилерди кошкондо да колдонулат: calc(c - 0,10) calc(c + 0,10)
Мен бул ыкманын чегин оор жол менен үйрөндүм. Мен белгиленген хрома маанилерин алып салууга ишенгенимде, фундаментти алмаштырганым менен түстөр боз тарапка түшүп кетти. Бир түс үчүн иштеген палитра башка түскө ажырап калды. Көбөйтүү башкача иш кылат. Мен хроманы көбөйткөндө, мен браузерге: "Бул түстүн интенсивдүүлүгүн пропорцияга азайт" деп айтып жатам. Фундамент өзгөрсө да, түстөрдүн ортосундагы мамиле бузулбайт: calc(c * 0,10)
Менин аны жылдыруу, масштабдоо, айлантуу эрежелерим
Жеңилдикти жылдыруу (кошуу же кемитүү), Масштаб хромасы (көбөйтүү), Реңкти айлантуу (градустарды кошуу же кемитүү).
Мен хроманы масштабдайм, анткени интенсивдүү өзгөрүүлөр негизги түскө пропорционалдуу болушун каалайм. Өңдөрдүн мамилелери айлануучу, андыктан түстү көбөйтүүнүн мааниси жок. Жеңилдүүлүк кабылдоочу жана абсолюттук - аны көбөйтүү көбүнчө кызыктай натыйжаларды берет.
Бир түстөн бүткүл темага Салыштырмалуу түс мага фундаменталдык түстү аныктоого жана андан мага керек болгон бардык башка түстөрдү — толтурууну, штрихтерди, градиентти токтотууну, көлөкөлөрдү түзүүгө мүмкүндүк берет. Ошол учурда, түс палитра болууну токтотуп, система боло баштайт. SVG иллюстрациялары толтуруулар, штрихтер жана градиенттер боюнча бирдей бир нече түстөрдү кайра колдонушат. Салыштырмалуу түс бул мамилелерди бир жолу аныктап, аларды бардык жерде кайра колдонууга мүмкүндүк берет - аниматорлор жаңы көрүнүштөрдү түзүү үчүн фонду кайра колдонгон сыяктуу.
Фундаменттин түсүн бир жолу өзгөртсөңүз, ар бир алынган түс автоматтык түрдө жаңырып турат, кол менен эч нерсени кайра эсептебестен. Анимацияланган графикадан тышкары, мен ушул эле ыкманы баскычтар жана шилтемелер сыяктуу интерактивдүү элементтердин абалына түстөрдү аныктоо үчүн колдоно алмакмын. Мен "Бешик ыры-кош аюу" аталышында колдонгон тональ түсү көгүш түстөгү көк. Фон менин негизим менен караңгы версиянын ортосундагы радиалдык градиент.
Такыр башка маанайдагы альтернативдик версияларды түзүү үчүн, мен негиздин түсүн гана өзгөртүүм керек: --foundation: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(var(--foundation) calc(l - 0,2357) calc(c * 0,833) h);
Ошол ыңгайлаштырылган касиеттерди SVG градиентиме түс маанилерин кайталабастан байланыштыруу үчүн, мен катуу коддолгон токтоо түстүү маанилерди саптык стилдер менен алмаштырдым:
Андан кийин, мен Toon Text ар дайым мен тандаган фундаменталдык түскө карама-каршы турушун камсыз кылышым керек болчу. 180 градуска айлануу кошумча түстү жаратат, ал сөзсүз түрдө пайда болот, бирок ыңгайсыз титиреп кетиши мүмкүн: .text-light { толтуруу: oklch(var(--фундаменттен) l c calc(h + 180)); }
90° жылдыруу толук кошумча болбостон ачык экинчи түстү берет: .text-light { толтуруу: oklch(var(--фундаменттен) l c calc(h - 90)); }
Менин 1959-жылы Quick Draw МакГроунун "Эл Кабонг" аталышындагы рекреациям ошол эле ыкмаларды колдонот, бирок палитрасы ар түрдүү. Мисалы, фундаменталдык түс менен кара көлөкөнүн ортосунда дагы бир радиалдык градиент бар.
Фондогу имарат жана дарак бир эле фундаменталдык түстөгү ар түрдүү түстөр. Бул жолдор үчүн мага эки кошумча түс керек болду: .bg-mid { толтуруу: oklch(var(--фундаменттен) calc(l - 0,04) calc(c * 0,91) h); }
.bg-dark { толтуруу: oklch(var(--фундаменттен) 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-rejimi: түс" />
Мен аралаштыруу режимин колдондум: түс, анткени ал астындагы жарыкты сактап, анын астындагыны боёйт. Мен анимациялар күйгүзүлгөндө гана үстүнкү катмардын көрүнүүсүн кааладым, ошондуктан мен капталга кошулууну жасадым: .svg-mine #overlay { көрсөтүү: жок; }
@media (prefers-reduced-motion: no-prefer) { .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-prefer) { .svg-mine[data-animations=on] { анимация: жалын 3.6с чексиз сызыктуу; изоляция: изоляциялоо;
/* Анимацияланган каналдардан жалын түсүн түзүңүз */ --жалын: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Лампанын түсү жалындан алынган */ --lamp-core: oklch(from 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-prefer) { .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; } }
Жалын кызгылт сарыга жылганда, лампалар жылыйт жана алар менен бирге көрүнүш жылыйт. Жалын муздаганда баары биригет. Эң жакшы жери эч нерсе кол менен жазылбайт. Эгерде мен фундаменталдык түстү өзгөртсөм же жалындын анимация диапазондорун чыңдасам, бүт жарыктандыруу системасы бир эле учурда жаңырат. Акыркы жыйынтыкты менин веб-сайтымдан көрө аласыз. Кайра колдонуу, кайра колдонуу, кайра карап чыгуу Ошол Hanna-Barbera аниматорлору элементтердин максатын өзгөртүүгө аргасыз болушкан, бирок мен түстөрдү кайра колдоном, анткени бул менин ишимди ырааттуураак жана тейлөөнү жеңилдетет. CSS салыштырмалуу түс баалуулуктары мага төмөнкүлөргө мүмкүндүк берет:
бир тоналдык түстү аныктоо, Башка түстөрдүн ага кандай тиешеси бар экенин айтып бериңиз, Ошол мамилелерди бардык жерде кайра колдонуңуз жана Бир маанини өзгөртүү менен системаны жандандырыңыз.
Салыштырмалуу түс жөн гана теманы жеңилдете бербейт. Бул кыймыл сыяктуу түс атайылап болгон жерде ой жүгүртүү ыкмасын кубаттайт - жана бир маанини өзгөртүү анын астындагы чыгарманы кайра жазбастан бүтүндөй көрүнүштү өзгөртө алат.
