Kaydol

Merhaba Sevgili Floodlar.com Kullanıcısı, Web sitemizde geçirdiğiniz zaman ve bu büyüleyici flood evrenine katılımınız için teşekkür ederiz. Floodların geniş dünyasıyla dolu deneyiminizi daha fazla keşfetmek için, web sitemizi sınırsız olarak kullanabilmeniz adına giriş yapmanız gerekmektedir.

Oturum aç

Merhaba Floodlar.com Kullanıcısı, İlk üç sayfayı tamamladınız, tebrikler! Ancak, floodların devamını görmek ve daha fazla interaktif deneyim yaşamak için giriş yapmanız gerekiyor. Hesabınız yoksa, hızlıca oluşturabilirsiniz. Sınırsız floodlar ve etkileşimler sizleri bekliyor. Giriş yapmayı unutmayın!

Şifremi hatırlamıyorum

Şifreniz mi unuttunuz? Endişelenmeyin! Lütfen kayıtlı e-posta adresinizi giriniz. Size bir bağlantı göndereceğiz ve bu link üzerinden yeni bir şifre oluşturabileceksiniz.

Fil Necati Masonlar Locası Subreddit Adı Nedir? Cevap: ( N31 )

Üzgünüz, flood girme izniniz yok, Flood girmek için giriş yapmalısınız.

Lütfen bu Floodun neden bildirilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Lütfen bu cevabın neden bildirilmesi gerektiğini kısaca açıklayın.

Lütfen bu kullanıcının neden rapor edilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Mobil Uygulamada Açın

Güncel Floodlar En sonuncu Nesne

Bir renk şeması oluşturma

Bir renk şeması oluşturma

Bu yazıda, CSS’de çoklu renk şemalarını yönetmenin yolları üzerine düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.

Demo

Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:

genel bakış #

Özel özelliklere sahip erişilebilir bir renk sistemi oluşturacağız ve calc(), yazma deneyimini minimum düzeyde tutarken kullanıcı tercihlerine uyarlanan bir web sayfası oluşturmak için. Temel bir marka rengiyle başlıyoruz ve ondan bir varyantlar sistemi oluşturuyoruz: 2 metin rengi, 4 yüzey rengi ve eşleşen bir gölge.

Bu kılavuz, her bir renk şeması için tüm renkleri önceden tanımlayarak başlar. En sonuna kadar sayfayı değiştirmek için kullanılmazlar.

Marka #

Çoğu zaman, bir marka rengi zaten oluşturulmuştur ve onaltılık veya rgb olarak teslim edilir. Bu GUI Challenge’ın temel marka rengi şu şekildedir: #0af. İlk olarak, bu renk sistemi için hex değerinin hsl’ye dönüştürülmesi gerekir.

* {
--brand: #0af;
--brand: hsl(200 100% 50%);
}

Marka rengini örneğin %20 oranında koyulaştırma veya aydınlatma konseptini mümkün kılmak için, hsl renk değerinin 3 kanalının kendi özel özelliklerine çıkarılması gerekir, bunun gibi:

* {
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
}

CSS, bu renk özelliklerinde matematik yapabilir, örneğin calc(var(--brand-lightness) - 20%) hafiflik değerini %20 azaltmak için. CSS, hsl doygunluğunu ve açıklık miktarlarını ayarlayarak tüm renkleri aynı ton ailesinde tutabildiğinden, bu bir renk şeması oluşturmanın temelidir.

Açık tema #

Her renk varyantı, eşleştirme şemasıyla işaretlenecektir, bu durumda, her birinin sonuna -light.

Marka #

Marka renginden başlayarak, sarılarak yeniden oluşturulur. --brand-hue, --brand-saturation Ve --brand-lightness hsl içindeki özel özellikler () fonksiyon parantezi, herhangi bir hesaplama yapmadan:

* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

Metin renkleri #

Ardından, bir renk şemasının temelleri metin renklerine ihtiyaç duyar. Açık bir temada metin çok koyu olmalıdır. Aşağıdaki renklerin açıklığının ne kadar düşük, %50’nin oldukça altında olduğuna dikkat edin.

