CSS Temelleri: Renklerle Çalışmak

Bir web sitesi tasarlarken göz önünde bulundurulması gereken birçok faktör vardır; yazı tipi, UX akışı ve çok daha fazlası. Çok önemli bir tasarım öğesi renktir. Marka rengi, kenarlık rengi ve arka plan rengi gibi basit kararlar bile kesin ve fark edilir bir etki sağlar.

Bu makalede, CSS renklerinin temellerini ele alacağız ve bir HTML sitesini kusursuz görünümlü bir web sitesine nasıl dönüştüreceğinizi öğreneceğiz.

CSS Renklerine Başlarken

Bir bilgisayarın anlayabileceği CSS'deki renkleri tanımlamanın belirli bir yolu vardır. Genellikle rengi çeşitli bileşenlere bölerek, istenen rengi oluşturmak için karışık bir ana renk kümesi hesaplayarak yapılır. CSS'de bir rengi tanımlamanın birkaç farklı yolu vardır.

Renk adlarını Anahtar Sözcük olarak kullanma

Çoğu modern tarayıcının desteklediği yaklaşık 140 CSS renk adı vardır. kadar basit olabilir kırmızı veya camgöbeği renk anahtar sözcüğü için. Orta derecede bir renk yelpazesine yardımcı olmasına rağmen, gölgeler ve renk tonları üzerinde sıfır kontrole sahip birkaç set renkle sınırlısınız. Burası, daha yüksek CSS renk seçenekleri yelpazesine atlamanız gereken yerdir.

/*Syntax*/
kırmızı renk;
renk: kıpkırmızı;
renk: arduvaz mavisi;

RGB Değerlerini Kullanma

Bir web sitesi veya uygulama tasarlarken, renk uyumu çok önemlidir - kesinlikle düşündüğünüz son şey olmamalıdır. CSS'de bir RGB rengini temsil etmek için üç yöntem kullanabilirsiniz. Bunlar onaltılı dizge gösterimi, RGB işlevsel gösterimi ve HSL işlevsel gösterimidir. İşte her birine daha yakından bir bakış.

Onaltılık Dize Gösterimi

Onaltılık dize gösterimi her zaman karakterle başlar #. Bu karakterin ardından, belirli bir renk kodunun onaltılık basamaklarını kullanarak renkleri belirlersiniz. Dize büyük/küçük harf duyarlı değildir, ancak küçük harf kullanmak gelenekseldir. İşte bazı kullanım durumları:

#rrggbb

Sayısal bir rengi tanımlamanın en yaygın yolu budur. Kırmızı, yeşil ve mavi bileşenleri ile tamamen opak bir renktir. 0xrr, 0xgg, ve 0xbb sırasıyla.

#rrggbbaa

Rengin saflığını işleyen bir alfa kanalıyla yukarıda özetlenen RGB kriterlerini takip eder. daha düşük 0xaa değer, renk o kadar yarı saydam olur.

#rgb

eğer rengin varsa #556677, basitçe şöyle yazabilirsiniz #567 temsil ettiğinden 0xrr, 0xgg, ve 0xbb sırasıyla. Örneğin, #000 (veya #000000) siyah iken #fff (veya #ffffff) beyazdır.

#rgba

Tarafından belirtilen bir alfa kanalı ile yukarıdaki kriterleri takip eder. 0xaa opaklığı kontrol etmek için.

RGB Fonksiyonel Gösterimi

RGB işlevsel gösterimi, kırmızı, yeşil ve mavi bileşenleri kullanan renkleri temsil eder. kullanılarak tanımlanır rgb() işlevi birincil kırmızı, yeşil ve mavi bileşenler (ve isteğe bağlı bir alfa kanalı) biçiminde giriş parametrelerini kabul eder. Kırmızı, yeşil ve mavi değerler arasında bir tam sayı olmalıdır. 0 ile 255 (dahil) veya %0 ile %100 arasında değişen bir yüzde. Öte yandan, alfa kanalı 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasındaki değerleri kabul eder. Ayrıca %0 (0.0 ile aynı) ve %100 (1.0 ile aynı) arasındaki yüzde değerini de kabul eder.

/*Syntax*/
renk: rgb (rr, gg, bb);
renk: rgba (rr, gg, bb, a);

HSL Fonksiyonel Gösterimi

