Bu yaxınlarda veb saytımdakı cizgi qrafikasını yeni bir mövzu və bir qrup qabaqcıl personajla yenilədim və bu seriyada paylaşdığım bir çox texnikanı tətbiq etdim. Animasiyalarımdan bir neçəsi, kimsə onlarla əlaqə saxladıqda və ya günün müxtəlif vaxtlarında görünüşünü dəyişir.
Bloq səhifələrimin üstündəki qrafikdəki rənglər hər gün səhərdən axşama qədər dəyişir. Sonra, üst qat və qarışdırma rejimi sayəsində soyuq rənglər və qış mövzusu əlavə edən qar rejimi var.
Bunun üzərində işləyərkən, CSS nisbi rəng dəyərlərinin prosesi asanlaşdırarkən mənə daha çox nəzarət verə biləcəyini düşünməyə başladım. Qeyd: Bu dərslikdə mən nisbi rəng dəyərlərinə və tematik qrafika və animasiyalar üçün OKLCH rəng məkanına diqqət yetirəcəyəm. Əgər siz nisbi rənglərə dərindən baxmaq istəyirsinizsə, Əhməd Shadeed mükəmməl interaktiv bələdçi yaratmışdır. Rəng boşluqlarına, gamutlara və OKLCH-ə gəldikdə, öz Geoff Graham onlar haqqında yazdı.
Elementlərin təkrar istifadəsi əsas idi. Eyni sənət əsərindən yeni səhnələr yaratmağa kömək edən böyütmə və üst-üstə düşmə ilə fonlar mümkün olduqda yenidən istifadə edildi. O, zərurətdən yaranıb, həm də ayrı-ayrı səhnələrdən çox seriallar baxımından düşünməyə sövq edib. Rəng palitralarının əl ilə yenilənməsi problemi Gəlin birbaşa çağırışıma keçək. Bu kimi Toon Titles-də - 1959-cu il Yogi Bear Show epizoduna əsaslanan "Lullabye-Bye Bear" - və mənim işim ümumiyyətlə, palitralar bir neçə seçilmiş rənglə məhdudlaşır.
Daha çox çalar əlavə etmədən palitranı genişləndirmək üçün “tonal” rəng adlandırdığım rəngdən çalarlar və rənglər yaradıram.
Sketch-də mən HSL rəng məkanında işləyirəm, ona görə də bu proses əsas rəngimin açıqlıq dəyərini artırmaq və ya azaltmaqdan ibarətdir. Düzünü desəm, bu çətin bir iş deyil - lakin fərqli bir tonal rəng seçmək tamamilə yeni çalarların və rənglərin yaradılmasını tələb edir. Bunu əl ilə təkrar-təkrar etmək tez bir zamanda zəhmətli olur.
HSL - H (rəng), S (doyma) və L (yüngüllük) - rəng məkanını qeyd etdim, lakin bu rəngi təsvir etmək üçün bir neçə yoldan yalnız biridir. RGB - R (qırmızı), G (yaşıl), B (mavi) - yəqin ki, ən tanışdır, heç olmasa Hex şəklində. LAB - L (yüngüllük), A (yaşıl-qırmızı), B (mavi-sarı) - və daha yeni, lakin indi geniş şəkildə dəstəklənən LCH - L (yüngüllük), C (xroma), H (rəng) - OKLCH formasında model var. LCH ilə - xüsusilə CSS-də OKLCH - mən təməl rəngimin açıqlıq dəyərini tənzimləyə bilərəm.
Və ya onun rəngini dəyişə bilərəm. LCH xroması və HSL doyma hər ikisi rəngin intensivliyini və ya zənginliyini təsvir edir, lakin bunu müxtəlif yollarla edirlər. LCH mənə daha geniş diapazon və rənglər arasında daha proqnozlaşdırıla bilən qarışıqlıq verir.
Eyni yüngüllük və xroma dəyərlərini paylaşan rənglər palitrası yaratmaq üçün rəngi də dəyişə bilərəm. Həm HSL, həm də LCH-də rəng spektri qırmızıdan başlayır, yaşıl və mavi arasında hərəkət edir və qırmızıya qayıdır.
Niyə OKLCH Rəng haqqında Düşüncələrimi Dəyişdi OKLCH rəng məkanı üçün brauzer dəstəyi indi geniş yayılmışdır, hətta dizayn alətləri, o cümlədən Sketch də çatmasa da. Xoşbəxtlikdən, bu, OKLCH-dən istifadə etməyə mane olmamalıdır. Brauzerlər sizin üçün Hex, HSL, LAB və RGB dəyərlərini məmnuniyyətlə OKLCH-ə çevirəcəklər. Hex də daxil olmaqla istənilən məkanda təməl rəngi olan CSS fərdi xüsusiyyətini təyin edə bilərsiniz: /* Tonal rəng */ --təməl: #5accd6;
Ondan əldə edilən istənilən rəng avtomatik olaraq OKLCH-ə çevriləcək: --foundation-light: oklch(var(--foundation) [...]; } --foundation-mid: oklch(var(--foundation)-dan [...]; } --foundation-dark: oklch(var(--foundation)-dan [...]; }
Dizayn Sistemi kimi Nisbi Rəng Nisbi rəngi düşünün: "Bu rəngi götür, onu cız, sonra mənə nəticə ver." Rəngi tənzimləmək üçün iki yol var: mütləq dəyişikliklər və mütənasib dəyişikliklər. Onlar kodda oxşar görünürlər, lakin siz təməl rənglərini dəyişdirməyə başladıqdan sonra çox fərqli davranırlar. Bu fərqi başa düşmək nisbi rəngdən istifadəni sistemə çevirə biləcək şeydir. /* Tonal rəng */ --təməl: #5accd6;
Məsələn, əsas rəngimin açıqlıq dəyəri 0,7837, daha qaranlıq versiyada isə 0,5837 dəyəri var. Fərqi hesablamaq üçün yuxarıdan aşağı dəyəri çıxarıram və nəticəni calc() funksiyasından istifadə edərək tətbiq edirəm: --tonal-qaranlıq: oklch(var(--təməldən) calc(l - 0,20) c h);
Daha açıq rəng əldə etmək üçün bunun əvəzinə fərqi əlavə edirəm: --təməl-işıq: oklch(var(--təməldən) calc(l + 0.10) c h);
Xromadüzəlişlər eyni prosesi izləyir. Tonal rəngimin intensivliyini 0,1035-dən 0,0035-ə qədər azaltmaq üçün bir dəyəri digərindən çıxarıram: oklch(var(--təməldən) l calc(c - 0,10) h);
Rənglər palitrası yaratmaq üçün əsas rəngin (200) və yeni rəngin (260) çalarları arasındakı fərqi hesablayıram: oklch(var(--təməldən) l c calc(h + 60));
Bu hesablamalar mütləqdir. Sabit bir məbləği çıxdıqda, effektiv şəkildə deyirəm: "Həmişə bu qədər çıxarın." Sabit dəyərlər əlavə edərkən eyni şey tətbiq olunur: hesablama (c - 0,10) hesablama (c + 0,10)
Bu yanaşmanın sərhədlərini çətin yoldan öyrəndim. Sabit xroma dəyərlərini çıxarmağa güvəndiyim zaman, təməli dəyişdirən kimi rənglər boz rəngə doğru çökdü. Bir rəng üçün işləyən bir palitra digəri üçün dağıldı. Çoxalma fərqli davranır. Xromanı çoxaldanda brauzerə deyirəm: "Bu rəngin intensivliyini bir nisbətdə azaldın." Rənglər arasındakı əlaqə, hətta təməl dəyişdikdə belə dəyişməz qalır: hesablama (c * 0,10)
Köçürün, Ölçəkləyin, Döndürün Qaydalarım
Yüngüllük hərəkəti (əlavə və ya çıxma), Ölçək xroması (çoxaltma), Rəngi fırladın (dərəcələri əlavə edin və ya çıxarın).
Mən xromanı ölçürəm, çünki intensivlik dəyişikliklərinin əsas rəngə mütənasib qalmasını istəyirəm. Rəng əlaqələri fırlanır, buna görə də rəngin çoxaldılması mənasızdır. Yüngüllük qavrama və mütləqdir - onu çoxaltmaq çox vaxt qəribə nəticələr verir.
Bir Rəngdən Bütün Mövzuya Nisbi rəng mənə təməl rəngini təyin etməyə və ondan mənə lazım olan hər bir digər rəngi - dolğular, vuruşlar, gradient dayanacaqları, kölgələr - yaratmağa imkan verir. Bu zaman rəng palitrası olmağı dayandırır və sistem olmağa başlayır. SVG illüstrasiyaları dolgular, vuruşlar və gradientlər arasında eyni bir neçə rəngdən təkrar istifadə etməyə meyllidir. Nisbi rəng bu əlaqələri bir dəfə müəyyənləşdirməyə və onları hər yerdə təkrar istifadə etməyə imkan verir - animatorların yeni səhnələr yaratmaq üçün arxa plandan təkrar istifadə etdiyi kimi.
Tonal təməl rəngini bir dəfə dəyişdirin və hər bir əldə edilən rəng əl ilə heç bir şeyi yenidən hesablamadan avtomatik olaraq yenilənir. Animasiya edilmiş qrafikadan kənarda, düymələr və keçidlər kimi interaktiv elementlərin vəziyyətləri üçün rəngləri müəyyən etmək üçün eyni yanaşmadan istifadə edə bilərdim. “Lullabye-Bye Bear” Toon Başlığımda istifadə etdiyim tonal krem mavi görünən mavi rəngdədir. Fon mənim tonal kremlə daha qaranlıq versiya arasında radial gradientdir.
Tamamilə fərqli əhval-ruhiyyə ilə alternativ versiyalar yaratmaq üçün yalnız tonal kremin rəngini dəyişməliyəm: --təməl: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(var(--foundation)-dan) calc(l - 0,2357) calc(c * 0,833) h);
Rəng dəyərlərini təkrarlamadan həmin xüsusi xassələri SVG qradientimə bağlamaq üçün mən sərt kodlanmış dayanıqlı rəng dəyərlərini daxili üslublarla əvəz etdim:
Sonra mən Toon mətnimin həmişə seçdiyim tonal rənglə ziddiyyət təşkil etdiyinə əmin olmalıydım. 180 dərəcə çalarların fırlanması, şübhəsiz ki, açılan tamamlayıcı bir rəng yaradır - lakin narahat şəkildə titrə bilər: .text-light { doldurun: oklch(var(--foundation)-dan) l c calc(h + 180)); }
90° yerdəyişmə tam tamamlayıcı olmadan parlaq ikinci rəng yaradır: .text-light { doldurun: oklch(var(--foundation)-dan) l c calc(h - 90)); }
Quick Draw McGraw-un 1959-cu ildə çəkdiyi "El Kabong" adlı filminin rekreasiyasım eyni üsullardan istifadə edir, lakin daha müxtəlif palitraya malikdir. Məsələn, təməl rəngi ilə daha qaranlıq bir kölgə arasında başqa bir radial gradient var.
Arxa fondakı bina və ağac eyni təməl rənginin sadəcə fərqli çalarlarıdır. Bu yollar üçün mənə iki əlavə dolgu rəngi lazım idi: .bg-mid { doldurun: oklch(var(--foundation)-dan) calc(l - 0,04) calc(c * 0,91) h); }
.bg-qaranlıq { doldurun: oklch(var(--foundation)-dan) calc(l - 0,12) calc(c * 0,64) h); }
Vəqflər Hərəkət etməyə Başlayanda
İndiyə qədər göstərdiyim hər şey statik olub. Kimsə təməl rəngini dəyişdirmək üçün rəng seçicidən istifadə etdikdə belə, bu dəyişiklik dərhal baş verir. Ancaq cizgi qrafika nadir hallarda dayanır - ipucu addadır. Beləliklə, rəng sistemin bir hissəsidirsə, onun da canlandıra bilməməsi üçün heç bir səbəb yoxdur.
Tonal kremin rəngini canlandırmaq üçün əvvəlcə onu OKLCH kanallarına bölməliyəm— yüngüllük, xrom və rəng. Ancaq vacib əlavə bir addım var: bu dəyərləri yazılmış xüsusi xüsusiyyətlər kimi qeydiyyatdan keçirməliyəm. Amma bu nə deməkdir?
Varsayılan olaraq, brauzer CSS fərdi xüsusiyyət dəyərinin rəngi, uzunluğu, nömrəni və ya tamamilə başqa bir şeyi təmsil edib-etmədiyini bilmir. Bu, tez-tez animasiya zamanı onların rəvan şəkildə interpolyasiyası və bir dəyərdən digərinə keçə bilməyəcəyi deməkdir.
Fərdi mülkiyyətin qeydiyyatı brauzerə onun təmsil etdiyi dəyərin növünü və zamanla necə davranmalı olduğunu bildirir. Bu halda, mən istəyirəm ki, brauzer mənim rəng kanallarıma rəqəmlər kimi baxsın ki, onlar rəvan canlandırılsın.
@property --f-l {
sintaksis: "
@property --f-c {
sintaksis: "
@property --f-h {
sintaksis: "
Qeydiyyatdan keçdikdən sonra bu fərdi xüsusiyyətlər doğma CSS kimi davranır. Brauzer onları çərçivə- kadr interpolyasiya edə bilər. Sonra həmin kanallardan təməl rəngini yenidən qururam: --təməl: oklch(var(--f-l) var(--f-c) var(--f-h));
Bu, hər hansı digər rəqəmsal dəyər kimi, təməl rəngini canlı hala gətirir. Budur, zamanla yüngüllüyü yumşaq bir şəkildə dəyişdirən sadə "nəfəs alma" animasiyası: @keyframes nəfəs alır { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animasiya: 10 saniyəlik rahatlıqla nəfəs alın; }
Doldurmalar, gradientlər və ştrixlərdəki hər bir digər rəng --foundation-dan əldə edildiyi üçün onların hamısı birlikdə canlanır və heç nəyi əl ilə yeniləməyə ehtiyac yoxdur. Bir Animasiya Rəngi, Çoxlu Effektlər Bu prosesin başlanğıcında mən maraqlandım ki, CSS nisbi rəng dəyərləri daha çox imkanlar təklif edir, eyni zamanda onları həyata keçirməyi asanlaşdırır. Bu yaxınlarda veb saytımın əlaqə səhifəsinə yeni qızıl mədəni fonu əlavə etdim və ilk iterasiya parlayan və yellənən neft lampalarını ehtiva etdi.
Mən animasiya edən CSS nisbi rənglərinin lampaların rəngləri ilə şaxtanın daxili hissəsini necə daha reallaşdıra biləcəyini araşdırmaq istədim. İstərdim ki, onlar ətrafdakı dünyaya, həqiqi işığın təsir etdiyi kimi təsir etsinlər. Beləliklə, birdən çox rəngi canlandırmaq əvəzinə, yalnız bir rəngi canlandıran kiçik bir işıqlandırma sistemi qurdum.
Mənim ilk işim fon və lampalarım arasında üst-üstə düşmə qatını yerləşdirmək idi:
Qarışıq-qarışıq rejimindən istifadə etdim: rəng, çünki bu, əsas parlaqlığı qoruyarkən onun altında olanı rəngləndirir. Yalnız animasiyalar aktiv olduqda üst-üstə düşmənin görünməsini istədiyim üçün, üst-üstə düşməyi seçdim: .svg-mine #overlay { ekran: heç biri; }
@media (azaldılmış hərəkətə üstünlük verilir: üstünlük verilmir) { .svg-mine[data-animations=on] #overlay { ekran: blok; qeyri-şəffaflıq: 0,5; } }
Bindirmə yerində idi, lakin hələ lampalara qoşulmamışdır. Mənə işıq mənbəyi lazım idi. Mənim lampalarım sadədir və hər birində filtrlə bulandırdığım dairə elementi var. Filtr bütün dairədə çox yumşaq bulanıqlıq yaradır.
Üst örtüyü və lampaları ayrıca canlandırmaq əvəzinə, mən tək bir "alov" rəng işarəsini canlandırıram və hər şeyi ondan əldə edirəm. Əvvəlcə OKLCH kanalları üçün üç tipli xüsusi xassələri qeyd edirəm:
@property --fl-l {
sintaksis: "
Mən bu kanalları animasiya etdim, qəsdən bir neçə kadrı narıncıya doğru itələdim ki, titrəmə aydın şəkildə atəş işığı kimi oxunsun:
@keyframes alov { 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; } }
Sonra həmin animasiyanı SVG-də əhatə etdim, ona görə də paylaşılan dəyişənlər həm lampalar, həm də mənim üst-üstə düşməm üçün əlçatandır:
@media (azaldılmış hərəkətə üstünlük verilir: üstünlük verilmir) { .svg-mine[data-animations=on] { animasiya: alov 3.6s sonsuz xətti; izolyasiya: təcrid etmək;
/* Animasiyalı kanallardan alov rəngi yaradın */ --alov: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Alovdan alınan lampanın rəngi */ --lampa-core: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Eyni alovdan əldə edilən üst-üstə düşmə rəngi */ --overlay-tint: oklch(var(--flame)-dan) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Nəhayət, mən bu əldə edilmiş rəngləri parlayan lampalara və onların təsir etdiyi örtüklərə tətbiq etdim: @media (azaldılmış hərəkətə üstünlük verilir: üstünlük verilmir) { .svg-mine[data-animations=on] #mine-lamp-1 > dairə, .svg-mine[data-animations=on] #mine-lamp-2 > dairə { doldurun: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { ekran: blok; doldurun: var(--overlay-tint); qeyri-şəffaflıq: 0,5; } }
Alov narıncıya doğru dəyişdikdə, lampalar isinir və səhnə onlarla birlikdə istiləşir. Alov soyuduqca hər şey bir yerə yığılır. Ən yaxşısı odur ki, heç bir şey əl ilə yazılmır. Təməl rəngini dəyişdirsəm və ya alov animasiya diapazonlarını dəyişdirsəm, bütün işıqlandırma sistemi eyni vaxtda yenilənir. Yekun nəticəni saytımda görə bilərsiniz. Yenidən istifadə edin, yenidən təyin edin, yenidən baxıldı Həmin Hanna-Barbera animatorları zərurətdən elementləri dəyişdirməyə məcbur oldular, lakin mən rəngləri təkrar istifadə edirəm, çünki bu, işimi daha ardıcıl və saxlamağı asanlaşdırır. CSS nisbi rəng dəyərləri mənə imkan verir:
Tək bir təməl rəngini təyin edin, Digər rənglərin onunla necə əlaqəli olduğunu təsvir edin, Bu əlaqələri hər yerdə yenidən istifadə edin və Bir dəyəri dəyişdirərək sistemi canlandırın.
Nisbi rəng yalnız mövzunu asanlaşdırmır. Bu, hərəkət kimi rəngin qəsdən olduğu və bir dəyərin dəyişdirilməsinin altındakı işi yenidən yazmadan bütün səhnəni dəyişdirə biləcəyi bir düşüncə tərzini təşviq edir.