* {
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light%10 açıklıkta çok koyu olduğu için, ağır %100 doygunluğu korur, böylece marka rengi koyu koyu lacivertte görünmeye devam edebilir.

--text2-light1. renk kadar koyu değil, bu da ikincil bir renk olduğu kadar iyi ve aynı zamanda çok daha az doygun.

Yüzey renkleri #

Yüzey renkleri, metnin üzerine veya içine oturduğu arka planlar, kenarlıklar ve diğer dekoratif yüzeylerdir. Açık bir temada, koyu olan metin renklerinin aksine bunlar açık renklerdir. hsl ile açık renkler oluşturmak için üçüncü açıklık değerinde daha yüksek yüzde değerleri kullanacağız. Ayrıca doygunluğu da düşüreceğiz, böylece açık griler çok renkli görünmüyor.

* {
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
}

gibi etkileşimli anlar için dekoratif renklerin daha fazla varyanta ihtiyaç duyması nedeniyle 4 yüzey rengi oluşturulmuştur. :focus veya :hover veya kağıt katmanlarının görünümünü oluşturmak için. Bu senaryolarda, geçiş yapmak güzel --surface2-light fareyle üzerine gelindiğinde --surface3-lightbu nedenle fareyle üzerine gelmek kontrastta bir artışa neden olur (%99 açıklıktan %92 açıklığa; daha koyu hale getirir).

gölgeler #

Bir renk şemasındaki gölgeler yukarıda ve ötededir, ancak efekte gerçekçi bir doğa katar ve gerçekçi olmayan siyah tabanlı gölgelerden sıyrılmasına yardımcı olur. Bunu yapmak için, gölgenin rengi hue özel özelliğini kullanır, tonla biraz doygun olur ama yine de çok koyu olur. Esasen çok koyu, hafif mavi bir gölge oluşturmak.

* {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}

--surface-shadow-light bir hsl işlevine sarılmamış. Bunun nedeni, --shadow-strength değer bir miktar opaklık oluşturmak için birleştirilecek ve CSS’nin hesaplamaları gerçekleştirmek için parçalara ihtiyacı var. atla rad gölge bölümü daha fazla öğrenmek için.

Açık renkler bir arada #

Açık renklerden herhangi birinin nasıl yapıldığını bulmak için etrafa bakmanıza gerek yok, hepsi CSS’de tek bir yerde.

* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
--shadow-strength-light: .02;
}

CodePen’de korumalı alan

Koyu tema #

Çoğu marka karanlık bir temayla başlamaz; bu, birincil, genellikle daha hafif olan temalarının bir çeşididir. Öte yandan kullanıcılar, gece gibi farklı bağlamlar için genellikle karanlık bir tema seçerler. Bu faktörler, karanlık temalarla ilgili iki şeyi aklımda tutmama neden oldu:

  1. Kullanıcılar bu temayı kullanırken genellikle karanlıkta olacaklardır, bu yüzden karanlıkta test edin.
  2. Renkler, aşırı yoğun olduğu için ekranda titreşmeyecek şekilde doygunluğunu azaltmalıdır.

Marka #

Açık tema 3 marka hsl renk kanalı değerlerini değiştirmeden kullandı, koyu tema değiştirmedi. Doygunluk yarıya indirilir ve hafiflik görece %50 oranında azaltılır.

* {
--brand-dark: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 2)
calc(var(--brand-lightness) / 1.5)
);
}

Metin renkleri #

Koyu bir temada yazı renkleri açık olmalıdır. Aşağıdaki renkler, onları beyaza yaklaştıracak şekilde yüksek açıklık değerlerine sahiptir.

* {
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
}

Yüzey renkleri #

Koyu bir temada yüzey renkleri koyu olmalıdır. Aşağıdaki renklerin açıklığı ve doygunluğu düşüktür, 1. yüzey %10 ile en koyudur.

* {
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

gölgeler #

Karanlık bir temada gölgeleri görmek çok zor olabilir. Zaten oldukça karanlık olan bir şeyi karartmak zor olduğu için mantıklı. burası --shadow-strength-dark bir değişkeni değiştirerek gölgeleri koyulaştırmamıza izin verdiği için çok kullanışlı oluyor.

* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}

Ayrıca, o gölgede ne kadar doygunluk olduğuna bakın. Arayüze baktığınızda rengi fark edebiliyor musunuz? Doygunluğu devtools’tan kaldırmayı deneyin, hangisini tercih edersiniz?!

Koyu renkler bir arada #

* {
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}

CodePen’de korumalı alan

Soluk tema #

Bu renk şeması tamamen hafifliği ve doygunluğu düzenlemekle ilgilidir. Hâlâ görünür bir renk tonuna sahip olmak için yeterli doygunluk mevcut olmalıdır, ancak yine de loş ve düşük kontrast olması amaçlandığından kontrast puanlarını zar zor geçmelidir.

Marka #

* {
--brand-dim: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 1.25)
calc(var(--brand-lightness) / 1.25)
);
}

Metin renkleri #

* {
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
}

Yüzey renkleri #