HSL işlevsel gösterimi, tonu, doygunluğu ve parlaklığı kullanarak rengi temsil eder. Şuna çok benziyor rgb() kullanım açısından işlev görür. kolayca yapabilirsiniz herhangi bir rengin onaltılık değerini bulun bilgisayarınızın ekranında. Bu renk yönteminde, renk tonu, renk tekerleğindeki konuma göre gerçek rengi tanımlar. Doygunluk, mümkün olan maksimum renk tonuyla grinin yüzdesidir. Parlaklık, arttıkça rengi en karanlıktan mümkün olan en parlak görünüme geçirir.

Ton değeri (H), CSS'de desteklenen açı birimi tarafından belirlenir. O içerir derece, rad, mezun, ve dönüş. Doygunluk (S), tondan oluşan son rengin yüzdesini belirtir. Parlaklık (L) bileşeni gri seviyesini tanımlar.

/*Syntax*/
renk: hsl (XX derece, %XX, %XX);
renk: hsl (XXdönüş, %XX, %XX);

Renkleri HTML Öğelerine Uygulama

CSS'de, renk özellik, içeriğin ön plan rengini tanımlar ve arka plan rengi HTML tarafından yapılandırılan içeriğin arka plan rengini tanımlar. Bir öğe oluşturulduğunda, ona stil vermek için renk özelliklerini kullanabilirsiniz.

Metinler için Renk Özelliği

NS renk özelliği, metin çizerken ve her türlü metin dekorasyonuna ihtiyaç duyduğunuzda kullanılır. kullanabilirsiniz metin-dekorasyon-renk farklı renklerde alt çizgiler, üst çizgiler veya üstü çizili çizgiler oluşturma özelliği. kullanarak metnin arka plan rengini değiştirebilirsiniz. arka plan rengi Emlak. kullanarak metne gölge efekti uygulayabilirsiniz. Metin gölgesi Emlak. seçebilirsiniz metin-vurgu-renk metin alanlarında vurgu sembolleri çizerken.

Kutular için Renk Özelliği

Bildiğiniz gibi bir web sayfasındaki her şey kutu modelini takip eder. Bu nedenle, her öğe bir tür içerik ve isteğe bağlı dolgu, kenarlık ve kenar boşluğu alanına sahip bir kutudur. kullanabilirsiniz arka plan rengi ön plan içeriği olmadığında özellik. Bir metnin sütunlarını ayırmak için bir çizgi çizerken, sütun-kural-renk bunun için mülk. bir anahat rengi anahattı renklendirme özelliği. Anahattın sınırdan farklı olduğuna dikkat edin; odak göstergesi görevi görür.

Kenarlıklar için Renk Özelliği

Herhangi bir HTML öğesinin bir sınırı olabilir. ayarlayabilirsiniz sınır rengi olarak mülk kenarlık rengi, kenarlık-sağ-renk, kenarlık-alt-renk, ve kenarlık-sol-renk karşılık gelen tarafların kenarlık rengini ayarlamak için. Yine de steno özelliğini kullanmak iyi bir uygulamadır.

NS border-inline-start-color özellik, sınırın başlangıca en yakın olan kenarlarını renklendirmenizi sağlar. Öte yandan, border-inline-end-color özellik, bir kutu içindeki metin satırlarının başlangıcının sonunu renklendirmenizi sağlar. Zevkinize göre değişse de yazma modu, metin yönlendirme, ve yön.

Özet: Renk ve Erişilebilirlik

Güzel tasarlanmış bir web sitesi, kullanılan renkten büyük ölçüde etkilense de, her zaman erişilebilir olduğundan emin olmalısınız. Yanlış renk kullanımı, web sitenizde önemli trafik kaybına neden olabilir.

Onaltılık dize gösterimlerini, renk adlarını veya RGB değerlerini kullanmak tamamen size kalmış. Mevcut metni güçlendirmek için renkleri kullandığınızdan emin olun ve belirli bir görsel hiyerarşiyi takip etmesini sağlayın. Gelişmekte olan bir web geliştiricisiyseniz, renk teorisi hakkında daha fazla bilgi edinmek ve kendi paletinizi oluşturmak olağanüstü bir fikirdir. O zamana kadar mutlu ve renkli kodlamalar!

Yaratıcı Projelerinizi Yükseltmek için Renk Teorisini Nasıl Kullanırsınız?

Doğru renkleri doğru şekilde kullanarak yaratıcı projelerinizi yepyeni bir düzeye taşıyabilirsiniz.

Sonrakini Oku

Yazar hakkında