Anasayfa / Web Tasarım / Css / CSS Renklendirme Ve Arkaplan Uygulamaları (Ders 5)

CSS Renklendirme Ve Arkaplan Uygulamaları (Ders 5)

Bu yazımızda belirtilen komutlar yazıları renklendirmek ve arka plan işlemlerinde kullanılabilir.

color

Bu komut ile yazılarımızın renkleri üzerinde oynamalar yapabiliriz.

<style>
   li[name="isim"] {color: red;}
   li[name="hex"] {color: #AB00F4;}
   li[name="rgb"] {color: rgb(100,120,55);}
   li[name="rgb2"] {color: rgb(%50,%45,%75);}
</style>

Yukarıda belirtilen şekilde hsl, rgba ve hsla formatlarında renkleri belirtebiliriz.

opacity

Bu komut ile seçtiğimiz yazının saydamlığını belirleyebiliriz. Bu komut 0 ile 1 arasında değer alır. 1 den 0 a doğru gittikçe saydamlık artar. 1 opak, 0 ise tamamen saydam olarak gösterir.

Arkaplan Uygulamaları

Css dilinde arkaplan düzenlemek için bolca seçenek bulunmaktadır. Background kelimesi ile başlayan bütün komutlar arkaplan üzerinde değişiklik yapar. Aşağıda gösterilecek renklendirme ile ilgili komutlar background komutu ile de yapılabilir. Örneğin :

 <style>
  li[name="sayı"] {bacground: 3;}
  li[name="url"] {background: url (arkaplan resminin urlsi);}
</style> 

background-color

Bu komut ile arkaplanın rengini belirleyebiliriz. Bu komut yerine background komutu da kullanılabilir.

background-image

Bu komut ile arkaplana gelecek resmi belirleyebilirsiniz. Bu komut yerine background: url komutu da kullanılabilir.

background-repeat

Bu komut ile arkaplana gelen resmin nasıl tekrar edileceğini veya veya tekrar edilmeyeceği belirlenebilir. Alabildiği değerler şu şekildedir:

DeğerUygulamaÖzelliği
no-repeatbackground-repeat: no-repeat;Tekrar Etmez
repeatbackground-repeat: repeat; Sürekli tekrar eder
repeat-xbackground-repeat: repeat-x; Yan taraflara tekrar eder
repeat-ybackground-repeat: repeat-y; Alt ve üst taraflara tekrar eder
spacebackground-repeat: space; Aralarında boşluk bırakarak sürekli tekrar eder
roundbackground-repeat: round; repeat komutunu gerçekleştirir. Ancak kenarlarda yarım görsel bırakmaz
repeat-x, repeat-ybackground-repeat: repeat-x, repeat-y; Başlangıç noktasının sağ, sol, yukarı, aşağı yönlerinde tekrarlar

background-position

Bu komutu yazmadığımız sürece arkaplanımız sol üst köşeden başlayarak yerleştirilecektir. background-position komutu ile arkaplan görselinin başlangıç konumunu belirtebiliriz. Bu komutun alabildiği değerler şunlardır :

 <style>
   li[name="yukarı"] {background-position: top;}
   li[name="asagi"] {background-position: bottom;}
   li[name="merkez"] {background-position: center;}
   li[name="sag"] {background-position: right;}
</style> 

background-attachment

Bu komut background-image komutu ile sayfamıza eklediğimiz arkaplan resminin ekran kaydırıldığında nasıl duracağını belirtmek için kullanılır. Alabildiği değerler şunlardır :

Fixed{background-attachment: fixed;}Arkaplan görülen ekrana göre sabittir
Local{background-attachment: locale;} Aşağı kayma ile arkaplan değişebilir ve sabittir
Scroll{background-attachment: scroll;} Arkaplan içerik ile birlikte kaymaz sabittir

background-clip

Bu komut arkaplana belirlenen renk atamasının hücrelerin hangi kısımlarını kapsayacağını belirtir. Alabildiği parametreler şunlardır :

{background-clip: border-box;} Hücrenin kenarlıklarını (çerçevesini) da kapsar
{background-clip: padding-box;} Hücrenin kenarlıkları hariç tamamını kapsar
{background-clip: content-box;} Sadece içerik kısmını kapsar

background-origin

Bu komutun kullanımı background-clip ile aynıdır. Aldığı parametrelerde aynıdır. İki komut arasındaki fark ise background-origin komutu arkaplan resminin merkezini ele alarak atama yapmasıdır.

Bir sonraki yazımızda görüşmek üzere …

Hakkında Furkan Yağmur

Check Also

web-gemisi

CSS’e Giriş (Ders 1)

CSS(Cascading Style Sheets) HTML sayfaları içine gömülebilen bir dildir. CSS dilinin ana amacı belirtilen etiketlerinin …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir