html renk kullanımı

12 – Html Renk Kullanımı

Html renk kullanımı ön tanımlı olarak bulunan renk isimleri ile yada RGB, RGBA, HEX, HSL, veya HSLA renk kodlamaları ile yapılır.

Html de ön tanımlı renkler 140 civarındadır. Bu renkleri arama motorlarında “color palette” veya “color picker” yazarak ulaşabilirsiniz.

Renkler Güzeldir, istediğimiz ambiyansı vermemizi sağlar.

Sayfamızın görseli sitemize gelen ziyaretçilerin hoşuna gitmeli, ilgi çekici olmalı. Ayrıca renk uyumuna da dikkat etmeliyiz.

Bir web sayfası tasarlamadan önce ön çalışma hazırlanmalı ve nasıl bir proje düşündüğümüz, ne istediğimiz, nasıl bir tema, hangi renkleri kullanacağımız gibi sorular önceden cevaplandırılmalıdır.

Sırası ile kullanım örneklerini inceleyelim.

Renkler Nasıl Kullanılıyor?

Html öğelerinin style attribute ‘e direkt olarak rengimizin adını color özelliği ile çağırarak kullanılmasıdır.

Örnek Renk İsimleri

Örnek Html Renkler

Arka Plan Renk Değiştirme – background-color

Html öğelerimizin arka plan renklerini değiştirmemizi sağlar. Örnek kullanımı style=”background-color:yellow” şeklindedir.

Öntanımlı renkleri verebileceğimiz gibi hex, rgb, rgba, hsl ve hsla gibi renk değerlerini de verebiliriz.

Html içeriklerimizde zemin rengi kullanarak daha hoş görüntü elde etmemizi sağlar.

Aşağıdaki örnek kodlarda hazır tanımlı renkleri kullandım.

Örnek

Arka Plan Rengi Değiştirme

Metin Renk Değiştirme – color

Style attribute içersinde tanımlanan color anahtarına verilen renk değeri ile yazılan metnin rengi değiştirilir. Örnek kullanımı style=”color:purple” şeklindedir.

Örnek

Metin Rengini Değiştirme

Kenarlık Renk Değiştirme – border

Html öğelerine kenarlık ve renkleri eklememizi sağlar. Bu özelliği kullanabilmek için kenarlığımıza bir kalınlık vermeliyiz ki bordür rengi gözüksün.

Örnek

border rengi verme

Ayrıca burada border içerisinde kenarlığımızı, kenarlık tipini ve rengini belirledik. Bunları tek tek belirleyebiliriz. Ancak bu konu css derslerinde detaylı işleniyor.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir