Siteni renklendir

Web Siteni CSS tanımlarıyla Renklendir

Dikkat ederseniz her konuda 'site' kelimesini kullanarak, konu'dan fayda sağlayacağı platformu seçmeksizin web ağına bağlı tüm domainlere yardımcı olabilmek adına bir şeyler paylaşıyorum. Bilgi sahibi olduğunuzu düşündüğünüzde küçük çaplı konular gibi görünsede bilmeyenler için yararlı olduğunu düşündüğümden siteniz veya bloğunuz'da görünüm ve tarzını renklendirecek küçük tanımlar (css kodlar)sunucam.

tudimenu li { background: #f4524d; color: white; border: 1px solid gray; padding: 2px 3px 4px 5px; margin-top: 2px; margin-right: 3px; margin-bottom: 4px; margin-left: 5px; border-radius: 8px; display: block; float: left; -webkit-box-shadow: 3px 3px 4px #000; }

Üsteki CSS kodları aşağıda bulunan HTML kodlarına ait tanımlardır.

<div class="tudimenu">
<li><a href="sayfa">Ana Sayfa</a></li>
<li><a href="sayfa url">ikinci</a></li>
<li><a href="sayfa url">üçüncü</a></li>
<li><a href="sayfa url">dördüncü</a></li>
<li><a href="sayfa url">beşinci</a></li>
</div>

Bu HTML ve CSS kodlarını kullanıp örnek olarak bir buton menü hazırladım. Siz dilerseniz aşağıda vereceğim tanımları farklı yerlerde kendinize göre değişiklikler yapıp buton, sütun, tablo, veya istediğiniz eklentilerde kullanabilirsiniz. Fazla detaylara giremediğim için kusuruma bakmayın oldukça vakit alan ve geniş bir konu. Aşağıda kullanımlarıyla ilgili açıklama ve örnekleri inceleyebilirsiniz.

Background(arka fon)

Türkçe kelime anlamı 'arka fon' olan BLACKROUND renk, resim, klip ve ses gibi görsel ve işitsel nesneleri arka plana yerleştirmemize yardımcı olan tanım türlerindendir. Şimdi gelelim nasıl kullanıldığına.

blackround: Arka fon için kullanılan renk veya görseli içine alan tanımdır.

background-color: Sadece renk seçimi için kullanılan tanımdır.

background-image görsel için kullanılan tanımdır.

Bunlar arka fon için kullanabileceğiniz türün tanımları.
örnek:
background: #f4524d;

Border(sınır)

Eklenti ve temanızda dolgunun bitiş sınırını göstermek için kullanılan tanımlardır.

border: sınır için kullanılan tanımlardır.

border-(right)(left)(top)(bottom): Sağ, sol, üst ve alt sınırı için kullanılan tanımlardır.

border-radius: Kenarlıkların eğimi için kullanılan tanımlardır.
örnek:

border: 1px solid gray;

Padding(kenara uzaklığı)

Kullanıldığı dolguya olan uzaklığını belirleyen tanımdır.

padding: Tüm dolguya olan uzaklık.

padding-(left)-(right)-(top)-(bottom): sağ, sol, üst ve alt dolgunun uzaklığı.
örnek:
padding: 2px 3px 4px 5px;

margin(kenar boşluk)

Kenarların uzaklığı için kullanılan tanınlardır. Örnekte her bir kenar uzunluğunu farklı tanımlarla gösterdim.
örnek:
margin-top: 2px; margin-right: 3px; margin-bottom: 4px; margin-left: 5px;

Shadow(gölge)

Dolgu, tablo ve butonlarda kullanabileceğiniz gölgelik efecti veren tanım.
örnek:
webkit-box-shadow: 3px 3px 4px #000;

Radius

Sınır çizgisinin birbirine eğilimi için kullanılan tanımdır.
örnek:

border-radius: 8px;

Display(düzen)

Öğenin düzenini sağlayan tanım.
örnek:

display: block;

Float

öğenin yerini belirleyen tanım.
örnek:

float: left;