CSS Renkler ve Tipografi

CSS renkler ve tipografi, bir web sayfasının görsel çekiciliğini artırmanın ve kullanıcı deneyimini iyileştirmenin temel unsurlarıdır. Renkler, tasarımın ruhunu yansıtırken, tipografi (yazı tipleri) metnin okunabilirliğini ve genel estetiği belirler. CSS ile renkleri ve yazı tiplerini nasıl etkili bir şekilde kullanabileceğinizi öğrenmek, modern web tasarımında önemli bir adımdır.


CSS Renkler

Renkler, web sayfalarının estetik görünümünü belirlerken aynı zamanda sayfa düzenini, vurgu yapılacak öğeleri ve etkileşimi yönlendiren önemli bir araçtır. CSS renkleri çeşitli yollarla belirtilebilir:

  1. Adlandırılmış Renkler (Named Colors)
    CSS, yaygın renklerin adlarını kabul eder. Örneğin: red, blue, green, yellow, black gibi renkler doğrudan kullanılabilir.Örnek:
body {
  background-color: lightblue;
}

2. Hex Kodları (Hexadecimal Colors)
Renkler, altı haneli bir hex koduyla da belirtilebilir. Her renk, kırmızı (R), yeşil (G) ve mavi (B) bileşenlerinin hexadecimal (onaltılık) değerlerinden oluşur. Örneğin, beyaz renk için #FFFFFF, siyah için ise #000000 kullanılır.

Örnek:

p {
  color: #333333;
}

3. RGB ve RGBA
rgb() fonksiyonu, renkleri kırmızı, yeşil ve mavi bileşenlerinin (0 ile 255 arasında) bir kombinasyonu olarak tanımlar. rgba() ise aynı bileşenlere ek olarak opaklık değeri ekler (0 ile 1 arasında bir değer).

Örnek:

h1 {
  color: rgb(255, 99, 71); /* Tomates kırmızı */
}

div {
  background-color: rgba(255, 99, 71, 0.5); /* Yarı şeffaf kırmızı */
}

4. HSL ve HSLA
hsl() fonksiyonu, bir rengi ton (hue), doygunluk (saturation) ve parlaklık (lightness) değerleriyle tanımlar. hsla() ise buna ek olarak opaklık (alpha) değeri ekler.

Örnek:

p {
  color: hsl(120, 100%, 50%); /* Yeşil */
}

section {
  background-color: hsla(240, 100%, 50%, 0.5); /* Yarı şeffaf mavi */
}

5. currentColor
Bu anahtar kelime, mevcut metin rengiyle aynı rengi kullanmak için idealdir.

Örnek:

button {
  color: #ff6347;
  background-color: currentColor;
}


CSS Tipografi

Tipografi, metnin görünümünü ve okunabilirliğini kontrol etmek için kullanılan bir CSS özelliğidir. Doğru tipografi, metnin doğru şekilde anlaşılmasını sağlar ve kullanıcı deneyimini iyileştirir.

  1. font-family
    Yazı tipi seçimi, tipografide en önemli adımdır. Web tasarımında genellikle birkaç font ailesi belirlenir. Ana font ilk sırada, yedek fontlar ise daha sonraki seçeneklerde yer alır.Örnek:
body {
  font-family: 'Arial', sans-serif;
}

  • serif: Serifli fontlar (örneğin Times New Roman) geleneksel bir görünüm sağlar.
  • sans-serif: Serif olmayan fontlar (örneğin Arial, Helvetica) modern ve okunabilirlik açısından tercih edilir.
  • monospace: Tek aralıklı fontlar (örneğin Courier) her harf için eşit genişlikte alan sağlar.

font-size
Yazı boyutunu belirler. Birçok birim kullanılabilir: px, %, em, rem, vw, vb.

Örnek:

h1 {
  font-size: 36px;
}
p {
  font-size: 1.2em; /* Ebeveyn font boyutunun %120'si */
}

font-weight
Yazının kalınlık derecesini belirler. Değer olarak normal, bold, veya 100 ile 900 arasında bir sayısal değer kullanabilirsiniz.

Örnek:

h2 {
  font-weight: bold;
}

.strong-text {
  font-weight: 700; /* Kalın yazı */
}

line-height
Satır yüksekliği, metin satırları arasındaki boşluğu ayarlamanıza olanak tanır. Bu, metnin daha rahat okunmasını sağlar.

Örnek:

p {
  line-height: 1.6;
}

letter-spacing
Harfler arasındaki boşluğu kontrol eder. Bu özellik, metnin okunabilirliğini etkileyebilir ve stilize edilebilir.

Örnek:

h1 {
  letter-spacing: 2px;
}

text-align
Metnin yatayda hizalanmasını sağlar. Yaygın değerler: left, center, right, justify.

Örnek:

h2 {
  text-align: center;
}

text-transform
Metnin büyük harfli (uppercase), küçük harfli (lowercase), ya da baş harflerin büyük olduğu (capitalize) şekilde stilize edilmesini sağlar.

Örnek:

h1 {
  text-transform: uppercase;
}

p {
  text-transform: capitalize;
}

text-decoration
Metne çizgi eklemeyi sağlar. Değerler: underline, line-through, overline, none.

Örnek:

a {
  text-decoration: none;
}

font-style
Yazı tipinin stilini belirler. Genellikle italik veya normal seçenekleri vardır.

Örnek:

em {
  font-style: italic;
}

Leave a Reply

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