* {
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

gölgeler #

* {
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}

Hepsi bir arada loş renkler #

* {
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}

CodePen’de korumalı alan

Erişilebilir renkler #

Koyu metin rengi setindeki en düşük açıklığın %65 ve koyu yüzeylerdeki en yüksek açıklığın %25 olduğuna dikkat edin. Bu, aralarında hafiflik soluma odasının %40’ı demektir. Hafif temada, hafif temada %55’lik bir nefes alma alanı vardır. Metin ve yüzey renkleri arasındaki açıklık farklarını %40-50 civarında tutmak, renk kontrast oranlarını yüksek tutmaya yardımcı olurken, aynı zamanda puanların düşük olması durumunda ayarlamak için ince bir kaldıraç olabilir.

Bir araç geçtiğimi gösterene kadar hafiflik değerini artırmanın etkileşimi olan “bump bum til ya pass” diyorum.

geçene kadar açıklığı azaltmak ve kontrastı artırmak için shift + aşağı ok basılır

Bu meydan okumada oluşturulan temaların her biri kontrast puanlarını geçer. Soluk renk şeması, aralarında en düşük kontrasta sahiptir, ancak yine de minimum gereksinimleri karşılar. Takımdaki diğer kişilerin iyi zıt renkler kullanmasına yardımcı olmak için, bir yüzey rengini erişilebilir bir metin rengiyle eşleştiren bir sınıf adı oluşturmak iyi bir fikirdir.

.surface1 {
background-color: var(--surface1);
color: var(--text2);
}

.surface2 {
background-color: var(--surface2);
color: var(--text2);
}

.surface3 {
background-color: var(--surface3);
color: var(--text1);
}

.surface4 {
background-color: var(--surface4);
color: var(--text1);
}

Loş yüzeyin ve metin eşleşmelerinin ekran görüntüsü VisBug

Rad Gölge #

Temalar, adlı bir yardımcı sınıf kullanır. .rad-shadow. Bu gölge şu anda oluşturuldu Pürüzsüz Gölge çok takdir ettiğim araç. Oluşturulan snippet’ini aldım ve kendi renklerim ve opaklık hesaplamalarıyla özelleştirdim. Bunun nedeni, her renk şemasında ayarlayabileceğim bir gölge oluşturmaktı.

Bunu başarmak için, ayarlanacak her renk düzeni için 2 değişken, bir gölge rengi ve bir gölge gücü oluşturdum. Renk, doygunluk ve koyuluk ayarlamaları içindir, güç ise koyu bir renk şeması olduğunda gölge yoğunluğunu artırmanın kolay bir yoludur. Sonuç böyle bir şeydi.

:root {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}

.rad-shadow {
box-shadow:
0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
;
}

Renk düzenimde gölgelerle daha ileri gidecek olsaydım, tasarımın tüm gölgeleri arasında ışık yönü aynı olması gerektiğinden, gölge açılarını da bir tasarım belirteci sabiti yapardım.

Renk şemalarının kullanılması #

Renklerin önceden tanımlanması tamamlandığında, onları şema agnostik özelliklerine dönüştürmenin zamanı geldi. Demek istediğim, bu renk şeması projesinde bir CSS yazarı olarak, belirli bir renk şemasının değerine nadiren erişilmesi gerekir. Temanın içinde kalmayı kolaylaştırmak istiyorum.

Bunu başarmak için, renk şemasının kullanımı, birazdan tanımlayacağımız genel özel özellikler aracılığıyla özel olarak yapılmalıdır. Bu şekilde, tasarım değişkenlerini kullanan kişilerin o anda hangi renk düzeninin ayarlandığı konusunda endişelenmesine gerek kalmaz, yalnızca yüzey ve metin renklerini kullanmaları gerekir. Yerine color: var(--text1-light) kullanmak color: var(--text1). Renklerin tüm uyarlanması ve döndürülmesi, CSS’de çok daha yüksek düzeyde yapılır.

Aşağıdaki kod bloğundaki hafif temanın bağlantı stillerine göz atarak, genel bir özel özelliği açık temaya özgü renkle bağlayın. Artık tüm kullanımlar var(--brand) açık marka rengini kullanacaktır.

Açık tema (otomatik) #

:root {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}

Site artık açık temayı kullanıyor. Bu çok eğlenceli, başarılı bir an! Önceden tanımlanmış renklerimizi diğer renk şeması bağlamlarında kullanırken, bu anlardan birkaçını daha yaşayalım.

Koyu tema (otomatik) #

TheComedicComedian (prefers-color-scheme: dark) {
:root {
color-scheme: dark;

--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
}

Açık tema #

[color-scheme="light"] {
color-scheme: light;

--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}

Koyu tema #

[color-scheme="dark"] {
color-scheme: dark;

--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}

Soluk tema #

[color-scheme="dim"] {
color-scheme: dark;

--brand: var(--brand-dim);
--text1: var(--text1-dim);
--text2: var(--text2-dim);
--surface1: var(--surface1-dim);
--surface2: var(--surface2-dim);
--surface3: var(--surface3-dim);
--surface4: var(--surface4-dim);
--surface-shadow: var(--surface-shadow-dim);
--shadow-strength: var(--shadow-strength-dim);
}

Bu noktada yazarlar, sağlanan renk şeması jeneriklerini gerektiği gibi kullanmakta özgürdür ve temalar hakkında bir daha asla endişelenmelerine gerek yoktur.

Çözüm #

Artık nasıl yaptığımı bildiğine göre, nasıl yapardın?! 🙂

Yaklaşımlarımızı çeşitlendirelim ve web üzerinde oluşturmanın tüm yollarını öğrenelim. Bir Codepen oluşturun veya kendi demonuzu barındırın, onunla bana tweet atın, ben de onu aşağıdaki Topluluk remiksleri bölümüne ekleyeyim.

Kaynak #

Topluluk remiksleri

  • ChrisJohnsten-kruining için bir renk tonu kaydırıcısı, durum renkleri ve kontrast modları eklendi. no-preference, more Ve less: gösteri.

İlgili Mesajlar

Yorum eklemek için giriş yapmalısınız.