Yakın zamanda web sitemdeki animasyonlu grafikleri yeni bir tema ve bir grup öncü karakterle yenileyerek bu seride paylaştığım birçok tekniği uygulamaya koydum. Animasyonlarımdan birkaçı, birisi onlarla etkileşime girdiğinde veya günün farklı saatlerinde görünüm değiştiriyor.
Blog sayfalarımın üstündeki grafikteki renkler her gün sabahtan akşama kadar değişiyor. Ayrıca, bir kaplama katmanı ve bir karıştırma modu sayesinde soğuk renkler ve kış teması ekleyen kar modu var.
Bunun üzerinde çalışırken, CSS göreceli renk değerlerinin bana daha fazla kontrol sağlarken aynı zamanda süreci basitleştirip kolaylaştıramayacağını merak etmeye başladım. Not: Bu eğitimde, temalı grafikler ve animasyonlar için göreceli renk değerlerine ve OKLCH renk uzayına odaklanacağım. Göreceli rengin derinliklerine dalmak istiyorsanız Ahmad Shadeed muhteşem bir etkileşimli kılavuz hazırladı. Renk uzayları, gamlar ve OKLCH'ye gelince, Geoff Graham bunlar hakkında yazdı.
Öğelerin tekrar tekrar kullanılması çok önemliydi. Arka planlar mümkün olduğunca yeniden kullanıldı; yakınlaştırmalar ve katmanlar aynı sanat eserinden yeni sahneler oluşturmaya yardımcı oldu. İhtiyaçtan doğdu ama aynı zamanda tek tek sahneler yerine diziler üzerinden düşünmeyi de teşvik etti. Renk Paletlerini Manuel Olarak Güncelleme Sorunu Doğrudan benim meydan okumama geçelim. Bunun gibi Toon Başlıklarında - 1959 Ayı Yogi Şovu'nun "Lullabye-Bye Bear" bölümü temel alınarak - ve benim çalışmalarımda genel olarak paletler seçilmiş birkaç renkle sınırlıdır.
Daha fazla ton eklemeden paleti genişletmek için "temel" rengim dediğim şeyden gölgeler ve renk tonları oluşturuyorum.
Sketch'te HSL renk uzayında çalışıyorum, dolayısıyla bu süreç temel rengimin açıklık değerinin arttırılmasını veya azaltılmasını içeriyor. Dürüst olmak gerekirse, bu zorlu bir iş değil; ancak farklı bir temel rengi seçmek, tamamen yeni bir renk tonu ve renk tonu seti oluşturmayı gerektirir. Bunu manuel olarak tekrar tekrar yapmak hızla zahmetli hale gelir.
HSL — H (ton), S (doygunluk) ve L (açıklık) — renk uzayından bahsetmiştim, ancak bu, rengi tanımlamanın çeşitli yollarından yalnızca biridir. RGB — R (kırmızı), G (yeşil), B (mavi) — en azından Hex biçiminde muhtemelen en tanıdık olanıdır. Ayrıca LAB - L (açıklık), A (yeşil-kırmızı), B (mavi-sarı) - ve daha yeni, ancak artık yaygın olarak desteklenen LCH - L (açıklık), C (kroma), H (renk tonu) - OKLCH formunda modeli de var. LCH (özellikle CSS'deki OKLCH) ile temel rengimin açıklık değerini ayarlayabilirim.
Veya rengini değiştirebilirim. LCH kroma ve HSL doygunluğunun her ikisi de bir rengin yoğunluğunu veya zenginliğini tanımlar, ancak bunu farklı şekillerde yaparlar. LCH bana daha geniş bir aralık ve renkler arasında daha tahmin edilebilir bir karışım sağlıyor.
Aynı açıklık ve kroma değerlerini paylaşan bir renk paleti oluşturmak için renk tonunu da değiştirebilirim. Hem HSL hem de LCH'de renk tonu spektrumu kırmızıdan başlar, yeşil ve maviye doğru ilerler ve kırmızıya döner.
OKLCH Renk Hakkında Düşüncelerimi Neden Değiştirdi? Sketch de dahil olmak üzere tasarım araçları yetişemese bile, OKLCH renk alanı için tarayıcı desteği artık yaygın. Neyse ki bu sizi OKLCH kullanmaktan alıkoymamalı. Tarayıcılar sizin için Hex, HSL, LAB ve RGB değerlerini memnuniyetle OKLCH'ye dönüştürecektir. Hex dahil herhangi bir alanda temel rengiyle bir CSS özel özelliğini tanımlayabilirsiniz: /* Temel rengi */ --temel: #5accd6;
Bundan türetilen renkler otomatik olarak OKLCH'ye dönüştürülecektir: --foundation-light: oklch(var(--foundation) [...]; } --foundation-mid: oklch(var(--foundation) [...]; } --foundation-dark: oklch(var(--foundation) [...]; }
Bir Tasarım Sistemi Olarak Göreli Renk Göreceli rengin şunu söylediğini düşünün: "Bu rengi al, ince ayar yap ve sonra bana sonucu ver." Bir rengi ayarlamanın iki yolu vardır: mutlak değişiklikler ve orantılı değişiklikler. Kod olarak benzer görünüyorlar ancak temel renklerini değiştirmeye başladığınızda çok farklı davranıyorlar. Bu farkı anlamak, göreceli renk kullanımını bir sisteme dönüştürebilecek şeydir. /* Temel rengi */ --temel: #5accd6;
Örneğin fondöten rengimin açıklık değeri 0,7837 iken daha koyu olan versiyonun değeri 0,5837'dir. Farkı hesaplamak için düşük değeri yüksek olandan çıkarıyorum ve sonucu calc() işlevini kullanarak uyguluyorum: --temel-karanlık: oklch(var(--foundation)'dan hesap(l - 0.20)ch);
Daha açık bir renk elde etmek için bunun yerine farkı ekliyorum: --temel-ışık: oklch(var(--foundation)'dan hesap(l + 0.10)ch);
Renkayarlamalar da aynı süreci takip eder. Fondöten rengimin yoğunluğunu 0,1035'ten 0,0035'e düşürmek için bir değeri diğerinden çıkarıyorum: oklch(var(--foundation)'dan l hesap(c - 0.10) h);
Bir ton paleti oluşturmak için temel rengimin ton değeri (200) ile yeni tonum (260) arasındaki farkı hesaplıyorum: oklch(var(--foundation)'dan l c hesap(h + 60));
Bu hesaplamalar mutlaktır. Sabit bir miktar çıkardığımda aslında "Her zaman bu kadarını çıkar" diyorum. Aynı durum sabit değerler eklenirken de geçerlidir: hesap(c - 0,10) hesap(c + 0,10)
Bu yaklaşımın sınırlarını zor yoldan öğrendim. Sabit kroma değerlerinin çıkarılmasına güvendiğimde, fondöteni değiştirdiğim anda renkler griye doğru çöktü. Bir renk için işe yarayan palet, başka bir renk için bozuldu. Çarpma farklı davranır. Chroma'yı çarptığımda tarayıcıya şunu söylüyorum: "Bu rengin yoğunluğunu bir oranda azaltın." Temel değişse bile renkler arasındaki ilişki bozulmadan kalır: hesap(c * 0,10)
Benim Taşı, Ölçeklendir, Döndür Kurallarım
Hafifliği taşıyın (ekleyin veya çıkarın), Kromayı ölçeklendir (çarp), Renk tonunu döndürün (derece ekleyin veya çıkarın).
Renk rengini ölçeklendiriyorum çünkü yoğunluk değişikliklerinin temel renkle orantılı kalmasını istiyorum. Renk tonu ilişkileri dönüşümlü olduğundan renk tonunu çarpmanın bir anlamı yoktur. Hafiflik algısal ve mutlaktır; onu çoğaltmak çoğu zaman tuhaf sonuçlar doğurur.
Tek Renkten Bütün Bir Temaya Göreli renk, bir temel rengi tanımlamama ve bundan ihtiyacım olan diğer tüm renkleri (dolgular, konturlar, degrade durakları, gölgeler) oluşturmama olanak tanıyor. Bu noktada renk bir palet olmaktan çıkıp bir sistem olmaya başlar. SVG illüstrasyonları dolgularda, konturlarda ve degradelerde aynı birkaç rengi yeniden kullanma eğilimindedir. Göreli renk, bu ilişkileri bir kez tanımlamanıza ve bunları her yerde yeniden kullanmanıza olanak tanır; tıpkı animatörlerin yeni sahneler oluşturmak için arka planları yeniden kullanması gibi.
Temel rengini bir kez değiştirdiğinizde elde edilen her renk, elle hiçbir şey yeniden hesaplamaya gerek kalmadan otomatik olarak güncellenir. Animasyonlu grafiklerin dışında, aynı yaklaşımı düğmeler ve bağlantılar gibi etkileşimli öğelerin durumlarına ilişkin renkleri tanımlamak için de kullanabilirim. “Ninni-Güle güle Ayı” Toon Başlığımda kullandığım fondöten rengi camgöbeği görünümlü bir mavi. Arka plan, fondötenim ile daha koyu bir versiyon arasındaki radyal bir degradedir.
Tamamen farklı ruh hallerine sahip alternatif versiyonlar yaratmak için yalnızca temel rengini değiştirmem gerekiyor: --temel: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(var(--foundation)'dan) calc(l - 0,2357) calc(c * 0,833) h);
Bu özel özellikleri, renk değerlerini çoğaltmadan SVG degrademe bağlamak için, sabit kodlu durma rengi değerlerini satır içi stillerle değiştirdim:
Daha sonra, Toon Metnimin her zaman seçtiğim temel renkle kontrast oluşturmasını sağlamam gerekiyordu. 180 derecelik renk tonu döndürme, kesinlikle öne çıkan ancak rahatsız edici bir şekilde titreşebilen tamamlayıcı bir renk üretir: .text-light { doldur: oklch(var(--foundation)'dan) l c hesap(h + 180)); }
90°'lik bir kaydırma, tamamen tamamlayıcı olmaksızın canlı bir ikincil renk üretir: .text-light { doldur: oklch(var(--foundation)'dan) lc hesap(h - 90)); }
Quick Draw McGraw'ın 1959 tarihli Toon Başlığı "El Kabong"u yeniden canlandırmam aynı teknikleri kullanıyor ancak daha çeşitli bir paletle. Örneğin, temel rengi ile daha koyu bir gölge arasında başka bir radyal degrade vardır.
Arka plandaki bina ve ağaç, aynı temel renginin farklı tonlarıdır. Bu yollar için iki ek dolgu rengine ihtiyacım vardı: .bg-orta { doldur: oklch(var(--foundation)'dan) calc(l - 0,04) calc(c * 0,91) h); }
.bg-koyu { doldur: oklch(var(--foundation)'dan) calc(l - 0,12) calc(c * 0,64) h); }
Temeller Taşınmaya Başladığında
Şu ana kadar gösterdiğim her şey statikti. Birisi fondöten rengini değiştirmek için renk seçiciyi kullandığında bile bu değişiklik anında gerçekleşir. Ancak animasyonlu grafikler nadiren sabit kalır; ipucu ismindedir. Yani, eğer renk sistemin bir parçasıysa, onun da animasyon yapamaması için hiçbir neden yok.
Temel rengi canlandırmak için önce onu OKLCH kanallarına ayırmam gerekiyor— hafiflik, renk ve renk tonu. Ancak önemli bir ekstra adım daha var: Bu değerleri, yazılan özel özellikler olarak kaydetmem gerekiyor. Peki bu ne anlama geliyor?
Varsayılan olarak tarayıcı, CSS özel özellik değerinin bir rengi, uzunluğu, sayıyı veya başka bir şeyi tamamen temsil edip etmediğini bilmez. Bu genellikle animasyon sırasında düzgün bir şekilde enterpolasyon yapılamayacakları ve bir değerden diğerine atlayabilecekleri anlamına gelir.
Özel bir özelliğin kaydedilmesi, tarayıcıya temsil ettiği değerin türünü ve zaman içinde nasıl davranması gerektiğini bildirir. Bu durumda, tarayıcının renk kanallarımı sayı olarak ele almasını ve böylece sorunsuz bir şekilde canlandırılabilmesini istiyorum.
@özellik --f-l {
sözdizimi: "
@özellik --f-c {
sözdizimi: "
@özellik --f-h {
sözdizimi: "
Kaydedildikten sonra bu özel özellikler yerel CSS gibi davranır. Tarayıcı bunları kare kare enterpolasyona tabi tutabilir. Daha sonra temel rengini bu kanallardan yeniden oluşturuyorum: --temel: oklch(var(--f-l) var(--f-c) var(--f-h));
Bu, diğer sayısal değerler gibi temel rengin de canlandırılabilir olmasını sağlar. İşte zaman içinde hafifliği yavaşça değiştiren basit bir "nefes alma" animasyonu: @keyframes nefes alıyor { %0, %100 { --f-l: 0,36; } %50 { --f-l: 0,46; } }
.toon-title { animasyon: 10 saniyelik sonsuz nefes alma-çıkış kolaylığı; }
Dolgulardaki, degradelerdeki ve konturlardaki diğer tüm renkler --foundation'dan türetildiği için hepsi birlikte canlandırılır ve hiçbir şeyin manuel olarak güncellenmesi gerekmez. Tek Animasyonlu Renk, Birçok Efekt Bu sürecin başında CSS göreceli renk değerlerinin daha fazla olasılık sunup aynı zamanda uygulanmasını kolaylaştırıp kolaylaştıramayacağını merak ettim. Yakın zamanda web sitemin iletişim sayfasına yeni bir altın madeni arka planı ekledim ve ilk yinelemede parlayan ve sallanan kandiller vardı.
CSS'ye göre renklerin canlandırılmasının, madenin içini lambalardan gelen renklerle renklendirerek nasıl daha gerçekçi hale getirebileceğini keşfetmek istedim. Gerçek ışığın yaptığı gibi etraflarındaki dünyayı etkilemelerini istedim. Bu nedenle birden fazla rengi canlandırmak yerine yalnızca tek bir rengi canlandıran küçük bir aydınlatma sistemi oluşturdum.
İlk görevim arka plan ile lambalarım arasına bir kaplama katmanı yerleştirmekti:
Mix-blend-mode: color kullandım çünkü bu, altta yatan parlaklığı korurken altındakileri renklendiriyor. Yer paylaşımının yalnızca animasyonlar açıldığında görünmesini istediğim için yer paylaşımı seçeneğini etkinleştirdim: .svg-mine #overlay { ekran: yok; }
@media (azaltılmış hareketi tercih eder: tercih yok) { .svg-mine[data-animations=on] #overlay { ekran: blok; opaklık: 0,5; } }
Kaplama yerindeydi ancak henüz lambalara bağlanmamıştı. Bir ışık kaynağına ihtiyacım vardı. Lambalarım basit ve her biri filtreyle bulanıklaştırdığım bir daire öğesi içeriyor. Filtre tüm daire üzerinde çok yumuşak bir bulanıklık oluşturur.
Kaplamayı ve lambaları ayrı ayrı canlandırmak yerine, tek bir "alev" renk jetonunu canlandırıyorum ve diğer her şeyi bundan türetiyorum. İlk olarak OKLCH kanalları için yazılan üç özel özelliği kaydediyorum:
@özellik --fl-l {
sözdizimi: "
Titremenin açıkça ateş ışığı olarak okunması için birkaç kareyi kasıtlı olarak turuncuya doğru iterek bu kanalları canlandırdım:
@keyframes alevi { %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; } }
Daha sonra bu animasyonun kapsamını SVG'ye ayarladım, böylece paylaşılan değişkenler hem lambalarda hem de kaplamamda kullanılabilir:
@media (azaltılmış hareketi tercih eder: tercih yok) { .svg-mine[data-animations=on] { animasyon: alev 3,6s sonsuz doğrusal; izolasyon: izolasyon;
/* Animasyonlu kanallardan bir alev rengi oluşturun */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lamba rengi alevden türetilmiştir */ --lamp-core: oklch(var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Kaplama renk tonu aynı alevden türetilmiştir */ --overlay-tint: oklch(var(--flame)'den) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Son olarak elde ettiğim renkleri parlayan lambalara ve etkiledikleri kaplamaya uyguladım: @media (azaltılmış hareketi tercih eder: tercih yok) { .svg-mine[data-animations=on] #mine-lamp-1 > daire, .svg-mine[data-animations=on] #mine-lamp-2 > daire { doldur: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { ekran: blok; doldur: var(--overlay-tint); opaklık: 0,5; } }
Alev turuncuya doğru kaydığında lambalar ısınır ve sahne de onlarla birlikte ısınır. Alev soğuduğunda her şey yerine oturur. En iyi yanı hiçbir şeyin manuel olarak yazılmamasıdır. Temel rengini değiştirirsem veya alev animasyonu aralıklarında ince ayar yaparsam tüm aydınlatma sistemi aynı anda güncelleniyor. Nihai sonucu web sitemde görebilirsiniz. Yeniden Kullan, Yeniden Kullan, Yeniden Ziyaret Et Hanna-Barbera animatörleri, gereklilik nedeniyle öğeleri yeniden kullanmak zorunda kaldılar, ancak ben renkleri yeniden kullanıyorum çünkü bu, çalışmamı daha tutarlı ve bakımı daha kolay hale getiriyor. CSS göreceli renk değerleri şunları yapmamı sağlar:
Tek bir temel rengi tanımlayın, Diğer renklerin bununla nasıl ilişkili olduğunu açıklayın, Bu ilişkileri her yerde yeniden kullanın ve Bir değeri değiştirerek sistemi canlandırın.
Göreli renk yalnızca temayı kolaylaştırmakla kalmaz. Hareket gibi rengin de kasıtlı olduğu ve bir değeri değiştirmenin, altındaki işi yeniden yazmaya gerek kalmadan tüm sahneyi dönüştürebildiği bir düşünme biçimini teşvik eder.
