CSS

8. List Table Variables Functions

Introduction to CSS

CSS Introduction

CSS (Cascading Style Sheets), HTML (HyperText Markup Language) ile birlikte kullanılan bir stil dilidir.
Bu eğitim, CSS'nin temellerini, kullanım alanlarını ve doğru uygulamalarını kapsamaktadır.

CSS Nedir?

CSS, "Cascading Style Sheets" (Basamaklı Stil Şablonları) ifadesinin kısaltmasıdır.
CSS, HTML öğelerinin ekran, kağıt veya diğer medya türlerinde nasıl görüntüleneceğini tanımlar.

CSS'nin Temel Bileşenleri

CSS'nin temel bileşenleri şunlardır:

Seçiciler (Selectors) : HTML öğelerini seçmek için kullanılır. Örneğin, bir elementin kimliğini, sınıfını veya türünü seçebilir.
Deklarasyon Blokları (Declaration Blocks) : Seçilen elementin stil özelliklerini belirler. Her deklarasyon bir özellik ve bir değerden oluşur.
Özellikler (Properties) ve Değerler (Values) : Özellikler, hangi CSS özelliğinin değiştirileceğini belirtir (örneğin, renk, yazı tipi boyutu). Değerler ise bu özelliklerin nasıl uygulanacağını belirtir.

CSS'nin Uygulanma Yöntemleri

CSS, HTML belgelerine üç farklı şekilde uygulanabilir:

Satır içi stiller (Inline Styles) : HTML öğesinin style niteliği içinde tanımlanır. Örneğin:

    <h1 style="color:blue;">Merhaba Dünya</h1>

Dahili stiller (Internal Styles) : HTML belgesinin <head> bölümünde bir <style> etiketi içinde tanımlanır. Örneğin:

    <style>
        h1 {
            color: blue;
        }
    </style>

Harici stiller (External Styles) : Ayrı bir CSS dosyasında tanımlanır ve HTML belgesine <link> etiketi ile bağlanır. Örneğin:

    <link rel="stylesheet" type="text/css" href="styles.css">

CSS Seçicileri

CSS seçicileri, belirli HTML öğelerini hedeflemek için kullanılır. Bazı yaygın seçici türleri şunlardır:

Evrensel Seçici (*) : Tüm öğeleri seçer.
Tür Seçici (element) : Belirli bir türdeki öğeleri seçer.
Sınıf Seçici (.class) : Belirli bir sınıfa sahip öğeleri seçer.
Kimlik Seçici (#id) : Belirli bir kimliğe sahip öğeleri seçer.
Atribut Seçicileri : Belirli bir atributa sahip öğeleri seçer.

CSS'nin Doğru Kullanımı ve Kritik Değerlendirme

CSS'nin doğru kullanımı, temiz ve bakımı kolay kod yazmayı gerektirir. Bazı yaygın hatalar ve bunların nasıl önleneceği:

Özellikle !important kullanımı : Bu özellik, stil kurallarını zorla uygular ancak gereksiz ve aşırı kullanımı kodun karmaşıklığını artırır.
Özelliklerin yinelenmesi : Aynı stil özelliklerini tekrar tekrar tanımlamak yerine, stil kurallarını merkezi bir yerden yönetmek daha iyidir.
Kapsayıcı seçicilerle aşırı özelleştirme : Fazla spesifik seçiciler kodun esnekliğini azaltır. Daha genel ve yeniden kullanılabilir seçiciler tercih edilmelidir.

Sonuç

CSS, web sayfalarının görsel sunumunu kontrol etmede önemli bir rol oynar.
Doğru kullanımı, temiz ve etkili bir tasarım sağlar. Bu eğitimde, CSS'nin temellerini ve en iyi uygulamalarını inceledik.
CSS'nin güçlü yönlerini anlamak ve doğru uygulamak, web geliştirme süreçlerinde büyük avantaj sağlar.

CSS Syntax

CSS (Cascading Style Sheets), web sayfalarının görünümünü ve düzenini tanımlamak için kullanılan stil dilidir. CSS kuralları, seçici ve bildirim bloğundan oluşur. Bu kılavuzda, CSS kurallarının temel yapı taşlarını, doğru ve detaylı bir şekilde ele alacağız. Belirli terimler ve yapıların nasıl kullanıldığını adım adım inceleyeceğiz.

CSS Kuralı Nedir?

Bir CSS kuralı iki ana bileşenden oluşur:

Seçici (Selector) : Stil uygulamak istediğiniz HTML öğesini belirtir.
Bildirim Bloğu (Declaration Block) : Stilin nasıl uygulanacağını belirler.

Bildirim bloğu, küme parantezleri {} içine alınmış bir veya daha fazla stil özelliği ve değer çifti içerir. Her bildirim, noktalı virgülle ; sonlandırılır.

Örnek bir CSS kuralı:

h1 {
    color: blue;
    font-size: 12px;
}

Bu örnekte h1 seçici, başlık 1 elemanını hedefler. Bildirim bloğu ise color ve font-size özelliklerini içerir.

Tek Özellik Bildirimi

Tek bir özellik bildirimi, yalnızca bir stil özelliği ve değeri içerir. Örneğin:

p {
    color: red;
}

Bu kural, tüm <p> (paragraf) elemanlarının metin rengini kırmızı yapar.

Birden Fazla Özellik Bildirimi

Bir bildirim bloğu birden fazla özellik ve değer içerebilir. Örneğin:

div {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

Bu kural, tüm <div> elemanlarının genişliğini 100 piksel, yüksekliğini 100 piksel ve arka plan rengini sarı yapar.

Seçiciler

CSS'de birkaç farklı seçici türü vardır:

Evrensel Seçici : Tüm öğeleri seçer.

    * {
        margin: 0;
        padding: 0;
    }

Tür Seçici : Belirli bir HTML öğesi türünü seçer.

    h1 {
        font-weight: bold;
    }

Sınıf Seçici : Belirli bir sınıfı olan öğeleri seçer. Nokta (.) ile başlar.

    .highlight {
        background-color: yellow;
    }

ID Seçici : Belirli bir ID'ye sahip öğeleri seçer. Kare işareti (#) ile başlar.

    #main {
        width: 80%;
    }

Ayrılmış Seçiciler : Seçicileri daha belirgin yapmak için birleştirilmiş türler.

    p.intro {
        font-size: 14px;
    }

Özellikler ve Değerler

CSS'de çok sayıda özellik vardır ve her özellik, belirli değer türlerini kabul eder. En yaygın özelliklerden bazıları:

color: Metin rengini ayarlar. Renk ismi, hex değeri veya rgb değeri olabilir.

    color: blue;
    color: #0000FF;
    color: rgb(0, 0, 255);

font-size: Metin boyutunu ayarlar. Piksel, yüzde veya em cinsinden olabilir.

    font-size: 16px;
    font-size: 1em;

margin: Dış boşlukları ayarlar. Dört kenar için ayrı ayrı değerler verilebilir.

    margin: 10px;
    margin-top: 10px;
    margin-right: 5px;

padding: İç boşlukları ayarlar.

    padding: 20px;
    padding-left: 15px;

CSS Doğruluğu ve Yaygın Hatalar

CSS yazarken yaygın hatalardan kaçınmak önemlidir:

Yanlış Sözdizimi : CSS kuralları yanlış yazıldığında tarayıcı tarafından görmezden gelinebilir.

    p {
        color blue
    }

    /* Yanlış: Eksik iki nokta üst üste */

Çakışan Kurallar : Aynı öğe için birden fazla kural tanımlandığında, en son tanımlanan kural geçerli olur.

    p {
        color: red;
    }

    p {
        color: blue;
    }

    /* Bu kural geçerli olur */

Öncelik Sorunları : CSS'de öncelik sırasına dikkat edilmelidir. ID seçiciler sınıf seçicilerden daha yüksek önceliğe sahiptir.

    .example {
        color: green;
    }

    #example {
        color: red;
    }

    /* ID seçici daha yüksek önceliğe sahiptir */

Sonuç

Bu kılavuz, CSS sözdiziminin temel yapı taşlarını ve yaygın hatalardan kaçınma yollarını ele almaktadır.
CSS kurallarının doğru uygulanması, web sayfalarınızın profesyonel ve tutarlı görünmesini sağlar.

CSS How to Add

Bu detaylı kılavuz, CSS'nin (Cascading Style Sheets) bir web sayfasına nasıl ekleneceğini kapsamlı ve titiz bir şekilde ele alacaktır. CSS eklemenin üç temel yolu vardır:

Harici CSS (External CSS)
Dahili CSS (Internal CSS)
Satır İçi CSS (Inline CSS)

Bu yöntemlerin her biri, CSS'nin web sayfalarına eklenmesi ve yönetilmesi konusunda farklı avantajlar ve dezavantajlar sunar.

Harici CSS (External CSS)

Harici stil sayfaları, birden fazla web sayfasının görünümünü tek bir dosyayı değiştirerek yönetmeyi mümkün kılar. Bu yöntem, büyük projelerde tutarlılığı sağlamak ve bakım sürecini kolaylaştırmak için idealdir. Harici CSS, <link> elementi kullanılarak tanımlanır ve genellikle <head> etiketi içerisinde bulunur.

Örnek:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <h1>Harici CSS Örneği</h1>
</body>

</html>

Bu örnekte, styles.css dosyası tüm sayfanın stilini belirler.

Dahili CSS (Internal CSS)

Dahili CSS, stil tanımlarının doğrudan HTML dosyasının <head> bölümünde bir <style> etiketi içerisinde tanımlanmasıyla oluşturulur. Bu yöntem, sadece tek bir sayfada stil uygulamak için kullanışlıdır.

Örnek:

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-color: lightblue;
        }

        h1 {
            color: navy;
        }
    </style>
</head>

<body>
    <h1>Dahili CSS Örneği</h1>
</body>

</html>

Satır İçi CSS (Inline CSS)

Satır içi CSS, HTML elemanlarına doğrudan style özniteliği kullanılarak uygulanır. Bu yöntem, tek bir eleman için özel stil uygulamak gerektiğinde kullanılır. Ancak, kodun okunabilirliğini ve bakımını zorlaştırdığı için geniş çapta kullanımı önerilmez.

Örnek:

<!DOCTYPE html>
<html>

<body>
    <h1 style="color:blue;text-align:center;">Satır İçi CSS Örneği</h1>
</body>

</html>

CSS Öncelik Sırası (Priority of CSS)

CSS öncelik sırası, hangi stil tanımının uygulanacağını belirler. Genel kural, spesifik olan stilin daha az spesifik olana göre öncelikli olmasıdır:

Satır İçi CSS (Inline CSS) : En yüksek önceliğe sahiptir.
Dahili CSS (Internal CSS) : Orta düzey önceliğe sahiptir.
Harici CSS (External CSS) : En düşük önceliğe sahiptir.

Bir sayfada birden fazla stil sayfası tanımlanabilir. Bu durumda, spesifiklik ve kaynak düzeni dikkate alınarak stil kuralları uygulanır.

Çakışan Kurallar

Bir stil kuralının birden fazla kaynaktan gelmesi durumunda, en yüksek önceliğe sahip olan kural uygulanır. Bu bağlamda, satır içi stil, dahili ve harici stillerden daha önce gelir. Örneğin, aynı eleman için hem dahili hem de harici stil tanımlandıysa, dahili stil geçerli olur.

Örnek:

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            color: green;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <p style="color: red;">Bu metin kırmızı renkte görünecektir.</p>
</body>

</html>

Bu örnekte, paragrafın rengi satır içi stil nedeniyle kırmızı olacaktır, dahili ve harici stil kurallarına rağmen.

Sonuç

Bu kılavuzda, CSS'nin bir web sayfasına eklenmesi için kullanılan üç temel yöntemi ve CSS öncelik sırasını inceledik.
CSS'nin doğru kullanımı, web sayfalarının stil yönetimini ve bakımını büyük ölçüde kolaylaştırır.
CSS kurallarının spesifiklik ve öncelik sırasını anlamak, karmaşık stil çatışmalarını önlemek ve tutarlı bir görünüm sağlamak için kritiktir.

CSS Selectors

CSS (Cascading Style Sheets) seçicileri, stil uygulamak istediğiniz HTML öğelerini bulmak veya seçmek için kullanılır. Bu dökümanda, CSS seçicilerini ele alarak, doğru ve bilimsel bir yaklaşımla inceleyeceğiz.

Basit Seçiciler

Basit seçiciler, HTML öğelerini ad, id veya class'a göre seçer. Burada üç temel seçiciye odaklanacağız:

Element Seçici
ID Seçici
Class Seçici

1. Element Seçici

Element seçici, HTML öğelerini element adına göre seçer. Örneğin, tüm <p> etiketlerini seçmek için p element seçicisini kullanabilirsiniz:

p {
    color: blue;
}

Bu örnekte, tüm <p> öğeleri mavi renkte olacaktır.

2. ID Seçici

ID seçici, bir sayfa içerisindeki benzersiz bir öğeyi seçmek için kullanılır. ID seçiciyi kullanmak için, öğenin ID'sinden önce bir hash (#) karakteri yazılır. Örneğin, ID'si "header" olan bir öğeyi seçmek için şu şekilde kullanılır:

#header {
    background-color: grey;
}

Bu örnekte, ID'si "header" olan öğenin arka plan rengi gri olacaktır. Unutulmamalıdır ki, her ID bir sayfa içerisinde benzersiz olmalıdır.

3. Class Seçici

Class seçici, belirli bir class attribute'üne sahip HTML öğelerini seçer. Class seçiciyi kullanmak için, class adından önce bir nokta (.) karakteri yazılır. Örneğin, class'ı "intro" olan tüm öğeleri seçmek için şu şekilde kullanılır:

.intro {
    font-size: 16px;
}

Bu örnekte, class'ı "intro" olan tüm öğelerin yazı tipi boyutu 16 piksel olacaktır.

ID ve Class Seçicilerinin Birlikte Kullanımı

ID ve class seçicileri aynı anda bir öğe üzerinde kullanılabilir. Örneğin:

#header.intro {
    color: white;
}

Bu örnekte, ID'si "header" ve class'ı "intro" olan öğe beyaz renkte olacaktır.

Ek CSS Seçicileri

Yukarıda ele alınan temel seçicilerin yanı sıra, CSS'de birçok başka seçici de bulunmaktadır. Bunlar şunlardır:

Grup Seçicileri: Birden fazla öğeyi aynı anda seçmek için kullanılır.

  h1,
  h2,
  p {
      margin-bottom: 10px;
  }

Bu örnekte, <h1> , <h2> , ve <p> öğelerinin alt boşlukları 10 piksel olarak ayarlanmıştır.

Evrensel Seçici: Tüm HTML öğelerini seçer.

  * {
      box-sizing: border-box;
  }

Bu örnekte, tüm öğelerin box model hesaplaması border-box olarak ayarlanmıştır.

Bağımlı Seçiciler: Belirli bir yapıya sahip öğeleri seçer.

  div p {
      color: red;
  }

Bu örnekte, sadece <div> içindeki <p> öğeleri kırmızı renkte olacaktır.

Sonuç

CSS seçicileri, HTML öğelerini stilize etmek için güçlü araçlardır.
Element, ID ve class seçicileri, basit ve etkili seçici türleridir ve temel stil uygulamaları için yeterlidir.
Bununla birlikte, daha karmaşık stil gereksinimleri için diğer CSS seçicilerinin de bilinmesi önemlidir.
Bu dökümanda ele alınan bilgiler, CSS seçicilerinin temellerini anlamak ve doğru uygulamalar yapabilmek için sağlam bir temel oluşturacaktır.

Styling with CSS

CSS Color

CSS renkleri, web geliştirmede görsel tasarımın temel taşlarından biridir. Bu rehberde, CSS'de renklerin nasıl belirtileceği hakkında ayrıntılı bilgi sunulmaktadır.

1. Önceden Tanımlanmış Renk İsimleri

CSS'de bir renk, önceden tanımlanmış bir renk adı kullanılarak belirtilebilir. HTML/CSS'de 140 standart renk adı desteklenmektedir. Bu renk isimlerinden bazıları şunlardır:

Red (Kırmızı)
Blue (Mavi)
Green (Yeşil)

Bu renk isimleri, tarayıcılar tarafından tanınır ve kolayca kullanılabilir.

2. CSS RGB Renkleri

RGB renk değeri, Kırmızı (Red), Yeşil (Green) ve Mavi (Blue) ışık kaynaklarını temsil eder. RGB renk modeli, ekranlarda renklerin nasıl görüntülendiğini açıklamak için kullanılır. RGB renk değeri şu formatta belirtilir:

rgb(red, green, blue)

Her bir bileşen 0 ile 255 arasında bir değere sahip olabilir. Örneğin:

rgb(255, 0, 0) // Kırmızı
rgb(0, 255, 0) // Yeşil
rgb(0, 0, 255) // Mavi

3. CSS HEX Renkleri

Hexadecimal (HEX) renkler, #RRGGBB formatında belirtilir. RR (kırmızı), GG (yeşil) ve BB (mavi) bileşenlerini temsil eden onaltılık (hexadecimal) sayılardır. HEX renkleri şu şekilde yazılır:

#FF0000 // Kırmızı
#00FF00 // Yeşil
#0000FF // Mavi

HEX renkleri, genellikle web tasarımında yaygın olarak kullanılır çünkü kısa ve özdür.

4. CSS HSL Renkleri

HSL, Ton (Hue), Doygunluk (Saturation) ve Açıklık (Lightness) anlamına gelir. HSL renk değeri şu formatta belirtilir:

hsl(ton, doygunluk, açıklık)

Ton (Hue): 0 ile 360 derece arasında bir değerdir. 0 kırmızı, 120 yeşil ve 240 maviyi temsil eder.
Doygunluk (Saturation): Yüzde değeri olarak belirtilir. %0 gri bir tonu, %100 ise tam rengi ifade eder.
Açıklık (Lightness): Yine yüzde değeri olarak belirtilir. %0 siyah, %50 ne açık ne koyu, %100 beyaz anlamına gelir.

Örneğin:

hsl(0, 100%, 50%) // Kırmızı
hsl(120, 100%, 50%) // Yeşil
hsl(240, 100%, 50%) // Mavi

5. RGBA Renk Değeri

RGBA renk değerleri, RGB renk değerlerinin bir uzantısı olup alfa kanalını da içerir. Alfa kanalı, bir rengin opaklığını belirtir. RGBA renk değeri şu formatta belirtilir:

rgba(red, green, blue, alfa)

Alfa: 0.0 ile 1.0 arasında bir değerdir. 0.0 tam şeffaflığı, 1.0 ise tam opaklığı ifade eder.

Örneğin:

rgba(255, 0, 0, 0.5) // %50 şeffaf kırmızı
rgba(0, 255, 0, 0.7) // %70 şeffaf yeşil
rgba(0, 0, 255, 1.0) // Tam opak mavi

Bu rehber, CSS renkleri hakkında temel bilgileri sağlamaktadır. Renklerin doğru kullanımı, web sitelerinin görsel çekiciliğini artırmanın yanı sıra kullanıcı deneyimini de iyileştirir. CSS renkleri hakkında daha fazla bilgi ve örnekler için CSS resmi dokümantasyonunu incelemeniz önerilir.

CSS Backgrounds

Bu kılavuz, CSS arka planları ile ilgili temel kavramları ve özellikleri kapsamlı ve ayrıntılı bir şekilde ele almaktadır.

1. Arka Plan Rengi (background-color)

background-color özelliği, bir elementin arka plan rengini belirtir. Bu özellik, CSS'in en temel ve yaygın olarak kullanılan özelliklerinden biridir ve genellikle estetik ve okunabilirlik amacıyla kullanılır.

Örnek Kullanım:

body {
    background-color: #f0f0f0;
}

2. Arka Plan Resmi (background-image)

background-image özelliği, bir elementin arka planında kullanılacak bir resmi belirtir. Bu özellik, sayfa tasarımında görsel zenginlik katmak için kullanılır.

Örnek Kullanım:

body {
    background-image: url('background.jpg');
}

3. Arka Plan Resmi Tekrarlama (background-repeat)

Varsayılan olarak, background-image özelliği ile belirlenen resim hem yatay hem de dikey olarak tekrar eder. Ancak, arka plan resminin yalnızca bir kez gösterilmesini sağlamak da mümkündür.

Örnek Kullanım:

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
}

4. Arka Plan Eki (background-attachment)

background-attachment özelliği, arka plan resminin kaydırılıp kaydırılmayacağını veya sabit olup olmayacağını belirtir. Bu özellik, kullanıcı sayfayı kaydırırken arka plan resminin sabit kalmasını sağlamak için kullanılır.

Örnek Kullanım:

body {
    background-image: url('background.jpg');
    background-attachment: fixed;
}

5. Arka Plan Pozisyonu (background-position)

background-position özelliği, bir arka plan resminin başlangıç konumunu ayarlar. Varsayılan olarak, bir arka plan resmi bir elementin sol üst köşesine yerleştirilir ve hem yatay hem de dikey olarak tekrar eder.

Örnek Kullanım:

body {
    background-image: url('background.jpg');
    background-position: center;
}

Bu özellik ayrıca belirli yatay ve dikey pozisyonlar belirlemek için de kullanılabilir:

body {
    background-image: url('background.jpg');
    background-position: 50% 50%;
}

Kritik Değerlendirme ve İnceleme

Yukarıdaki bilgiler, CSS arka plan özelliklerinin doğru ve etkili bir şekilde nasıl kullanılacağını göstermektedir. Ancak, bazı konular daha ayrıntılı açıklanmalıdır:

Renk Formatları: background-color özelliği için renk değerleri çeşitli formatlarda belirtilebilir (hexadecimal, RGB, RGBA, HSL, HSLA). Bu konunun detaylandırılması faydalı olacaktır.
Birden Fazla Arka Plan Kullanımı: Modern CSS ile, bir elemente birden fazla arka plan resmi eklemek mümkündür. Bu, tasarımda esneklik sağlar ve bu konu hakkında daha fazla bilgi verilmelidir.
Arka Plan Boyutlandırma (background-size): Arka plan resimlerinin boyutlandırılması, özellikle responsive (duyarlı) tasarımda büyük önem taşır. background-size özelliği hakkında detaylı bilgi verilmelidir.

Sonuç

Bu kılavuz, CSS arka plan özellikleri hakkında temel bilgileri sağlamaktadır.
Ancak, yukarıda belirtilen ek konuların da ele alınması, kapsamlı bir anlayış için önemlidir.
CSS, web tasarımında geniş bir kullanım alanına sahip olup, bu özelliklerin doğru ve etkili bir şekilde kullanılması, profesyonel ve çekici web sayfaları oluşturmanın anahtarıdır.

CSS Borders

CSS (Cascading Style Sheets), HTML belgelerinin sunumunu kontrol etmek için kullanılan güçlü bir araçtır. CSS sınır özellikleri, bir öğenin sınırının stilini, rengini ve boyutunu belirlemek için kullanılır. Bu rehberde, CSS sınır özelliklerini ayrıntılı ve eleştirel bir şekilde inceleyeceğiz.

CSS Sınır Özellikleri

CSS sınır özellikleri aşağıda listelenmiştir:

border-style
border-color
border-width
border-radius

1. border-style

CSS sınır özellikleri, bir öğenin sınırının stilini, genişliğini ve rengini belirtmenizi sağlar. Sınır stili, sınırın nasıl görüneceğini belirler.

Örnek:

div {
    border-style: solid;
}

Bu örnek, bir div öğesinin katı bir sınır stiliyle tanımlanmasını sağlar.

2. border-color

border-color özelliği, dört sınırın rengini ayarlamak için kullanılır. Bu özellik, sınırın hangi renk olacağını belirler.

Örnek:

div {
    border-color: red;
}

Bu örnek, bir div öğesinin sınır rengini kırmızı olarak ayarlar.

3. border-width

border-width özelliği, dört sınırın genişliğini belirtir. Bu özellik, sınırın ne kadar kalın olacağını belirler.

Örnek:

div {
    border-width: 5px;
}

Bu örnek, bir div öğesinin sınır genişliğini 5 piksel olarak ayarlar.

4. border-radius

border-radius özelliği, bir öğeye yuvarlanmış sınırlar eklemek için kullanılır. Bu özellik, sınırların köşelerinin yuvarlatılmasını sağlar.

Örnek:

div {
    border-radius: 10px;
}

Bu örnek, bir div öğesinin köşelerinin 10 piksel yarıçapında yuvarlanmasını sağlar.

Kritik Değerlendirme

Dokümanda verilen bilgiler genellikle doğru ve geçerlidir. Ancak, bazı kritik noktalar üzerinde durulması gerekmektedir:

Çoklu Sınır Stilleri : CSS, aynı öğe üzerinde birden fazla sınır stili kullanma yeteneği sağlar. Ancak, bu tür kullanımların okunabilirliği ve bakımını zorlaştırabileceği unutulmamalıdır. Örneğin:

    div {
        border-style: solid dashed dotted;
    }

Bu, sırasıyla üst, sağ, alt ve sol sınırları için farklı stiller tanımlar. Ancak, bu tür bir kullanımın anlamlı olup olmadığını dikkatlice değerlendirmek gerekir.

Spesifik Taraf Renkleri ve Genişlikleri : CSS, sınır renkleri ve genişlikleri için spesifik taraf ayarlarına izin verir. Örneğin:

    div {
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: yellow;
    }

Bu tür kullanımlar, daha karmaşık ve özelleştirilmiş stiller oluşturmayı sağlar.

border-radius Kullanımı : border-radius özelliği, sadece sabit değerler (piksel veya yüzde) değil, aynı zamanda karmaşık köşe yarıçapları da belirlemeye izin verir. Örneğin:

    div {
        border-radius: 10px 20px 30px 40px;
    }

Bu, her köşe için farklı bir yarıçap değeri belirler.

Sonuç

Sonuç olarak, CSS sınır özellikleri, web geliştirmede estetik ve fonksiyonellik sağlamak için güçlü araçlardır.
Bu özelliklerin doğru ve etkin kullanımı, kullanıcı deneyimini önemli ölçüde artırabilir.
Her zaman olduğu gibi, bu özellikleri kullanırken okunabilirliği ve bakım kolaylığını göz önünde bulundurmak önemlidir.

CSS Height and Properties

CSS (Cascading Style Sheets) kullanarak web sayfalarının stilini belirlemek için yükseklik ve genişlik özelliklerini kullanmak önemlidir. Bu kılavuzda, CSS'in yükseklik özellikleri, max-width (maksimum genişlik), min-height (minimum yükseklik) ve ilgili kavramlar ele alınacaktır. Bilimsel ve ciddi bir üslupla, bu özelliklerin nasıl kullanılacağını ve potansiyel hataları nasıl önleyeceğinizi öğrenebilirsiniz.

CSS Yükseklik ve Genişlik Özellikleri

CSS yükseklik (height) ve genişlik (width) özellikleri, bir elemanın yüksekliğini ve genişliğini belirlemek için kullanılır. Bu özellikler, genellikle piksel (px), yüzde (%), em, rem gibi birimlerle belirlenir.

Yükseklik ve Genişlik Değerleri

Bir elemanın yüksekliğini veya genişliğini ayarlarken kullanılabilecek değerler:

auto: Varsayılan değerdir. Elemanın içeriğine göre otomatik olarak ayarlanır.
length: Belirli bir uzunluk değeri (örneğin, px, em).
%: Elemanın ana konteynerine göre yüzde değeri.

Örnek:

div {
  height: 100px;
  width: 50%;
}

Bu örnekte, div elemanı 100 piksel yüksekliğinde ve konteyner genişliğinin %50'si kadar genişlikte olacaktır.

Maksimum Genişlik (max-width)

CSS max-width özelliği, bir elemanın alabileceği maksimum genişliği belirlemek için kullanılır. Bu, elemanın genişliğinin belirli bir değeri aşmamasını sağlar.

Örnek:

img {
  max-width: 100%;
}

Bu örnekte, resim (img) elemanı konteynerin genişliğini aşmayacak şekilde ölçeklenir.

Minimum Yükseklik (min-height)

CSS min-height özelliği, bir elemanın alabileceği minimum yüksekliği belirler. Bu, elemanın içeriği az bile olsa belirli bir yükseklikten daha küçük olmamasını sağlar.

Örnek:

div {
  min-height: 200px;
}

Bu örnekte, div elemanı en az 200 piksel yüksekliğinde olacaktır.

Kritik Değerlendirme ve Düzeltmeler

Doğru ve Yanlış Bilgiler

Yanlış: CSS yükseklik ve genişlik değerleri sadece piksel (px) cinsinden belirtilir. Doğru: CSS yükseklik ve genişlik değerleri piksel (px), yüzde (%), em, rem gibi çeşitli birimlerde belirtilebilir.
Yanlış: max-width ve min-height özellikleri aynı anda kullanılmaz. Doğru: max-width ve min-height özellikleri aynı anda kullanılabilir ve farklı amaçlar için kullanılır. max-width, elemanın genişliğini sınırlar; min-height ise elemanın minimum yüksekliğini belirler.
Yanlış: auto değeri her zaman elemanın tam boyutunu belirler. Doğru: auto değeri, elemanın içeriğine ve konteynerine göre otomatik olarak boyutlandırılmasını sağlar.

Öneriler ve İpuçları

Responsive Tasarım: Yüzde (%) ve vw (viewport genişliği) gibi birimler kullanarak elemanların farklı ekran boyutlarında uyumlu görünmesini sağlayın.
Box Model: CSS box modeline hakim olun. padding, border ve margin gibi özelliklerin eleman boyutlarını nasıl etkilediğini anlayın.
Media Queries: Farklı cihazlar için uyarlamalar yaparken media queries kullanarak belirli koşullar altında farklı yükseklik ve genişlik değerleri belirleyin.

Örnek:

@media (max-width: 600px) {
  div {
    height: auto;
    width: 100%;
  }
}

Bu örnekte, ekran genişliği 600 pikselden küçük olduğunda div elemanı tam genişlikte ve içeriğine göre otomatik yükseklikte olacaktır.

Sonuç

CSS yükseklik ve genişlik özelliklerini doğru kullanmak, web sayfalarının görünümünü ve kullanılabilirliğini büyük ölçüde artırır.
Bu kılavuz, bu özellikleri etkin bir şekilde kullanmanızı sağlayacak temel bilgiler sunmaktadır.
Elemanların farklı ekran boyutlarında nasıl davranacağını anlamak ve doğru bir şekilde uygulamak, modern web geliştirme pratiğinde kritik bir beceridir.

Box Model

CSS Padding

Giriş

CSS padding özelliği, bir elementin içeriği ile kenarlığı arasındaki boşluğu tanımlamak için kullanılır. Bu özellik, bir elementin içeriğinin etrafında boşluk oluşturur ve bu boşluk, elementin kenarlığına temas etmeden önceki alanı belirtir. Padding, bir elementin dört tarafı için ayrı ayrı ayarlanabilir veya tüm taraflar için tek seferde ayarlanabilir.

Padding - Bireysel Kenarlar

CSS, bir elementin her bir kenarı için padding belirtilmesine olanak tanıyan özelliklere sahiptir:

padding-top : Elementin üst kısmı için padding ayarlar.
padding-right : Elementin sağ kısmı için padding ayarlar.
padding-bottom : Elementin alt kısmı için padding ayarlar.
padding-left : Elementin sol kısmı için padding ayarlar.

Tüm CSS Padding Özellikleri

Tanım

Padding özellikleri, bir elementin içerik alanı ile kenarlık alanı arasındaki mesafeyi belirler. Bu mesafe, kullanıcının görsel deneyimini etkileyebilir ve tasarımın okunabilirliğini artırabilir.

Diyagram

Bir elementin padding özelliklerini anlamak için aşağıdaki diyagram kullanılabilir:

---------------------
|   padding-top     |
---------------------
|                   |
|  |-------------|  |
|  |             |  |
|  |  content    |  |
|  |             |  |
|  |-------------|  |
|                   |
---------------------
|  padding-bottom   |
---------------------

Bu diyagramda, içerik alanı, padding ile çevrilidir ve bu padding, her bir kenar için ayrı ayrı ayarlanabilir.

Örnekler

Örnek 1: Tek Kenar Padding Ayarı

Aşağıdaki CSS kodu, bir elementin sadece üst kısmına padding ekler:

.example {
    padding-top: 20px;
}

Örnek 2: Tüm Kenarlar İçin Padding Ayarı

Aşağıdaki CSS kodu, bir elementin tüm kenarlarına eşit miktarda padding ekler:

.example {
    padding: 20px;
}

Örnek 3: Farklı Kenarlar İçin Farklı Padding Değerleri

Aşağıdaki CSS kodu, her bir kenar için farklı padding değerleri ayarlar:

.example {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

Kritik Değerlendirme ve Doğruluk Kontrolü

Yukarıda belirtilen CSS padding özellikleri ve kullanımları, CSS standartlarına tamamen uygundur. Her bir özelliğin doğru kullanımı, web sayfalarının daha profesyonel ve okunabilir olmasını sağlar. Padding değerlerinin yanlış kullanımı, tasarımın bozulmasına ve kullanıcı deneyiminin olumsuz etkilenmesine neden olabilir. Bu nedenle, padding özelliklerini kullanırken dikkatli olunmalıdır.

Sonuç

CSS padding özellikleri, bir web sayfasının görünümünü ve kullanılabilirliğini önemli ölçüde etkileyen kritik tasarım araçlarıdır.
Bu özelliklerin doğru ve etkili kullanımı, profesyonel ve estetik açıdan hoş web sayfalarının oluşturulmasına katkıda bulunur.
Bu kılavuz, CSS padding özelliklerinin temel kullanımını ve önemini kapsamlı bir şekilde açıklamaktadır.
CSS padding kullanımı hakkında daha fazla bilgi ve örnekler için resmi CSS belgelerine başvurulabilir.

CSS Margin

Giriş

CSS (Cascading Style Sheets) web sayfalarının tasarımında kritik bir rol oynar ve sayfa öğelerinin düzenlenmesi için geniş bir araç etkileşim sunar. Bu eğitimde, CSS margin (kenar boşluğu) özelliklerini detaylı ve kapsamlı bir şekilde inceleyeceğiz. Marginler, öğelerin çevresinde, belirlenen herhangi bir sınırın dışında boşluk oluşturmak için kullanılır. Bu doküman, margin özelliklerini, kısayol kullanımlarını, otomatik hizalamayı ve margin çakışmasını ele alacaktır.

Margin - Bireysel Kenarlar

CSS, bir öğenin her bir kenarı için margin belirlemek amacıyla kullanılan çeşitli özellikler sunar:

margin-top: Üst kenar boşluğu
margin-right: Sağ kenar boşluğu
margin-bottom: Alt kenar boşluğu
margin-left: Sol kenar boşluğu

Bu özellikler, öğenin etrafındaki boşlukları ayrı ayrı ayarlamak için kullanılır.

Örnek 1:

.element {
  margin-top: 20px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 15px;
}

Kısayol Kullanımı (Margin-Shorthand Property)

Kodları kısaltmak için, tüm margin özelliklerini tek bir özellik ile belirlemek mümkündür. Bu özellik, dört kenarın margin değerlerini sırasıyla belirler.

Örnek 2:

.element {
  margin: 20px 15px 20px 15px; /* üst, sağ, alt, sol */
}

Eğer dört değeri de belirlemek istemiyorsanız, şu şekilde de kullanabilirsiniz:

İki değer: İlk değer üst-alt, ikinci değer sağ-sol için.
Üç değer: İlk değer üst, ikinci değer sağ-sol, üçüncü değer alt için.
Tek değer: Tüm kenarlar için aynı değeri belirler.

Örnek:

.element {
  margin: 20px 15px; /* üst-alt: 20px, sağ-sol: 15px */
}

`auto` Değeri

Margin özelliğini auto olarak ayarlamak, öğeyi kapsayıcısı içinde yatay olarak ortalamak için kullanılabilir. Bu genellikle öğeyi merkezlemek için kullanılır.

Örnek:

.element {
  margin: 0 auto;
}

Negatif Marginler

Marginlere negatif değer vermek mümkündür. Bu, öğenin diğer öğelere daha yakın görünmesini sağlar veya belirli durumlarda öğeleri üst üste bindirebilir.

Örnek:

.element {
  margin-top: -10px;
}

Margin Çakışması (Margin Collapse)

CSS'te, iki dikey margin (üst veya alt) çakıştığında, sadece en büyük olan margin uygulanır. Bu, öğeler arasında beklenmeyen boşluklar oluşmasını engeller.

Örnek:

Eğer iki bitişik öğenin margin-top ve margin-bottom değerleri sırasıyla 20px ve 10px ise, aralarındaki toplam boşluk 30px değil, 20px olacaktır.

.element1 {
  margin-bottom: 20px;
}

.element2 {
  margin-top: 10px;
}

Bu eğitim, CSS margin özelliklerinin kapsamlı bir incelemesini sunmayı amaçlamaktadır. Marginlerin doğru kullanımı, web sayfalarının düzenini ve görünümünü iyileştirir. CSS'in bu güçlü aracını etkili bir şekilde kullanarak, daha estetik ve kullanıcı dostu tasarımlar oluşturabilirsiniz.

CSS Box Model

CSS (Cascading Style Sheets), web sayfalarının görünüm ve yerleşimlerini tanımlamak için kullanılan bir stil dilidir. CSS'in temel kavramlarından biri olan "kutu modeli" (box model), elemanların nasıl yerleştirileceğini ve biçimlendirileceğini anlamak için kritik öneme sahiptir.

Kutu Modeli Nedir?

CSS kutu modeli, her HTML elemanını bir kutu olarak görür ve bu kutuyu dört ana bileşenle tanımlar: içerik (content), dolgu (padding), kenarlık (border) ve kenar boşluğu (margin). Bu bileşenler, elemanın çevresindeki alanları ve elemanın diğer elemanlarla olan ilişkisini belirler.

İçerik (Content) : Kutunun içeriği, metin ve görsellerin yer aldığı bölümdür. Dolgu (Padding) : İçeriğin etrafında, içerikle kenarlık arasında kalan şeffaf alanı tanımlar. Dolgu, elemanın içeriğine ek alan ekleyerek, içerik ile kenarlık arasında boşluk oluşturur. Kenarlık (Border) : Dolgunun etrafını saran ve içeriği koruyan bir çizgidir. Kenarlık, elemanın görünümünü vurgulamak ve farklı elemanlar arasında görsel ayrım sağlamak için kullanılır.Kenar Boşluğu (Margin) : Kenarlığın dışındaki alanı tanımlar. Kenar boşluğu, bir eleman ile diğer elemanlar arasında boşluk oluşturur ve bu alan da şeffaftır.

Kutu Modeli'nin Kullanımı

Kutu modeli, CSS kullanarak elemanlara sınır eklememizi ve elemanlar arasında boşluk tanımlamamızı sağlar. Bu model, web sayfası tasarımı yaparken düzenin ve hizalamanın doğru olmasını sağlamada önemli bir rol oynar.

Örneğin, aşağıdaki CSS kodu bir kutunun farklı bileşenlerini nasıl tanımlayabileceğimizi gösterir:

div {
    width: 300px;
    /* İçeriğin genişliği */
    padding: 10px;
    /* İçeriğin etrafındaki dolgu */
    border: 5px solid black;
    /* Dolgunun etrafındaki kenarlık */
    margin: 20px;
    /* Kenarlığın etrafındaki kenar boşluğu */
}

Bu örnekte, div elemanının içeriği 300 piksel genişliğindedir. İçeriğin etrafında 10 piksel dolgu, bunun etrafında 5 piksel kalınlığında siyah bir kenarlık ve en dışta 20 piksel kenar boşluğu bulunur.

Kutu Modeli Hesaplamaları

CSS kutu modelinde elemanın toplam genişliği ve yüksekliği, içeriğin, dolgunun, kenarlığın ve kenar boşluğunun toplamından oluşur. Bu nedenle, bir elemanın sayfadaki gerçek boyutlarını hesaplarken tüm bu bileşenleri dikkate almak önemlidir.

Örneğin, yukarıdaki div elemanının toplam genişliği şu şekilde hesaplanır:

İçerik genişliği: 300px
Sol ve sağ dolgu: 10px + 10px = 20px
Sol ve sağ kenarlık: 5px + 5px = 10px
Sol ve sağ kenar boşluğu: 20px + 20px = 40px

Toplam genişlik: 300px (içerik) + 20px (dolgu) + 10px (kenarlık) + 40px (kenar boşluğu) = 370px

Aynı şekilde, yüksekliği de benzer şekilde hesaplanır.

Kutu Modeli'nin İki Türü

CSS'de kutu modelinin iki ana türü vardır: content-box ve border-box .

Content-Box : Varsayılan kutu modeli türüdür. Elemanın genişliği ve yüksekliği, yalnızca içerik alanını kapsar. Dolgu ve kenarlık bu boyutlara eklenir. Border-Box : Elemanın genişliği ve yüksekliği, içerik, dolgu ve kenarlık dahil olmak üzere tüm kutuyu kapsar. Bu model, genellikle elemanların toplam boyutlarını daha kolay yönetmek için kullanılır.

div {
    box-sizing: border-box;
}

Bu örnek, div elemanını border-box modeli kullanacak şekilde ayarlar, böylece elemanın belirlenen genişliği ve yüksekliği, dolgu ve kenarlığı da içerir.

Kritik Değerlendirme ve Düzeltmeler

PDF dosyasındaki bilgiler genel olarak doğru ve kapsamlıdır. Ancak, bazı kritik noktaları vurgulamak ve ek bilgiler sağlamak yararlıdır:

Dolgu ve Kenarlık Hesaplamaları : Dolgu ve kenarlığın toplam genişlik ve yüksekliğe eklenmesi gerektiği vurgulanmalıdır. Bu, özellikle karmaşık düzenlerde önemli bir detaydır.
Box-Sizing Kullanımı : box-sizing özelliği, modern web geliştirmede yaygın olarak kullanılır ve bu özelliğin avantajları açıklanmalıdır.
Örnek Kodlar ve Uygulamalar : Pratik örnekler ve gerçek dünya uygulamaları ekleyerek, teorik bilgilerin daha iyi anlaşılması sağlanabilir.

Sonuç olarak, CSS kutu modeli, web sayfası tasarımında kritik bir rol oynar. Bu modelin doğru anlaşılması, elemanların düzenlenmesi ve stilize edilmesinde önemli bir avantaj sağlar.

Box Model

CSS Text

CSS (Cascading Style Sheets), web sayfalarını biçimlendirmek için kullanılan güçlü bir araçtır. Bu kılavuzda, metin biçimlendirme ile ilgili CSS özelliklerini kapsamlı ve detaylı bir şekilde ele alacağız.

Metin Rengi ve Arka Plan Rengi

CSS, metin rengini ve arka plan rengini ayarlamak için çeşitli özellikler sunar. Metin rengini ayarlamak için color özelliği kullanılırken, arka plan rengini ayarlamak için background-color özelliği kullanılır. Bu özellikler, metnin ve arka planın görsel olarak öne çıkmasını sağlamak için kritik öneme sahiptir.

p {
    color: blue;
    background-color: yellow;
}

Bu örnekte, <p> etiketindeki metin mavi renkte ve arka planı sarı renkte olacak şekilde ayarlanmıştır.

Metin Hizalama

Metni yatay olarak hizalamak için text-align özelliği kullanılır. Bu özellik, metnin sol, sağ, merkez veya her iki yana yaslanmasını sağlar.

Sol Hizalama (Varsayılan) : Metin sola yaslanır.
Sağ Hizalama : Metin sağa yaslanır.
Merkez Hizalama : Metin ortalanır.
İki Yana Yaslama (Justify) : Metin, her iki kenara yaslanır ve satırlar arasındaki boşluklar eşitlenir.

p.left {
    text-align: left;
}

p.right {
    text-align: right;
}

p.center {
    text-align: center;
}

p.justify {
    text-align: justify;
}

Son Satırın Hizalanması

text-align-last özelliği, metnin son satırının hizalanma şeklini belirler. Bu özellik, özellikle iki yana yaslama uygulandığında son satırın hizalanmasını kontrol etmek için kullanılır.

p {
    text-align: justify;
    text-align-last: right;
}

Bu örnekte, metin iki yana yaslanmış ancak son satır sağa hizalanmıştır.

Dikey Hizalama

Dikey hizalama, vertical-align özelliği kullanılarak yapılır. Bu özellik, genellikle tablo hücrelerindeki içerikleri veya satır içi elemanları dikey olarak hizalamak için kullanılır.

span {
    vertical-align: middle;
}

Metin Dönüşümü ve Dekorasyonu

CSS, metin dönüşümü ( text-transform ) ve dekorasyonu ( text-decoration ) gibi metin üzerinde daha fazla kontrol sağlayan özellikler sunar.

Metin Dönüşümü : text-transform özelliği, metni büyük harfe, küçük harfe veya her kelimenin ilk harfini büyük yapabilir.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Metin Dekorasyonu : text-decoration özelliği, metne altı çizgi, üstü çizgi veya üstü çarpı işareti gibi dekoratif çizgiler ekleyebilir.

p.underline {
    text-decoration: underline;
}

p.overline {
    text-decoration: overline;
}

p.line-through {
    text-decoration: line-through;
}

Harf ve Kelime Aralığı

Harf aralığı ( letter-spacing ) ve kelime aralığı ( word-spacing ) özellikleri, metin içindeki harfler ve kelimeler arasındaki boşluğu kontrol eder.

p {
    letter-spacing: 2px;
    word-spacing: 4px;
}

Bu örnekte, harfler arasındaki boşluk 2 piksel, kelimeler arasındaki boşluk ise 4 piksel olarak ayarlanmıştır.

Satır Yüksekliği

line-height özelliği, metin satırlarının yüksekliğini belirler ve metin bloklarının okunabilirliğini artırır.

p {
    line-height: 1.5;
}

Bu ayar, metin satırlarının yüksekliğini metin boyutunun 1.5 katı yapar.

Sonuç

CSS'in metin biçimlendirme özellikleri, web sayfalarının görsel estetiğini ve okunabilirliğini önemli ölçüde artırır. Bu kılavuzda ele alınan özellikler, metinlerinizi profesyonel ve etkileyici bir şekilde sunmanıza yardımcı olacaktır.

CSS Metin Süsleme (Text Decoration) Özellikleri

Bu kapsamlı ve detaylı rehberde, CSS metin süsleme (text decoration) özelliklerini ele alacağız. Bu rehberde yer alan konular şunlardır:

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

1. text-decoration-line

text-decoration-line özelliği, metne bir süsleme çizgisi eklemek için kullanılır. Bu özellik, metnin altını çizme, üstünü çizme veya üstünü kesme gibi dekoratif çizgiler eklemenizi sağlar. Aşağıdaki değerleri alabilir:

none: Herhangi bir süsleme çizgisi eklenmez.
underline: Metnin altına bir çizgi eklenir.
overline: Metnin üstüne bir çizgi eklenir.
line-through: Metnin ortasından bir çizgi geçer.

Örnek Kullanım

p {
    text-decoration-line: underline;
}

Yukarıdaki örnekte, p etiketine sahip metinlerin altı çizilecektir.

2. text-decoration-color

text-decoration-color özelliği, süsleme çizgisinin rengini belirlemek için kullanılır. Bu özellik, metin süslemesinin rengini ayarlamanızı sağlar.

Örnek Kullanım

p {
    text-decoration-line: underline;
    text-decoration-color: red;
}

Bu örnekte, p etiketine sahip metinlerin altı kırmızı bir çizgi ile çizilecektir.

3. text-decoration-style

text-decoration-style özelliği, süsleme çizgisinin stilini ayarlamak için kullanılır. Aşağıdaki değerleri alabilir:

solid: Düz çizgi (varsayılan değer).
double: Çift çizgi.
dotted: Noktalı çizgi.
dashed: Kesik çizgi.
wavy: Dalgalı çizgi.

Örnek Kullanım

p {
    text-decoration-line: underline;
    text-decoration-style: wavy;
}

Bu örnekte, p etiketine sahip metinlerin altı dalgalı bir çizgi ile çizilecektir.

4. text-decoration-thickness

text-decoration-thickness özelliği, süsleme çizgisinin kalınlığını belirlemek için kullanılır. Kalınlık değeri uzunluk birimleri (px, em, rem, vb.) veya yüzde (%) cinsinden ifade edilebilir.

Örnek Kullanım

p {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
}

Bu örnekte, p etiketine sahip metinlerin altı 2 piksel kalınlığında bir çizgi ile çizilecektir.

5. text-decoration

text-decoration özelliği, yukarıda belirtilen tüm süsleme özelliklerini tek bir satırda tanımlamanıza olanak tanır. Bu özellik, süsleme çizgisinin türünü, rengini, stilini ve kalınlığını aynı anda belirlemenizi sağlar.

Örnek Kullanım

p {
    text-decoration: underline wavy red 2px;
}

Bu örnekte, p etiketine sahip metinlerin altı dalgalı, kırmızı ve 2 piksel kalınlığında bir çizgi ile çizilecektir.

Sonuç

CSS metin süsleme özellikleri, metinlerinize görsel olarak çekici ve dikkat çekici dekoratif unsurlar eklemenizi sağlar. text-decoration-line , text-decoration-color , text-decoration-style , text-decoration-thickness ve text-decoration gibi özellikler, metin süslemesini ayrıntılı bir şekilde kontrol etmenize olanak tanır. Bu özellikleri kullanarak web sayfalarınızda estetik ve işlevsel metin süslemeleri oluşturabilirsiniz.

CSS Text Transformation

CSS (Cascading Style Sheets), web sayfalarının stil ve düzenini kontrol etmek için kullanılan bir stil dilidir. CSS, HTML ile birlikte kullanılarak web sayfalarının görünümünü ve özelleştirmek için güçlü bir araç sağlar. Bu kapsamlı ve detaylı öğretici, CSS'in metin dönüştürme (text transformation) özelliklerine odaklanacaktır.

1. Metin Dönüştürme Özellikleri (Text Transformation Properties)

CSS'in metin dönüştürme özellikleri, metnin büyük harf, küçük harf veya baş harflerin büyük harf olması gibi çeşitli şekillerde dönüştürülmesini sağlar. Bu özellikler, metnin görsel sunumunu değiştirmek için kullanılır, ancak metnin kendisini değiştirmez.

a. text-transform Özelliği

text-transform özelliği, bir metnin büyük harf, küçük harf veya kelimelerin ilk harflerinin büyük harf yapılması gibi dönüştürmelerini belirtmek için kullanılır. Bu özellik aşağıdaki değerleri alabilir:

none : Metin üzerinde herhangi bir dönüşüm uygulanmaz.
capitalize : Her kelimenin ilk harfini büyük harf yapar.
uppercase : Tüm harfleri büyük harf yapar.
lowercase : Tüm harfleri küçük harf yapar.
initial : Varsayılan değeri ayarlar.
inherit : Üst öğenin text-transform değerini miras alır.

Örnek Kullanımlar:

/* Tüm harfleri büyük harf yapar */
.uppercase {
    text-transform: uppercase;
}

/* Tüm harfleri küçük harf yapar */
.lowercase {
    text-transform: lowercase;
}

/* Her kelimenin ilk harfini büyük harf yapar */
.capitalize {
    text-transform: capitalize;
}

Örnek Uygulamalar

Uppercase Örneği:

HTML:

<p class="uppercase">Bu bir örnek metindir.</p>

CSS:

.uppercase {
    text-transform: uppercase;
}

Sonuç: "BU BİR ÖRNEK METİNDİR."

Lowercase Örneği:

HTML:

<p class="lowercase">Bu Bir Örnek Metindir.</p>

CSS:

.lowercase {
    text-transform: lowercase;
}

Sonuç: "bu bir örnek metindir."

Capitalize Örneği:

HTML:

<p class="capitalize">bu bir örnek metindir.</p>

CSS:

.capitalize {
    text-transform: capitalize;
}

Sonuç: "Bu Bir Örnek Metindir."

2. Bilimsel ve Teknik Değerlendirme

text-transform özelliği, web sayfalarının okunabilirliğini ve kullanıcı deneyimini artırmak için etkili bir araçtır. Ancak, bu özelliğin metin içeriğinin anlamını veya yapısını değiştirmediğini unutmamak önemlidir. Metin dönüştürme işlemleri, yalnızca metnin görsel sunumunu etkiler ve HTML veya veri katmanında herhangi bir değişiklik yapmaz.

3. Yanlış Anlaşılmalardan Kaçınma

Birçok geliştirici, text-transform özelliğini kullanırken, metinlerin veritabanlarında veya diğer veri depolarında nasıl saklandığını göz ardı edebilir. Bu nedenle, metin dönüştürme işlemlerinin yalnızca kullanıcı arayüzünde görsel bir değişiklik sağladığını ve arka planda metin verilerinin orijinal haliyle kaldığını vurgulamak önemlidir.

4. Sonuç

CSS text-transform özelliği, metinlerin büyük/küçük harf ve baş harflerin büyük harf yapılması gibi görsel dönüşümlerini kolaylaştırır. Bu öğreticide belirtilen kurallar ve örnekler, web geliştiricilerin metin dönüştürme işlemlerini doğru ve etkili bir şekilde uygulamalarına yardımcı olacaktır.

CSS Metin Aralığı: Kapsamlı ve Detaylı Bir Rehber

Bu rehber, CSS metin aralığı özelliklerini kapsamlı ve detaylı bir şekilde ele alacaktır. Konu başlıkları şunları içermektedir:

Text-indent
Letter-spacing
Line-height
Word-spacing
White-space

Her bir özellik, işlevi, kullanımı ve örnek kodlar ile detaylandırılacaktır.

Text-indent

text-indent özelliği, bir metnin ilk satırının girintisini belirtmek için kullanılır. Bu özellik, metnin ilk satırının ne kadar içeriye çekileceğini tanımlar. Genellikle paragrafların başlangıcında kullanılmaktadır.

Kullanım Şekli

p {
  text-indent: 50px;
}

Bu örnekte, <p> etiketi ile tanımlanan paragrafların ilk satırları 50 piksel içeriden başlayacaktır.

Kritik Değerlendirme

text-indent özelliği, yalnızca ilk satırı etkiler. Diğer satırlar normal hizalanmaya devam eder. Bu, metin düzenlemelerinde ve stilizasyonunda dikkate alınması gereken önemli bir detaydır.

Letter-spacing

letter-spacing özelliği, metin içindeki karakterler arasındaki boşluğu belirtir. Bu özellik, metnin okunabilirliğini artırmak veya estetik bir görünüm kazandırmak için kullanılır.

Kullanım Şekli

p {
  letter-spacing: 2px;
}

Bu örnekte, <p> etiketi ile tanımlanan paragrafların karakterleri arasında 2 piksel boşluk bırakılacaktır.

Kritik Değerlendirme

letter-spacing değeri, pozitif veya negatif olabilir. Pozitif değerler karakterler arasındaki boşluğu artırırken, negatif değerler boşluğu azaltır. Bu özelliğin dikkatli kullanılması, metnin okunabilirliğini ve estetiğini doğrudan etkileyebilir.

Line-height

line-height özelliği, metin satırları arasındaki boşluğu belirtir. Satır yüksekliği, metnin sıkışık veya ferah görünmesini sağlar ve okunabilirliği büyük ölçüde etkiler.

Kullanım Şekli

p {
  line-height: 1.5;
}

Bu örnekte, <p> etiketi ile tanımlanan paragrafların satır yüksekliği, normal satır yüksekliğinin 1.5 katı olacaktır.

Kritik Değerlendirme

line-height değeri, birim veya oransal olarak belirtilebilir. Oransal değerler (1.5 gibi) tercih edilir, çünkü metin boyutuna bağlı olarak dinamik bir uyum sağlar.

Word-spacing

word-spacing özelliği, metin içindeki kelimeler arasındaki boşluğu belirtir. Bu özellik, metnin daha dengeli ve okunaklı olmasını sağlamak için kullanılır.

Kullanım Şekli

p {
  word-spacing: 4px;
}

Bu örnekte, <p> etiketi ile tanımlanan paragrafların kelimeleri arasında 4 piksel boşluk bırakılacaktır.

Kritik Değerlendirme

word-spacing değeri de pozitif veya negatif olabilir. Pozitif değerler kelimeler arasındaki boşluğu artırırken, negatif değerler boşluğu azaltır. Kelimeler arasındaki boşluğun dengeli ayarlanması, metnin genel görünümünü ve okunabilirliğini etkiler.

White-space

white-space özelliği, metindeki beyaz alanların (boşluk, tab, satır sonu vb.) nasıl işleneceğini belirtir. Bu özellik, metnin nasıl sarılacağını, boşlukların nasıl korunacağını ve satır sonlarının nasıl işleneceğini kontrol eder.

Değerler ve Açıklamaları

white-space: normal;
- Varsayılan değerdir.
- Birden fazla boşluk karakteri tek bir boşluk olarak işlenir.
- Metin satır sonlarında otomatik olarak sarılır.
- Satır sonları (newline) boşluk karakteri olarak kabul edilir.
white-space: nowrap;
- Metin tek bir satırda gösterilir.
- Satır sonlarında sarma işlemi yapılmaz.
- Birden fazla boşluk karakteri tek bir boşluk olarak işlenir.
white-space: pre;
- Metin, HTML'deki gibi işlenir.
- Birden fazla boşluk karakteri korunur.
- Metin satır sonlarında sarılmaz.
- Satır sonları olduğu gibi korunur.
white-space: pre-wrap;
- Birden fazla boşluk karakteri korunur.
- Metin satır sonlarında otomatik olarak sarılır.
- Satır sonları olduğu gibi korunur.
white-space: pre-line;
- Birden fazla boşluk karakteri tek bir boşluk olarak işlenir.
- Metin satır sonlarında otomatik olarak sarılır.
- Satır sonları olduğu gibi korunur.

Kullanım Örnekleri

white-space: normal;
```
p {
    white-space: normal;
}
```
- Bu durumda paragraf içindeki metin varsayılan olarak işlenecektir. Fazladan boşluklar tek bir boşluk olarak gösterilir ve metin satır sonlarında otomatik olarak sarılır.
white-space: nowrap;
```
p {
    white-space: nowrap;
}
```
- Bu durumda paragraf içindeki metin tek bir satırda gösterilir ve satır sonlarında sarma işlemi yapılmaz.
white-space: pre;
```
p {
    white-space: pre;
}
```
- Bu durumda paragraf içindeki metin, HTML'deki gibi işlenir. Birden fazla boşluk karakteri korunur ve metin satır sonlarında sarılmaz.
white-space: pre-wrap;
```
p {
    white-space: pre-wrap;
}
```
- Bu durumda paragraf içindeki metin, birden fazla boşluk karakterini korur ve satır sonlarında otomatik olarak sarılır.
white-space: pre-line;
```
p {
    white-space: pre-line;
}
```
- Bu durumda paragraf içindeki metin, birden fazla boşluk karakterini tek bir boşluk olarak gösterir ve satır sonlarında otomatik olarak sarılır.

Bu özellikler, özellikle metin düzeni ve beyaz alanların nasıl işleneceği üzerinde tam kontrol sağlamak için kullanışlıdır.

Kullanım Şekli

p {
  white-space: nowrap;
}

Bu örnekte, <p> etiketi ile tanımlanan metin, satır sonlarında sarılmadan tek bir satırda kalacaktır.

Kritik Değerlendirme

white-space özelliği, özellikle kod parçacıkları, adresler veya formatlanmış metinler gibi belirli metin türlerinin doğru görüntülenmesi için önemlidir. Özelliğin uygun kullanımı, metnin istenilen formatta sunulmasını sağlar.

Sonuç

Bu rehberde, CSS metin aralığı özellikleri detaylı bir şekilde ele alınmıştır. Her bir özelliğin doğru kullanımı, web sayfalarının daha okunabilir ve estetik olarak daha çekici olmasını sağlar. Bu özelliklerin kombinasyonu, kullanıcı deneyimini ve içerik sunumunu önemli ölçüde iyileştirebilir.

CSS Links

Bu eğitimde, CSS kullanarak bağlantıların (linklerin) nasıl özelleştirileceğini detaylı ve bilimsel bir şekilde ele alacağız. Eğitimin içeriği, bağlantıların dört ana durumu, metin dekorasyonu, arka plan rengi ve bağlantı düğmeleri (link buttons) gibi konuları kapsayacaktır.

Bağlantı Durumları

CSS, bağlantılar için dört farklı durum tanımlar. Bu durumlar, bağlantının kullanıcı etkileşimine nasıl tepki vereceğini belirler. Aşağıda bu durumların detaylı açıklamaları ve örnek kodları bulunmaktadır.

Dört bağlantı durumu şunlardır:

a:link - normal, ziyaret edilmemiş bir bağlantı
a:visited - kullanıcının ziyaret ettiği bağlantı
a:hover - kullanıcı fareyle üzerine geldiğinde bir bağlantı
a:active - tıklandığı anda bir bağlantı

1. a:link

a:link, normal, ziyaret edilmemiş bir bağlantıyı temsil eder. Bu durum, sayfayı ilk açtığınızda veya tarayıcı geçmişinde kayıtlı olmayan bir bağlantıya uygulanır.

a:link {
    color: blue;
}

2. a:visited

a:visited, kullanıcının daha önce ziyaret ettiği bağlantıyı temsil eder. Bu durum, kullanıcının tarayıcı geçmişinde kayıtlı olan bağlantılar için geçerlidir.

a:visited {
    color: purple;
}

3. a:hover

a:hover, fareyle üzerine gelindiğinde bağlantının nasıl görüneceğini belirler. Bu durum, kullanıcı fareyi bağlantının üzerine getirdiğinde aktif olur.

a:hover {
    color: red;
}

4. a:active

a:active, bağlantının tıklama anındaki durumunu temsil eder. Kullanıcı bağlantıya tıkladığında bu stil uygulanır.

a:active {
    color: yellow;
}

Bu dört durumun tamamı, kullanıcı deneyimini iyileştirmek ve sayfa tasarımını daha çekici hale getirmek için özelleştirilebilir.

Metin Dekorasyonu

CSS'deki text-decoration özelliği, bağlantılardaki alt çizgiyi kaldırmak veya eklemek için sıklıkla kullanılır. Bu özellik, bağlantıların görsel olarak nasıl görüneceğini kontrol etmek için önemlidir.

a {
    text-decoration: none;
}

Bu örnekte, tüm bağlantılardan alt çizgi kaldırılmıştır. Alt çizgiyi yeniden eklemek için text-decoration özelliği underline olarak ayarlanabilir.

a {
    text-decoration: underline;
}

Arka Plan Rengi

background-color özelliği, bağlantılara arka plan rengi eklemek için kullanılır. Bu özellik, bağlantıların daha belirgin hale gelmesini sağlar.

a {
    background-color: yellow;
}

Bu örnekte, tüm bağlantılara sarı bir arka plan rengi uygulanmıştır. Bu özellik, kullanıcıların bağlantıları daha kolay fark etmesini sağlar.

Bağlantı Düğmeleri (Link Buttons)

Bağlantıları düğme gibi görüntülemek için birkaç CSS özelliği bir arada kullanılabilir. Bu, bağlantıların daha interaktif ve çekici görünmesini sağlar.

a.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    background-color: blue;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

a.button:hover {
    background-color: darkblue;
}

Bu örnekte, a.button sınıfına sahip bağlantılar düğme olarak görüntülenir. Düğmelere fareyle gelindiğinde arka plan rengi koyu maviye döner, böylece etkileşimli bir geri bildirim sağlanır.

Sonuç

Bu eğitimde, CSS kullanarak bağlantıların nasıl özelleştirileceğini detaylı bir şekilde ele aldık. Bağlantıların dört ana durumu, metin dekorasyonu, arka plan rengi ve bağlantı düğmeleri gibi konular üzerinde durduk. Bu bilgiler, web sayfalarınızda kullanıcı deneyimini iyileştirmek ve estetik açıdan daha çekici tasarımlar oluşturmak için kullanılabilir.

Text Decoration

CSS Fonts

Web siteniz için doğru yazı tipini seçmek önemlidir. Yazı tipleri, bir web sitesinin genel estetiğini ve kullanılabilirliğini büyük ölçüde etkileyebilir. Bu nedenle, CSS ile yazı tiplerinin nasıl kullanılacağını ve özelleştirileceğini anlamak, profesyonel ve etkili bir web geliştirme süreci için kritiktir.

CSS font-family Özelliği

font-family özelliği, bir öğe için yazı tipini belirtmek amacıyla kullanılır. Bu özellik, bir yazı tipi ailesi adı veya bir liste halinde alternatif yazı tipleri içerebilir. Alternatif yazı tipleri, belirli bir yazı tipi kullanılamadığında yedek olarak devreye girer. Bu özellik, yazı tipi ailesinin adlarını virgüllerle ayrılmış bir liste olarak alır.

Örnek:

body {
    font-family: "Arial", "Helvetica", sans-serif;
}

Burada, tarayıcı "Arial" yazı tipini bulamazsa "Helvetica"yı dener ve son çare olarak genel sans-serif yazı tipini kullanır.

CSS Web Güvenli Yazı Tipleri

Tamamen web güvenli yazı tipleri olmasa da, bazı yazı tipleri çoğu kullanıcı tarafından desteklenir. Ancak, her zaman yazı tipi bulunamadığında veya doğru yüklenemediğinde kullanılacak yedek yazı tiplerini eklemek önemlidir. Bu, font-family özelliğinde bir dizi benzer "yedek yazı tipi" ekleyerek yapılır. Bu yedekleme, listenin sonuna genel bir yazı tipi ailesi adı eklenerek tamamlanmalıdır.

Örnek:

h1 {
    font-family: "Times New Roman", Times, serif;
}

CSS font-style Özelliği

font-style özelliği, metnin italik olup olmayacağını belirtir. Bu özelliğin üç değeri vardır:

normal: Metin normal gösterilir.
italic: Metin italik olarak gösterilir.
oblique: Metin eğik (italik benzeri) olarak gösterilir ancak daha az desteklenir.

Örnek:

p {
    font-style: italic;
}

Font Ağırlığı

font-weight özelliği, bir yazı tipinin kalınlığını belirtir. Yaygın olarak kullanılan değerler şunlardır:

normal veya 400: Normal yazı ağırlığı.
bold veya 700: Kalın yazı ağırlığı.

Örnek:

h2 {
    font-weight: bold;
}

Font Varyantı

font-variant özelliği, bir metnin küçük büyük harflerle mi gösterileceğini belirtir. Örneğin, small-caps değeri, tüm küçük harfleri büyük harf boyutunda, ama küçük harf biçiminde gösterir.

Örnek:

h3 {
    font-variant: small-caps;
}

Font Boyutu

font-size özelliği, metnin boyutunu ayarlamak için kullanılır. CSS'de yazı tipi boyutları mutlak (px, pt) veya göreli (% , em, rem) birimlerle belirtilebilir.

Örnek:

p {
    font-size: 16px;
}

CSS Google Fonts

Standart HTML yazı tiplerini kullanmak istemiyorsanız, Google Fonts'u kullanabilirsiniz. Google Fonts, geniş bir yazı tipi yelpazesi sunar ve kullanımı oldukça kolaydır. Google Fonts kullanmak için <head> bölümüne özel bir stil sayfası bağlantısı ekleyin ve ardından CSS'te yazı tipine referans verin.

Örnek:

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>

Bu yöntemle, Roboto yazı tipini web sayfanızda kullanabilirsiniz.

Bu rehber, CSS ile yazı tiplerinin nasıl kullanıldığını ve özelleştirileceğini kapsamlı bir şekilde ele almıştır. Doğru yazı tipi seçimi ve kullanımı, web sitenizin profesyonel ve kullanıcı dostu görünmesini sağlayacaktır.

CSS İcon

CSS ikonları, web sayfalarına görsel çekicilik ve işlevsellik kazandırmanın etkili bir yoludur. Bu rehber, Font Awesome gibi bir ikon kütüphanesini kullanarak HTML sayfanıza nasıl ikon ekleyeceğinizi adım adım anlatacaktır. Rehber, titizlikle hazırlanmış olup, alanın standartlarını ve doğruluğunu yansıtmaktadır.

İkonların HTML Sayfasına Eklenmesi

Bir ikon kütüphanesi kullanarak HTML sayfanıza ikon eklemek oldukça basittir. Font Awesome, en yaygın kullanılan ikon kütüphanelerinden biridir ve kullanımı kolaydır.

Font Awesome İkonları Kullanımı

1. Font Awesome Kit Oluşturma

Font Awesome ikonlarını kullanmak için öncelikle bir Font Awesome Kit oluşturmanız gerekmektedir. Aşağıdaki adımları izleyerek bu işlemi gerçekleştirebilirsiniz:

Font Awesome Web Sitesine Giriş Yapın:
- Font Awesome web sitesine gidin: Font Awesome
- Eğer henüz bir hesabınız yoksa, kayıt olun.
Yeni Bir Kit Oluşturun:
- Hesabınıza giriş yaptıktan sonra, kontrol panelinde "Create a Kit" (Bir Kit Oluştur) butonuna tıklayın.
Kitinizi Konfigüre Edin:
- Kullanmak istediğiniz kit türünü seçin (Free, Pro veya Teams).
- Kullanmak istediğiniz Font Awesome versiyonunu belirleyin.
- İhtiyacınız olan ikonları seçerek kitinizi özelleştirin, gelişmiş seçenekleri ayarlayın ve otomatik erişilebilirlik gibi ayarları konfigüre edin.

2. Kit Kodunun HTML Sayfasına Eklenmesi

Kitinizi konfigüre ettikten sonra, Font Awesome size bir kod snippet'i sağlayacaktır. Bu kod snippet'ini HTML dosyanızın <head> bölümüne eklemeniz gerekmektedir.

<head>
    <script src="https://kit.fontawesome.com/yourkitcode.js" crossorigin="anonymous"></script>
</head>

3. İkonların Kullanımı

Kit kodunu ekledikten sonra, Font Awesome ikonlarını HTML dosyanızda kullanabilirsiniz. İkonlar, belirli sınıflar kullanılarak <i> veya <span> etiketleri içinde eklenir.

Örnek olarak:

<i class="fas fa-heart"></i> <!-- Solid heart icon -->
<i class="far fa-heart"></i> <!-- Regular heart icon -->

Burada fas , "Font Awesome Solid" ve far , "Font Awesome Regular" anlamına gelir. Ayrıca fab gibi başka önekler de marka ikonları için kullanılabilir.

4. İkonların Özelleştirilmesi (Opsiyonel)

İkonların boyutunu, rengini ve diğer özelliklerini Font Awesome tarafından sağlanan CSS sınıfları kullanarak veya kendi CSS'inizi ekleyerek özelleştirebilirsiniz.

Örnek CSS ile özelleştirme:

.icon-large {
    font-size: 2em;
    color: red;
}

HTML'de kullanımı:

<i class="fas fa-heart icon-large"></i>

Sonuç

Font Awesome ikonlarını kullanarak HTML sayfanıza görsel açıdan zengin ve işlevsel ikonlar eklemek oldukça kolaydır. Bu rehber, ikonların nasıl ekleneceğini, kit oluşturmayı ve ikonları özelleştirmeyi adım adım açıklamaktadır. Tüm adımları doğru bir şekilde izleyerek web projelerinizde profesyonel görünümler elde edebilirsiniz.

CSS Units in Detail

CSS'de Uzunluk Birimleri

CSS'de uzunlukları ifade etmek için birçok farklı birim bulunmaktadır. Birçok CSS özelliği, genişlik, kenar boşluğu (margin), dolgu (padding), yazı tipi boyutu (font-size) gibi "uzunluk" değerleri alır.

Mutlak Uzunluk Birimleri

Mutlak uzunluk birimleri sabittir ve herhangi bir uzunluk birimi ile ifade edilen bir uzunluk, tam olarak o boyutta görünecektir. Bu birimler genellikle baskı ve diğer sabit boyutlu medyalarda kullanılır. Mutlak uzunluk birimleri şunlardır:

cm: Santimetre
mm: Milimetre
in: İnç
px: Piksel
pt: Punto (1 pt = 1/72 inç)
pc: Pika (1 pc = 12 pt)

Örnek

p {
    margin: 1cm;
    padding: 10px;
    font-size: 12pt;
}

Göreli Uzunluk Birimleri

Göreli uzunluk birimleri, başka bir uzunluk özelliğine göre bir uzunluk belirtir. Göreli uzunluk birimleri, farklı görüntüleme ortamları arasında daha iyi ölçeklenir. Bu birimler şunlardır:

em: Ana öğenin yazı tipi boyutuna göre hesaplanan birim.
rem: Kök öğenin yazı tipi boyutuna göre hesaplanan birim.
vw: Görüntüleme alanının genişliğinin %1'i.
vh: Görüntüleme alanının yüksekliğinin %1'i.
%: Bağlı olduğu öğenin bir yüzdesi olarak ifade edilen birim.

`em` ve `rem` Kavramı

em: Bu birim, içinde bulunduğu öğenin yazı tipi boyutuna göre hesaplanır. Örneğin, bir öğenin yazı tipi boyutu 16px ise, 2em bu öğe için 32px anlamına gelir.
rem: Bu birim, kök öğenin (genellikle <html> öğesi) yazı tipi boyutuna göre hesaplanır. Örneğin, kök öğenin yazı tipi boyutu 16px ise, 2rem tüm belgede 32px anlamına gelir.

Örnek

html {
    font-size: 16px;
}

body {
    font-size: 1.5em; /* 24px */
}

h1 {
    font-size: 2rem; /* 32px */
}

`vh` ve `%` Örneği

div {
    width: 50vw; /* Görüntüleme alanının genişliğinin %50'si */
    height: 50vh; /* Görüntüleme alanının yüksekliğinin %50'si */
}

.container {
    width: 100%;
    height: 100%;
}

Kritik Değerlendirme

PDF'de sunulan bilgiler genel olarak doğrudur, ancak bazı kritik noktalar daha ayrıntılı ele alınmalıdır. Örneğin, mutlak uzunluk birimlerinin kullanımı, genellikle responsive (duyarlı) tasarımda önerilmez çünkü ekran boyutları ve çözünürlükler arasında ölçeklenmezler. Göreli uzunluk birimleri ise, duyarlı tasarımda daha esneklik sağlar ve farklı cihazlarda daha tutarlı bir kullanıcı deneyimi sunar.

Sonuç

CSS uzunluk birimlerini anlamak, etkili ve duyarlı web tasarımı için kritik öneme sahiptir. Mutlak ve göreli birimlerin doğru kullanımı, bir web sitesinin farklı cihazlarda ve ekran boyutlarında nasıl görüneceğini doğrudan etkiler. Bu nedenle, doğru birimlerin seçimi ve kullanımı, profesyonel web geliştirme süreçlerinde titizlikle ele alınmalıdır.

CSS Cursor Property

CSS (Cascading Style Sheets) imleç özelliği, kullanıcı deneyimini geliştirmek için web sayfalarındaki imleçlerin görünümünü kontrol etmemize olanak tanır. Bu özellik, kullanıcıların fare ile etkileşimde bulundukları öğelerin türüne göre farklı imleç türleri göstermemize izin verir. Bu makalede, CSS imleç özelliğinin detaylı bir incelemesini sunacak, doğru kullanımı üzerinde duracak ve olası hataları ele alacağız.

CSS İmleç Özelliği Nedir?

CSS imleç özelliği, belirli bir HTML öğesi üzerinde fare işaretçisinin nasıl görüneceğini belirler. Bu özellik, kullanıcı arayüzünü daha sezgisel ve kullanıcı dostu hale getirir. CSS imleç özelliğini kullanarak, tarayıcının varsayılan imlecini değiştirebilir ve kullanıcılara daha iyi bir deneyim sunabilirsiniz.

Kullanım Şekilleri

CSS imleç özelliği birçok farklı değere sahiptir. Bu değerler, kullanıcının fareyi belirli bir öğenin üzerine getirdiğinde hangi imlecin görüneceğini belirler. İşte en yaygın kullanılan imleç türleri:

default : Tarayıcının varsayılan imlecini gösterir.
pointer : Genellikle bağlantılar üzerinde kullanılan el imlecini gösterir.
text : Metin seçmek için kullanılan metin imlecini gösterir.
move : Taşıma işlemleri için kullanılan hareket imlecini gösterir.
not-allowed : Belirli bir işlemin yapılamayacağını gösteren yasak işareti.
wait : İşlem yapıldığını gösteren bekleme imleci.

Aşağıda, CSS imleç özelliğinin nasıl kullanılacağına dair bir örnek bulunmaktadır:

.button {
    cursor: pointer;
}

.no-access {
    cursor: not-allowed;
}

Bu örnekte, .button sınıfına sahip öğelerin üzerine gelindiğinde imleç pointer (el) şekline dönüşecektir. .no-access sınıfına sahip öğelerin üzerine gelindiğinde ise imleç not-allowed (yasak) şekline dönüşecektir.

CSS İmleç Özelliğinin Değerleri

CSS imleç özelliği birçok farklı değeri destekler. Bu değerlerden bazıları şunlardır:

alias : Alternatif işaretçi.
all-scroll : Tüm yönlerde kaydırma işaretçisi.
cell : Hücre seçimi işaretçisi.
context-menu : Bağlam menüsü işaretçisi.
col-resize : Sütun boyutlandırma işaretçisi.
copy : Kopyalama işaretçisi.
crosshair : Çapraz işaretçi.
e-resize : Sağ kenar boyutlandırma işaretçisi.
help : Yardım işaretçisi.
progress : İşlem devam ediyor işaretçisi.

Bu değerler, kullanıcı etkileşimini daha sezgisel hale getirerek kullanıcı deneyimini iyileştirir.

Özelleştirilmiş İmleçler

CSS imleç özelliği, özelleştirilmiş imleçlerin kullanımına da olanak tanır. Bu, URL tabanlı imleçlerin kullanımıyla gerçekleştirilir. Örneğin:

.custom-cursor {
    cursor: url('custom-cursor.png'), auto;
}

Bu örnekte, .custom-cursor sınıfına sahip öğeler üzerinde custom-cursor.png dosyasından alınan özel bir imleç gösterilecektir. Eğer bu özel imleç yüklenemezse, tarayıcı auto (varsayılan) imleci gösterecektir.

Uygulama Örnekleri

Aşağıda, farklı imleç türlerinin nasıl uygulanacağını gösteren birkaç örnek bulunmaktadır:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>CSS İmleç Örneği</title>
    <style>
        .default {
            cursor: default;
        }

        .pointer {
            cursor: pointer;
        }

        .text {
            cursor: text;
        }

        .move {
            cursor: move;
        }

        .not-allowed {
            cursor: not-allowed;
        }

        .custom {
            cursor: url('custom-cursor.png'), auto;
        }
    </style>
</head>

<body>
    <div class="default">Varsayılan İmleç</div>
    <div class="pointer">Pointer İmleç</div>
    <div class="text">Metin İmleci</div>
    <div class="move">Hareket İmleci</div>
    <div class="not-allowed">Yasak İmleci</div>
    <div class="custom">Özelleştirilmiş İmleç</div>
</body>

</html>

Sonuç

CSS imleç özelliği, web sayfalarında kullanıcı etkileşimini artırmak için güçlü bir araçtır. Doğru kullanıldığında, kullanıcı deneyimini önemli ölçüde iyileştirebilir. Bu makalede, CSS imleç özelliğinin temel kavramlarını ve kullanım örneklerini ele aldık. İmleçlerin doğru ve etkili bir şekilde kullanılması, daha kullanıcı dostu ve etkileşimli web sayfaları oluşturmanıza yardımcı olacaktır. Bu kapsamlı ve detaylı inceleme, CSS imleç özelliğinin doğru kullanımını ve olası hataları nasıl ele alabileceğinizi anlamanıza yardımcı olmalıdır.

CSS !important

CSS'de !important kuralı, bir özellik/değere normalden daha fazla önem atamak için kullanılır. Bu kural, belirli bir özellik için tüm önceki stil kurallarını geçersiz kılar. Bu bölümde, !important kuralının kullanımı, avantajları, dezavantajları ve doğru kullanımı üzerinde durulacaktır.

!important Kuralının Tanımı ve Kullanımı

CSS'de !important kuralı, bir stil özelliğinin önemini artırarak diğer tüm stil kurallarının önüne geçmesini sağlar. Bu kural, CSS dosyasında aşağıdaki gibi kullanılır:

selector {
    property: value !important;
}

Örnek Kullanım

p {
    color: red !important;
}

p {
    color: blue;
}

Yukarıdaki örnekte, <p> etiketlerinin rengi !important kuralı ile kırmızı olarak ayarlanmıştır. Bu nedenle, color: blue; kuralı geçersiz kalır ve <p> etiketlerinin rengi kırmızı olur.

!important Kuralının Avantajları

Öncelikli Stil Ataması : Belirli bir stilin diğer tüm stil kurallarının önüne geçmesini sağlar. Bu, kritik stilleri tanımlamak için faydalıdır.
Hızlı Düzeltmeler : Büyük projelerde veya karmaşık stil dosyalarında hızlı ve geçici düzeltmeler yapmak için kullanılabilir.

!important Kuralının Dezavantajları

Bakım Zorluğu : !important kurallarının aşırı kullanımı, stil dosyalarının bakımını zorlaştırır. Hangi kuralların geçerli olduğunu anlamak karmaşık hale gelir.
Spesifiklik Kuralının İhlali : CSS'nin doğal spesifiklik kuralını ihlal eder, bu da stil hiyerarşisini zorlaştırabilir.
Geri Dönüşü Zor : Bir kez !important kullanıldıktan sonra, bu kuralı geçersiz kılmak zor olabilir.

Doğru Kullanım Yöntemleri

Minimal Kullanım : !important kuralını yalnızca gerçekten gerekli olduğunda kullanın. Bu, stil dosyalarının okunabilirliğini ve bakımını kolaylaştırır.
Spesifiklik Artırma : Mümkünse, !important kullanmak yerine spesifikliği artırarak aynı etkiyi elde etmeye çalışın.
Yapısal Düzeltmeler : Sorunun temel kaynağını bulup çözmeye çalışın, geçici bir çözüm yerine kalıcı bir düzeltme yapın.

Örnek Senaryolar

Örnek 1: Buton Stili

.button {
    background-color: blue !important;
    color: white !important;
}

Bu örnekte, .button sınıfına sahip tüm butonların arka plan rengi mavi, yazı rengi ise beyaz olacaktır. Diğer tüm stil kuralları geçersiz kalacaktır.

Örnek 2: Özel Durum Stili

.special-alert {
    font-size: 20px !important;
    color: red !important;
}

Bu örnekte, .special-alert sınıfına sahip tüm elementlerin yazı tipi boyutu ve rengi belirlenen şekilde olacaktır. Bu, kritik uyarı mesajları için kullanılabilir.

Sonuç

!important kuralı, CSS'de güçlü bir araçtır, ancak dikkatli ve sınırlı bir şekilde kullanılması gerekir. Aşırı kullanımı, stil dosyalarının yönetimini zorlaştırabilir ve uzun vadede bakım sorunlarına yol açabilir. Bu nedenle, !important kuralını kullanmadan önce spesifikliği artırmayı ve stil hiyerarşisini gözden geçirmeyi düşünmelisiniz.

Bu kuralın doğru kullanımı, stil dosyalarınızın daha yönetilebilir ve sürdürülebilir olmasını sağlar.

CSS Shadow Effects

CSS ile metinlere ve öğelere gölge ekleyebilirsiniz. Bu rehberde, CSS'de gölge efektlerini uygulamak için kullanılan anahtar özellikleri ayrıntılı olarak inceleyeceğiz: text-shadow ve box-shadow . Her iki özellik de tasarımın görsel derinliğini artırmak ve öğeleri daha belirgin hale getirmek için kullanılır. Şimdi bu özellikleri detaylı bir şekilde ele alalım.

CSS `text-shadow` Özelliği

text-shadow özelliği, metinlere gölge uygulamak için kullanılır. Bu özellik, dört parametre alır: yatay gölge mesafesi, dikey gölge mesafesi, bulanıklık yarıçapı ve gölge rengi. Aşağıdaki örnek, basit bir metin gölgesinin nasıl uygulanacağını göstermektedir:

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

Bu örnekte:

2px yatay gölge mesafesini,
2px dikey gölge mesafesini,
5px bulanıklık yarıçapını,
rgba(0, 0, 0, 0.5) ise gölge rengini (yarı saydam siyah) belirtir.

Çoklu Gölgeler

Bir metne birden fazla gölge eklemek için, gölgeleri virgülle ayırarak listeleyebilirsiniz. Bu, gölge efektlerini daha karmaşık ve ilgi çekici hale getirebilir. Örneğin:

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}

Bu örnekte, metne hem siyah hem de kırmızı gölgeler eklenmiştir, bu da daha dramatik bir görünüm sağlar.

CSS `box-shadow` Özelliği

div {
    3px 3px 10px rgba(0, 0, 0, 0.5);
}

box-shadow özelliği, bir öğeye bir veya daha fazla gölge uygulamak için kullanılır. Bu özellik, text-shadow ile benzer parametrelere sahiptir ancak ek olarak iç gölge parametresi de bulunur. Aşağıdaki örnek, basit bir kutu gölgesinin nasıl uygulanacağını göstermektedir:

CSS Box Shadow özelliği, HTML elemanlarının çevresine gölge eklemenizi sağlar. box-shadow özelliği, gölgenin konumunu, rengini ve yayılma yarıçapını belirlemenize olanak tanır. box-shadow property'sinin kullanımı ve farklı değerlerle nasıl çalıştığına dair açıklamalar aşağıda verilmiştir:

Temel Kullanım:

div {
    box-shadow: 10px 10px;
}

Bu örnekte, box-shadow özelliği yalnızca iki değer alır: yatay ve dikey offset (10px 10px). Ancak, gölge bulanıklığı ve renk belirtilmediği için tarayıcı varsayılan değerleri kullanacaktır.

Renk Belirtilmesi:

div {
    box-shadow: 10px 10px aqua;
}

Bu örnekte, gölge için bir renk belirtilmiştir. Yatay ve dikey offset (10px 10px) ile birlikte gölgenin rengi "aqua" olarak ayarlanmıştır.

Bulanıklık Yarıçapı Ekleme:

div {
    box-shadow: 10px 10px 5px aqua;
}

Bu örnekte, üçüncü değer olan bulanıklık yarıçapı (5px) eklenmiştir. Bu, gölgenin ne kadar yayılacağını belirler. Renk yine "aqua" olarak belirtilmiştir.

İç Gölge:

div {
    box-shadow: 10px 10px 5px aqua inset;
}

Bu örnekte, inset anahtar kelimesi kullanılarak gölgenin içe doğru olacağı belirtilmiştir. Gölge, elemanın dışı yerine iç kısmına uygulanır.

Çoklu Gölge Kullanımı:

div {
    box-shadow: 5px 5px orange, 10px 10px green, 15px 15px aqua;
}

Bu örnekte, birden fazla gölge belirtilmiştir. Her bir gölge virgülle ayrılır ve farklı offset, bulanıklık yarıçapı ve renk değerleri kullanılarak tanımlanır. Bu örnekte:

İlk gölge: 5px yatay, 5px dikey, renk "orange"
İkinci gölge: 10px yatay, 10px dikey, renk "green"
Üçüncü gölge: 15px yatay, 15px dikey, renk "aqua"

Detaylı Açıklama

box-shadow özelliği genellikle şu formatta kullanılır:

box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color] [inset];

h-offset: Gölgenin yatay konumunu belirler. Pozitif değerler sağa, negatif değerler sola taşır.
v-offset: Gölgenin dikey konumunu belirler. Pozitif değerler aşağıya, negatif değerler yukarıya taşır.
blur-radius: (Opsiyonel) Gölgenin bulanıklık derecesini belirler. Pozitif değerler daha bulanık gölgeler oluşturur. Varsayılan değer 0'dır.
spread-radius: (Opsiyonel) Gölgenin yayılma derecesini belirler. Pozitif değerler gölgeyi büyütür, negatif değerler küçültür.
color: (Opsiyonel) Gölgenin rengini belirler. Varsayılan değer mevcut metin rengidir.
inset: (Opsiyonel) Gölgenin içe doğru uygulanmasını sağlar. Varsayılan olarak dışa doğru uygulanır.

Bu açıklamalarla birlikte box-shadow özelliğini CSS kodlarınızda nasıl kullanabileceğinizi detaylı bir şekilde öğrenmiş oldunuz.

Bu örnekte:

3px yatay gölge mesafesini,
3px dikey gölge mesafesini,
10px bulanıklık yarıçapını,
rgba(0, 0, 0, 0.5) ise gölge rengini (yarı saydam siyah) belirtir.

İç Gölgeler

box-shadow özelliği ile iç gölgeler de oluşturabilirsiniz. İç gölge, gölgenin öğenin iç kısmına uygulandığı anlamına gelir. Bunu yapmak için inset anahtar kelimesi kullanılır. Örneğin:

div {
    box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.5);
}

Bu örnekte, gölge öğenin içine uygulanmıştır ve bu da öğeye içsel bir derinlik kazandırır.

Sonuç

CSS'deki text-shadow ve box-shadow özellikleri, metinler ve öğeler üzerinde etkileyici görsel efektler oluşturmak için güçlü araçlardır. Bu özellikler, tasarımlarınıza derinlik ve boyut kazandırmanıza yardımcı olur. Uygulamada, bu gölgeleri dikkatli ve estetik bir şekilde kullanmak, kullanıcı deneyimini zenginleştirebilir ve görsel hiyerarşiyi güçlendirebilir.

CSS Opacity - Transparency

Giriş

CSS opaklık ve şeffaflık özellikleri, bir web sayfasındaki öğelerin görünürlüğünü ve opaklığını kontrol etmemizi sağlar. Bu özellikler, kullanıcı deneyimini zenginleştirmek ve estetik olarak hoş tasarımlar oluşturmak için yaygın olarak kullanılır. Bu belgede, CSS'de opaklık ve şeffaflık özelliklerinin kullanımı hakkında kapsamlı bir inceleme yapılacaktır.

Opaklık Özelliği

opacity özelliği, bir öğenin opaklık/şeffaflık seviyesini belirler. Bu özellik, öğenin ne kadar saydam olacağını kontrol eder ve 0.0 ile 1.0 arasında bir değer alır. 0.0 değeri tamamen şeffaf (görünmez) anlamına gelirken, 1.0 değeri tamamen opak (görünür) anlamına gelir.

Kullanımı

.transparent {
  opacity: 0.3;
}

Bu örnekte, .transparent sınıfına sahip öğe %30 opak olacaktır.

Şeffaf Resim

Opacity özelliği, resimler üzerinde de kullanılabilir. Bir resmin saydamlığını ayarlayarak, altta yatan öğelerin görünürlüğünü artırabilirsiniz.

Örnek

<img src="example.jpg" style="opacity: 0.5;">

Bu kod, example.jpg resmini %50 opak hale getirecektir.

RGBA ve HSLA ile Şeffaflık

Opaklık özelliğinin yanı sıra, renk değerlerinde de şeffaflık ayarı yapılabilir. Bu, RGBA (Red, Green, Blue, Alpha) ve HSLA (Hue, Saturation, Lightness, Alpha) renk modelleri ile gerçekleştirilir. Alpha kanalı, rengin saydamlığını belirler ve 0.0 ile 1.0 arasında bir değer alır.

RGBA Kullanımı

.transparent-bg {
  background-color: rgba(255, 0, 0, 0.5);
}

Bu örnekte, arka plan rengi kırmızı olup %50 saydamdır.

HSLA Kullanımı

.transparent-bg {
  background-color: hsla(120, 100%, 50%, 0.3);
}

Bu örnekte, arka plan rengi yeşil olup %30 saydamdır.

Kritik Değerlendirme

Belgede verilen örnekler temel düzeyde olup, daha karmaşık senaryolar göz ardı edilmiştir. Örneğin, opaklık değerinin çocuk öğelere olan etkisi belirtilmemiştir. Opaklık değerinin bir öğeye uygulanması durumunda, bu değerin tüm çocuk öğelere de uygulanacağını unutmamak gerekir.

Örnek

<div class="parent" style="opacity: 0.5;">
  <p>Bu metin de %50 saydam olacaktır.</p>
</div>

Bu örnekte, .parent sınıfına sahip div öğesi %50 saydam olduğunda, içindeki p öğesi de aynı şekilde %50 saydam olacaktır.

Sonuç

CSS'de opaklık ve şeffaflık özellikleri, web tasarımında önemli bir rol oynar ve kullanıcı deneyimini iyileştirebilir. Bu belgede, temel kullanımlardan başlayarak, RGBA ve HSLA renk modelleri ile şeffaflık ayarları ve opaklık değerlerinin çocuk öğelere etkisi gibi daha ileri konular ele alınmıştır. Web tasarımında bu özelliklerin doğru kullanımı, estetik ve işlevsel açıdan zengin içerikler oluşturmanıza yardımcı olacaktır.

CSS Filter Property

CSS Filter Özelliği

CSS filter özelliği, bir öğeye (genellikle <img> gibi) görsel efektler eklemek için kullanılır. Bu efektler arasında bulanıklık (blur) ve doygunluk (saturation) gibi işlemler yer alır.

Temel Kullanım

filter özelliği, bir HTML öğesinin görünümünü değiştiren çeşitli fonksiyonları içerir. Aşağıda bu fonksiyonlar ve kullanım örnekleri verilmiştir:

Bulanıklık (Blur)

Bulanıklık efekti, bir öğenin kenarlarını yumuşatmak için kullanılır. blur() fonksiyonu ile uygulanır ve piksel cinsinden bir yarıçap değeri alır. Örneğin:

img {
  filter: blur(5px);
}

Bu kod, tüm <img> öğelerine 5 piksel yarıçapında bulanıklık efekti uygular.

Doygunluk (Saturation)

Doygunluk efekti, bir öğenin renk doygunluğunu ayarlamak için kullanılır. saturate() fonksiyonu ile uygulanır ve yüzde cinsinden bir değer alır. Örneğin:

img {
  filter: saturate(150%);
}

Bu kod, tüm <img> öğelerinin renk doygunluğunu %150 yapar, yani renkleri daha canlı hale getirir.

Diğer Filter Fonksiyonları

filter özelliği, sadece blur ve saturate ile sınırlı değildir. Diğer önemli filter fonksiyonları şunlardır:

Grayscale: Bir öğeyi siyah-beyaz yapmak için kullanılır.
```
img {
  filter: grayscale(100%);
}
```
Sepia: Bir öğeye sepya tonu ekler, yani kahverengi bir ton verir.
```
img {
  filter: sepia(100%);
}
```
Brightness: Bir öğenin parlaklığını ayarlamak için kullanılır.
```
img {
  filter: brightness(50%);
}
```
Contrast: Bir öğenin kontrastını ayarlamak için kullanılır.
```
img {
  filter: contrast(200%);
}
```
Invert: Bir öğenin renklerini tersine çevirir.
```
img {
  filter: invert(100%);
}
```

Birden Fazla Filter Uygulamak

Bir öğeye birden fazla filter fonksiyonu uygulanabilir. Fonksiyonlar boşluk ile ayrılır. Örneğin:

img {
  filter: blur(5px) saturate(150%);
}

Bu kod, tüm <img> öğelerine hem 5 piksel bulanıklık hem de %150 doygunluk uygular.

Kritik Değerlendirme

PDF içeriğinde verilen bilgiler genel olarak doğru ve temel kullanımı kapsar. Ancak daha detaylı ve doğru bir bilgi sunumu için bazı eklemeler ve düzeltmeler gereklidir:

Örnekteki Kod Blokları: Kod örnekleri eksik veya hatalı olabilir. Her zaman çalışabilir kod örnekleri sağlamak önemlidir.
Fonksiyonların Detayları: Her fonksiyonun aldığı parametreler ve bu parametrelerin etkileri detaylı olarak açıklanmalıdır.
Uyumluluk ve Performans: Filter özelliklerinin tarayıcı uyumluluğu ve performans etkileri hakkında bilgi verilmelidir.

Özet

CSS filter özelliği, web geliştirme sürecinde görsel efektler eklemek için güçlü ve esnek bir araçtır. Doğru ve etkili kullanım, kullanıcı deneyimini artırabilir ve görsel olarak çekici web sayfaları oluşturulmasına yardımcı olabilir. Bu nedenle, her bir filter fonksiyonunun dikkatlice öğrenilmesi ve uygulanması önemlidir.

CSS Görsel Spriteleri

CSS görsel spriteleri, birden fazla küçük görüntüyü tek bir büyük görüntü dosyasında birleştirme tekniğidir. Bu teknik, web sayfalarının performansını artırmak için kullanılır. Görsel spriteler, özellikle birçok küçük simgenin bir arada kullanıldığı durumlarda, HTTP isteklerini azaltarak yükleme sürelerini iyileştirir.

Görsel Sprite Nedir?

Görsel sprite, birden fazla küçük görüntünün tek bir büyük görüntü dosyasında birleştirilmesidir. CSS kullanılarak bu büyük görüntü dosyasının belirli bölgeleri seçilip gösterilir. Bu yöntem, özellikle kullanıcı arayüzlerinde ikon setlerinin kullanıldığı yerlerde oldukça etkilidir.

Örnek

Örneğin, aşağıdaki sprite görüntüsü dört farklı ikonu tek bir dosyada birleştirir:

Sprite Örneği

Bu büyük görüntü dosyasının belirli bölgelerini CSS ile nasıl göstereceğimize bakalım:

.sprite {
    background-image: url('sprite_example.png');
    background-repeat: no-repeat;
    display: inline-block;
}

.icon1 {
    width: 50px;
    height: 50px;
    background-position: 0 0; /* İlk ikon */
}

.icon2 {
    width: 50px;
    height: 50px;
    background-position: -50px 0; /* İkinci ikon */
}

.icon3 {
    width: 50px;
    height: 50px;
    background-position: -100px 0; /* Üçüncü ikon */
}

.icon4 {
    width: 50px;
    height: 50px;
    background-position: -150px 0; /* Dördüncü ikon */
}

Bu CSS kodu, sprite_example.png dosyasındaki dört farklı ikonu .icon1, .icon2, .icon3, ve .icon4 sınıflarıyla gösterecektir.

Görsel Sprite Kullanmanın Avantajları

Azalan HTTP İstekleri: Birden fazla küçük görüntü yerine tek bir büyük görüntü dosyasının kullanılması, HTTP isteklerinin sayısını azaltır ve böylece sayfa yükleme sürelerini iyileştirir.
Performans Artışı: HTTP isteklerinin azalması, tarayıcıların daha hızlı ve verimli çalışmasını sağlar.
Daha Kolay Bakım: Tüm küçük görüntüler tek bir dosyada birleştirildiğinden, bu dosyanın bakımı ve güncellenmesi daha kolaydır.

Kaynaklar ve Araçlar

Görsel sprite oluşturmak için kullanabileceğiniz bazı araçlar şunlardır:

SpriteMe: Görsellerinizi otomatik olarak birleştirerek sprite dosyası oluşturur.
SpritePad: Sürükle ve bırak arayüzü ile sprite dosyaları oluşturmanızı sağlar.
TexturePacker: Gelişmiş özelliklere sahip bir sprite oluşturma aracıdır.

Sonuç

CSS görsel spriteleri, web performansını artırmak ve HTTP isteklerini azaltmak için etkili bir tekniktir. Bu yöntemi kullanarak, özellikle ikon setleri gibi birçok küçük görüntünün bir arada kullanıldığı projelerde büyük fayda sağlayabilirsiniz. Bu anlatılan tekniklerin doğru ve etkili bir şekilde uygulanması, web sayfalarınızın performansını önemli ölçüde iyileştirecektir.

CSS Gradyan

CSS gradyanları, iki veya daha fazla belirli renk arasında düzgün geçişler göstermenizi sağlar. CSS, üç tür gradyanı tanımlar:

Lineer Gradyanlar (aşağı/yukarı/sola/sağa/çapraz olarak gider)
Radyal Gradyanlar (merkezlerine göre tanımlanır)
Konik Gradyanlar (açısal olarak döner)

CSS Lineer Gradyanlar

Lineer gradyan oluşturmak için en az iki renk duraklama noktası tanımlamalısınız. Renk duraklama noktaları, geçişin başladığı ve bittiği yerleri belirler. Lineer gradyanlar, başlangıç noktası ve bitiş noktası arasında doğrusal bir renk geçişi oluşturur.

Temel Kullanım

Bir lineer gradyan oluşturmak için linear-gradient() fonksiyonunu kullanırız. Bu fonksiyon, iki ana parametre alır: yön (isteğe bağlı) ve renk duraklamaları.

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction: Gradyanın yönünü belirtir (varsayılan olarak aşağıya doğrudur). Yön, açı olarak (deg cinsinden) veya kelime olarak belirtilebilir (to right, to left, to bottom, to top).
color-stop: Gradyandaki belirli bir rengi ve bu rengin duraklama noktasını belirtir.

Örnekler

Yukarıdan Aşağıya Lineer Gradyan

background: linear-gradient(to bottom, red, yellow);

Sola Doğru Lineer Gradyan

background: linear-gradient(to left, blue, green);

45 Derecelik Açıyla Lineer Gradyan

background: linear-gradient(45deg, purple, orange);

Çok Renkli Gradyanlar

Bir gradyan, ikiden fazla renk duraklaması içerebilir. Renklerin nerede duracağını belirlemek için yüzde (%) veya px cinsinden değerler kullanılabilir.

Çok Renkli Gradyan

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

CSS Radyal Gradyanlar

Radyal gradyanlar, merkezden başlayarak dışa doğru yayılır. En az iki renk duraklama noktası tanımlamanız gerekmektedir. Radyal gradyanlar, dairesel veya eliptik olabilir.

Temel Kullanım

Bir radyal gradyan oluşturmak için radial-gradient() fonksiyonunu kullanırız. Bu fonksiyon, merkez (isteğe bağlı), şekil (isteğe bağlı) ve renk duraklamaları gibi parametreler alır.

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

shape size at position: Gradyanın şeklini, boyutunu ve pozisyonunu belirtir. Şekil circle (daire) veya ellipse (elips) olabilir. Pozisyon at center, at top left vb. olarak belirtilir.
color-stop: Gradyandaki belirli bir rengi ve bu rengin duraklama noktasını belirtir.

Örnekler

Dairesel Radyal Gradyan

background: radial-gradient(circle, red, yellow);

Eliptik Radyal Gradyan

background: radial-gradient(ellipse, blue, green);

Merkezde Konumlandırılmış Dairesel Radyal Gradyan

background: radial-gradient(circle at center, purple, orange);

Çok Renkli Radyal Gradyanlar

Radyal gradyanlar da ikiden fazla renk duraklaması içerebilir.

Çok Renkli Radyal Gradyan

background: radial-gradient(circle, red 0%, yellow 50%, green 100%);

CSS Konik Gradyanlar

Konik gradyanlar, merkezi bir noktadan başlayarak saat yönünde döner. CSS'de konik gradyan oluşturmak için conic-gradient() fonksiyonu kullanılır.

Temel Kullanım

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

from angle at position: Gradyanın başlangıç açısını ve pozisyonunu belirtir.
color-stop: Gradyandaki belirli bir rengi ve bu rengin duraklama noktasını belirtir.

Örnekler

Temel Konik Gradyan

background: conic-gradient(red, yellow, green);

45 Derece Açıyla Başlayan Konik Gradyan

background: conic-gradient(from 45deg, blue, purple, orange);

Gradyanlarda Opaklık ve Transparanlık

Gradyanlarda opaklık ve transparanlık ayarları da yapılabilir. Renk duraklamalarında RGBA veya HSLA renk değerleri kullanarak opaklık derecesi belirlenebilir.

Transparanlık İçeren Gradyan

background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5));

Bu bilgiler doğrultusunda, CSS gradyanları kullanarak web sitelerinizde etkileyici ve modern arka planlar oluşturabilirsiniz. Gradyanlar, geçişlerin yumuşaklığı ve renklerin zenginliği ile dikkat çeker. Bu nedenle, doğru kullanımla estetik ve görsel açıdan etkileyici sonuçlar elde edebilirsiniz.a

CSS Form Elements

CSS (Cascading Style Sheets), HTML (Hypertext Markup Language) ile birlikte, web sayfalarının stilini belirlemede temel bir rol oynar. CSS formları, kullanıcı girdilerini toplamak ve genellikle bir sunucuya işlenmek üzere göndermek için kullanılır. Bu eğitim, CSS kullanarak form elemanlarının nasıl stilize edileceğini ayrıntılı bir şekilde açıklamaktadır.

1. Bordered Inputs (Kenarlıklı Girdiler)

CSS kullanarak, giriş elemanlarının (input) kenarlıklarını değiştirebilir, boyutlarını ve renklerini ayarlayabilir ve yuvarlatılmış köşeler ekleyebilirsiniz. Bu, kullanıcı deneyimini iyileştirmek ve formların görsel çekiciliğini artırmak için önemlidir.

Örnek 1:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bordered Input</title>
    <style>
        input {
            border: 2px solid #4CAF50;
            border-radius: 4px;
            padding: 10px;
            width: 300px;
        }
    </style>
</head>

<body>
    <form>
        <label for="fname">Ad:</label><br><br>
        <input type="text" id="fname" name="fname"><br><br>
        <input type="submit" value="Gönder">
    </form>
</body>

</html>

Yukarıdaki kodda, input elemanlarına 2 piksel genişliğinde ve yeşil renkte bir kenarlık eklenmiştir. Ayrıca, köşeler 4 piksel yarıçapında yuvarlatılmıştır.

2. Focused Inputs (Odaklanmış Girdiler)

Odaklandığında stilini değiştiren giriş alanları, kullanıcıların hangi alanın aktif olduğunu anlamasına yardımcı olur.

Örnek 2:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focused Input</title>
    <style>
        input {
            border: 2px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            width: 300px;
        }

        input:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
            outline: none;
        }
    </style>
</head>

<body>
    <form>
        <label for="lname">Soyad:</label><br><br>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="submit" value="Gönder">
    </form>
</body>

</html>

Bu örnekte, input:focus seçici kullanılarak odaklandığında kenarlık rengi değiştirilmiş ve kutuya bir gölge eklenmiştir. outline: none; ifadesi, tarayıcının varsayılan odak çerçevesini kaldırır.

3. Placeholder Styling (Yer Tutucu Stil)

Yer tutucular (placeholders), kullanıcıya ne tür veri girmesi gerektiği hakkında ipucu verir. CSS ile yer tutucuların stilini değiştirmek mümkündür.

Örnek 3:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placeholder Styling</title>
    <style>
        input::placeholder {
            color: #888;
            font-style: italic;
        }
    </style>
</head>

<body>
    <form>
        <label for="email">Email:</label><br><br>
        <input type="email" id="email" name="email" placeholder="example@example.com"><br><br>
        <input type="submit" value="Gönder">
    </form>
</body>

</html>

Bu örnekte, input::placeholder seçici kullanılarak yer tutucunun rengi ve yazı stili değiştirilmiştir.

4. Custom Checkboxes and Radio Buttons (Özel Onay Kutuları ve Radyo Düğmeleri)

CSS ile varsayılan onay kutuları ve radyo düğmelerinin yerine özel tasarımlar kullanılabilir.

Örnek 4:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Checkboxes and Radio Buttons</title>
    <style>
        input[type="checkbox"],
        input[type="radio"] {
            display: none;
        }

        input[type="checkbox"]+label,
        input[type="radio"]+label {
            position: relative;
            padding-left: 25px;
            cursor: pointer;
            display: inline-block;
            color: #333;
        }

        input[type="checkbox"]+label:before,
        input[type="radio"]+label:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border: 2px solid #4CAF50;
            border-radius: 4px;
            background-color: #fff;
        }

        input[type="radio"]+label:before {
            border-radius: 50%;
        }

        input[type="checkbox"]:checked+label:before,
        input[type="radio"]:checked+label:before {
            background-color: #4CAF50;
        }

        input[type="checkbox"]:checked+label:after {
            content: "\2713";
            position: absolute;
            left: 5px;
            top: 2px;
            font-size: 16px;
            color: #fff;
        }

        input[type="radio"]:checked+label:after {
            content: "";
            position: absolute;
            left: 6px;
            top: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <form>
        <input type="checkbox" id="chk1">
        <label for="chk1">Seçenek 1</label><br><br>
        <input type="radio" id="rad1" name="rad">
        <label for="rad1">Seçenek A</label><br><br>
        <input type="radio" id="rad2" name="rad">
        <label for="rad2">Seçenek B</label><br><br>
        <input type="submit" value="Gönder">
    </form>
</body>

</html>

Bu örnekte, input[type="checkbox"] ve input[type="radio"] elemanları gizlenmiş ve yerlerine stilize edilmiş label elemanları kullanılmıştır.

5. Styling Select Boxes (Seçim Kutularını Stilize Etme)

CSS ile seçim kutularının (select) stilini değiştirmek, formun genel estetiğini iyileştirebilir.

Örnek 5:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Select Box</title>
    <style>
        select {
            width: 300px;
            padding: 10px;
            border: 2px solid #4CAF50;
            border-radius: 4px;
            background-color: #fff;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url('data:image/svg+xml;charset=US-ASCII,%3csvg xmlns%3d%22http%3a//www.w3.org/2000/svg%22 width%3d%2229%22 height%3d%2216%22 viewBox%3d%220 0 29 16%22%3e%3cpath fill%3d%22%234CAF50%22 d%3d%22M14.5 16L0 0h29z%22/%3e%3c/svg%3e');
            background-repeat: no-repeat;
            background-position: right 10px top 50%;
        }
    </style>
</head>

<body>
    <form>
        <label for="options">Seçenekler:</label><br><br>
        <select id="options" name="options">
            <option value="option1">Seçenek 1</option>
            <option value="option2">Seçenek 2</option>
            <option value="option3">Seçenek 3</option>
        </select><br><br>
        <input type="submit" value="Gönder">
    </form>
</body>

</html>

CSS Overflow Property

Konsept

CSS overflow özelliği, bir alanın içine sığmayan içerikle ne yapılacağını kontrol eder. Bu özellik, içeriğin taşması, kırpılması veya kaydırma çubukları ile yönetilmesi gibi seçenekler sunar. Aşağıda, bu özelliğin nasıl kullanıldığı ve farklı değerlerinin ne anlama geldiği detaylı bir şekilde açıklanmaktadır.

`overflow` Özelliği

overflow özelliği dört ana değer alabilir:

visible : Varsayılan değerdir. İçerik taşarsa, taşan kısım gösterilir.
hidden : İçerik taşarsa, taşan kısım gizlenir ve sadece uygun alana sığan kısım gösterilir.
scroll : İçerik taşarsa, kaydırma çubukları eklenir. İçerik taşmasa bile kaydırma çubukları her zaman gösterilir.
auto : İçerik taşarsa, kaydırma çubukları eklenir. Ancak, içerik taşmıyorsa kaydırma çubukları gösterilmez.

Kullanım Örnekleri

`overflow: visible;`

div {
    width: 100px;
    height: 100px;
    overflow: visible;
}

Bu örnekte, div elemanının içeriği belirlenen genişlik ve yüksekliği aşarsa, taşan içerik görünür kalır.

`overflow: hidden;`

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

Bu örnekte, div elemanının içeriği belirlenen genişlik ve yüksekliği aşarsa, taşan kısım gizlenir ve sadece uygun alana sığan kısım gösterilir.

`overflow: scroll;`

div {
    width: 100px;
    height: 100px;
    overflow: scroll;
}

Bu örnekte, div elemanının içeriği belirlenen genişlik ve yüksekliği aşarsa, kaydırma çubukları eklenir. İçerik taşmasa bile kaydırma çubukları her zaman gösterilir.

`overflow: auto;`

div {
    width: 100px;
    height: 100px;
    overflow: auto;
}

Bu örnekte, div elemanının içeriği belirlenen genişlik ve yüksekliği aşarsa, kaydırma çubukları eklenir. Ancak, içerik taşmıyorsa kaydırma çubukları gösterilmez.

`overflow-x` ve `overflow-y` Özellikleri

overflow özelliğinin yanısıra, overflow-x ve overflow-y özellikleri de belirli eksenlerdeki taşmaları kontrol etmek için kullanılabilir.

`overflow-x`

overflow-x özelliği, yatay eksende taşmayı kontrol eder.

div {
    width: 100px;
    height: 100px;
    overflow-x: scroll;
}

Bu örnekte, yatay eksende taşma olduğunda kaydırma çubuğu eklenir.

`overflow-y`

overflow-y özelliği, dikey eksende taşmayı kontrol eder.

div {
    width: 100px;
    height: 100px;
    overflow-y: hidden;
}

Bu örnekte, dikey eksende taşma olduğunda içerik gizlenir.

Taşma Davranışlarının Uyumluluğu ve Kullanım Alanları

Tarayıcı Uyumluluğu

overflow özelliği modern tarayıcıların tamamı tarafından desteklenmektedir. Ancak, eski tarayıcılarda bazı değerler ve kombinasyonlar beklenmedik sonuçlar verebilir. Bu nedenle, geniş tarayıcı desteği gerektiren projelerde uyumluluk testleri yapmak önemlidir.

Kullanım Alanları

overflow özelliği genellikle aşağıdaki durumlarda kullanılır:

Dinamik olarak yüklenen veya değişen içeriklerin görüntülenmesi
Sabit boyutlu konteynerlerde içerik yönetimi
Kullanıcı deneyimini artırmak için kaydırma çubuklarının kontrolü

Bu özelliklerin doğru kullanımı, kullanıcı arayüzlerinin ve deneyimlerinin iyileştirilmesine yardımcı olur. Örneğin, taşan içeriği gizlemek veya kaydırma çubukları eklemek, kullanıcıların daha temiz ve düzenli bir görünümle etkileşimde bulunmalarını sağlar. Bu kapsamlı kılavuz, CSS overflow özelliğinin temel prensiplerini ve kullanım alanlarını detaylı bir şekilde açıklamaktadır. Projelerinizde bu özelliği kullanarak içerik yönetimini ve kullanıcı deneyimini optimize edebilirsiniz.

CSS Resize Property

Giriş

Bu belge, CSS resize özelliği üzerine kapsamlı ve detaylı bir rehber sunmaktadır. resize özelliği, bir öğenin kullanıcı tarafından yeniden boyutlandırılıp boyutlandırılamayacağını ve nasıl boyutlandırılacağını tanımlar. Bu özellik, yalnızca belirli durumlarda geçerlidir ve doğru kullanımı, web uygulamalarında daha iyi kullanıcı deneyimi sağlamak için kritiktir.

Genel Bakış

resize özelliği, CSS'de bir öğenin yeniden boyutlandırılabilirliğini kontrol etmek için kullanılır. Bu özellik, özellikle metin alanları gibi kullanıcı giriş alanlarında kullanışlıdır.

Uygulama Koşulları

resize özelliği, yalnızca overflow özelliği "scroll", "auto" veya "hidden" olarak ayarlandığında geçerlidir. overflow özelliği "visible" olarak ayarlandığında resize özelliği çalışmaz.
resize özelliği, satır içi (inline) öğelerde uygulanamaz.

Değerler

resize özelliği şu değerlere sahiptir:

none: Öğenin yeniden boyutlandırılamayacağını belirtir.
both: Öğenin hem yatay hem de dikey olarak yeniden boyutlandırılabileceğini belirtir.
horizontal: Öğenin yalnızca yatay olarak yeniden boyutlandırılabileceğini belirtir.
vertical: Öğenin yalnızca dikey olarak yeniden boyutlandırılabileceğini belirtir.

Kullanım Örnekleri

Aşağıdaki örnekler, resize özelliğinin nasıl kullanılacağını göstermektedir.

Örnek 1: `none` Değeri

div {
    resize: none;
    overflow: auto;
}

Bu örnekte, div öğesi yeniden boyutlandırılamaz.

Örnek 2: `both` Değeri

textarea {
    resize: both;
    overflow: auto;
}

Bu örnekte, textarea öğesi hem yatay hem de dikey olarak yeniden boyutlandırılabilir.

Örnek 3: `horizontal` Değeri

div {
    resize: horizontal;
    overflow: auto;
}

Bu örnekte, div öğesi yalnızca yatay olarak yeniden boyutlandırılabilir.

Örnek 4: `vertical` Değeri

div {
    resize: vertical;
    overflow: auto;
}

Bu örnekte, div öğesi yalnızca dikey olarak yeniden boyutlandırılabilir.

Uygulamada Dikkat Edilmesi Gerekenler

overflow Özelliği: resize özelliğinin çalışabilmesi için overflow özelliğinin "scroll", "auto" veya "hidden" olarak ayarlandığından emin olunmalıdır.
Satır İçi Öğeler: resize özelliği satır içi öğelerde (örneğin, <span>, <a>) çalışmaz. Bu özelliği yalnızca blok veya blok seviyesindeki öğelerde kullanın.
Kullanıcı Deneyimi: Yeniden boyutlandırma işlevi, kullanıcı deneyimini olumlu veya olumsuz etkileyebilir. Bu nedenle, hangi öğelerin yeniden boyutlandırılabilir olacağını dikkatlice seçin.

Sonuç

CSS resize özelliği, kullanıcıların web sayfalarındaki belirli öğeleri yeniden boyutlandırmasına olanak tanır ve kullanıcı deneyimini özelleştirme imkanı sunar. Bu özellik, doğru kullanıldığında web uygulamalarının etkileşimli ve esnek olmasını sağlar. Ancak, bu özelliği kullanırken dikkat edilmesi gereken kurallar ve kısıtlamalar göz önünde bulundurulmalıdır.

Bu rehberde, resize özelliğinin tüm yönleri ele alınmış ve doğru kullanım için gerekli bilgiler sunulmuştur. Bu bilgileri kullanarak web projelerinizde daha iyi kullanıcı deneyimleri oluşturabilirsiniz.

CSS Lists

CSS, web sayfalarının stilini ve düzenini belirlemek için kullanılan güçlü bir araçtır. Bu kılavuz, CSS listeleri ve ilgili özellikleri hakkında kapsamlı ve detaylı bilgi sağlamayı amaçlamaktadır.

Farklı Liste Elemanı İşaretleyicileri

list-style-type özelliği, liste elemanları için kullanılacak işaretleyicinin türünü belirler. Bu özellik, numaralı listeler (ordered lists) ve numarasız listeler (unordered lists) için çeşitli işaretleyiciler sağlar. Örnek olarak:

list-style-type: disc; -> Daire işaretleyici
list-style-type: circle; -> Boş daire işaretleyici
list-style-type: square; -> Kare işaretleyici
list-style-type: decimal; -> Sayısal işaretleyici
list-style-type: lower-alpha; -> Küçük harf alfabe işaretleyici
list-style-type: upper-alpha; -> Büyük harf alfabe işaretleyici

Liste Elemanı İşaretleyici Olarak Görüntü Kullanımı

list-style-image özelliği, liste elemanı işaretleyicisi olarak bir görüntü belirlemenizi sağlar. Bu özellik, özellikle özelleştirilmiş liste işaretleyicileri oluşturmak için kullanışlıdır. Kullanımı:

ul {
    list-style-image: url('path_to_image.png');
}

Bu örnekte, liste elemanı işaretleyicisi olarak belirtilen görüntü kullanılacaktır.

Liste Elemanı İşaretleyicilerinin Konumu

list-style-position özelliği, liste elemanı işaretleyicilerinin (madde işaretleri) konumunu belirler. Bu özellik, işaretleyicilerin liste elemanının içinde veya dışında yer almasını sağlar. İki olası değeri vardır:

list-style-position: outside; -> İşaretleyici, liste elemanının dışında yer alır.
list-style-position: inside; -> İşaretleyici, liste elemanının içinde yer alır.

Örnekler

Aşağıda, farklı list-style özelliklerinin nasıl kullanılacağını gösteren bazı örnekler verilmiştir:

Numarasız Liste (Unordered List) Örneği:

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: square;
        }
    </style>
</head>

<body>

    <ul>
        <li>Elma</li>
        <li>Muz</li>
        <li>Çilek</li>
    </ul>

</body>

</html>

Bu örnekte, numarasız listenin elemanları kare işaretleyicilerle belirtilmiştir.

Numaralı Liste (Ordered List) Örneği:

<!DOCTYPE html>
<html>

<head>
    <style>
        ol {
            list-style-type: upper-roman;
        }
    </style>
</head>

<body>

    <ol>
        <li>Birinci</li>
        <li>İkinci</li>
        <li>Üçüncü</li>
    </ol>

</body>

</html>

Bu örnekte, numaralı listenin elemanları büyük Roma rakamları ile belirtilmiştir.

Liste Stili Özelliklerinin Özeti

list-style-type : Liste işaretleyicisinin türünü belirler.
list-style-image : Liste işaretleyicisi olarak bir görüntü belirler.
list-style-position : Liste işaretleyicisinin konumunu belirler.

Bu özelliklerin doğru kullanımı, web sayfalarınızın listesini daha okunabilir ve görsel olarak çekici hale getirebilir. CSS listeleri üzerinde çalışırken, bu özelliklerin tümünü dikkate alarak en uygun stili seçebilirsiniz. Bu kılavuz, CSS listeleri ve ilgili özellikler hakkında kapsamlı bilgi sağlamayı amaçlamaktadır. Her bir özelliğin doğru ve etkili bir şekilde kullanımı, web sayfalarınızın stilini ve düzenini optimize etmenize yardımcı olacaktır.

CSS Table

Giriş

Bu eğitimde, CSS kullanarak tabloların nasıl stilize edileceğini ayrıntılı bir şekilde inceleyeceğiz. Bu eğitimde ele alınacak konular arasında tablo sınırları, tablo boyutu, yatay ve dikey hizalama, ve tablo stili bulunmaktadır. Tüm konular bilimsel ve profesyonel bir dil ile ele alınacak olup, herhangi bir hatalı bilgi kritik bir şekilde ele alınacaktır.

Tablo Sınırları

Tablo sınırlarını belirlemek için CSS'te border özelliği kullanılır. Bu özellik, tabloların hücrelerinin çevresindeki çizgileri belirlemek için kullanılır. Örneğin:

table, th, td {
  border: 1px solid black;
}

Bu kod, tüm tablo, başlık hücreleri (<th>) ve veri hücreleri (<td>) için siyah renkte 1 piksel genişliğinde katı çizgiler oluşturur.

Tablo Boyutu

Tabloların genişliği ve yüksekliği width ve height özellikleri ile tanımlanır. Bu özellikler, tabloların boyutlarını belirlemek için kullanılır. Örneğin:

table {
  width: 100%;
  height: 300px;
}

Bu kod, tablonun genişliğini konteynerinin tamamını kaplayacak şekilde (%100) ve yüksekliğini 300 piksel olarak ayarlar.

Yatay Hizalama

Tablo içeriğinin yatay hizalaması text-align özelliği ile ayarlanır. Bu özellik, içeriklerin sol, sağ veya ortada hizalanmasını sağlar. Örneğin:

th, td {
  text-align: center;
}

Bu kod, tablo başlık hücreleri (<th>) ve veri hücreleri (<td>) içindeki içeriğin ortalanmasını sağlar.

Dikey Hizalama

Tablo içeriğinin dikey hizalaması vertical-align özelliği ile ayarlanır. Bu özellik, içeriklerin üst, alt veya ortada hizalanmasını sağlar. Örneğin:

th, td {
  vertical-align: middle;
}

Bu kod, tablo başlık hücreleri (<th>) ve veri hücreleri (<td>) içindeki içeriğin dikey olarak ortalanmasını sağlar.

Tablo Stili

Tablo içerisindeki hücrelerin sınırı ile içerik arasındaki boşluğu kontrol etmek için padding özelliği kullanılır. Bu özellik, hücrelerdeki içerik ile hücre sınırları arasındaki boşluğu ayarlamak için kullanılır. Örneğin:

th, td {
  padding: 10px;
}

Bu kod, tablo başlık hücreleri (<th>) ve veri hücreleri (<td>) için 10 piksel dolgu uygular.

CSS ile Tabloların Oluşturulması

Tablolar, web sayfalarında verileri düzenli ve anlaşılır bir şekilde sunmak için kullanılır. HTML ve CSS kullanarak tabloları oluşturmak ve stilize etmek mümkündür. Bu bölümde, adım adım bir tablo oluşturmayı ve CSS ile stil vermeyi öğreneceksiniz.

1. HTML ile Tablonun Yapılandırılması

İlk olarak, HTML kullanarak temel bir tablo oluşturacağız. İşte örnek bir tablo yapısı:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tablo Örneği</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Başlık 1</th>
                <th>Başlık 2</th>
                <th>Başlık 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Veri 1</td>
                <td>Veri 2</td>
                <td>Veri 3</td>
            </tr>
            <tr>
                <td>Veri 4</td>
                <td>Veri 5</td>
                <td>Veri 6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Bu HTML kodu, bir tablo (<table>) içerir ve başlık (<thead>) ve veri satırlarını (<tbody>) tanımlar. <th> elemanları tablo başlıklarını, <td> elemanları ise tablo verilerini temsil eder.

2. CSS ile Tabloya Stil Verme

Tablonun görünümünü güzelleştirmek ve daha kullanışlı hale getirmek için CSS kullanacağız. İşte tabloya uygulanacak bazı temel CSS stilleri:

/* styles.css dosyasında yer alacak */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

table elementi için width: 100%; özelliği tabloyu konteynerinin tamamına yayar.
border-collapse: collapse; özelliği, hücre sınırlarının birleşmesini sağlar ve daha kompakt bir görünüm oluşturur.
th, td seçicileri ile tablo başlıkları ve veri hücreleri için sınır (border), dolgu (padding), ve hizalama (text-align) ayarlanır.
th elementi için arka plan rengi (background-color) ayarlanarak başlık hücreleri vurgulanır.
tbody tr:nth-child(even) seçici ile çift satırlara arka plan rengi verilerek satırların daha kolay ayırt edilmesi sağlanır.

3. Tamamlanmış Örnek

Aşağıda, HTML ve CSS bir arada kullanılarak oluşturulmuş tamamlanmış bir tablo örneği bulunmaktadır:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tablo Örneği</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Başlık 1</th>
                <th>Başlık 2</th>
                <th>Başlık 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Veri 1</td>
                <td>Veri 2</td>
                <td>Veri 3</td>
            </tr>
            <tr>
                <td>Veri 4</td>
                <td>Veri 5</td>
                <td>Veri 6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Bu örnek, basit ve okunabilir bir tablo oluşturmak için gerekli adımları göstermektedir. Tabloyu ihtiyaçlarınıza göre daha fazla stil ve işlevsellik ekleyerek geliştirebilirsiniz.

Özet

Bu eğitimde, CSS kullanarak tabloların nasıl stilize edileceğini öğrendik. Tablo sınırlarını belirlemek için border özelliğini, tablo boyutlarını ayarlamak için width ve height özelliklerini, içeriğin yatay hizalaması için text-align ve dikey hizalaması için vertical-align özelliklerini ve hücreler arası boşluğu kontrol etmek için padding özelliğini inceledik. Bu temel bilgiler, CSS ile tablolarınızı daha çekici ve işlevsel hale getirmenize yardımcı olacaktır.

CSS Variables

CSS değişkenleri, diğer adıyla CSS özel özellikleri, stil sayfalarınızı daha sürdürülebilir ve esnek hale getirmenin güçlü bir yoludur. Bu özellikler, CSS içinde değerleri saklamanızı ve bu değerleri yeniden kullanmanızı sağlar, böylece tek bir değeri değiştirerek tüm örnekleri güncellemek kolaylaşır. Bu eğitimde, CSS değişkenlerinin nasıl kullanılacağına dair kapsamlı bir inceleme yapılacak ve örnek kodlarla desteklenecektir.

Adım 1: CSS Değişkeni Tanımlama

İlk olarak, özel özelliğinizi tanımlamanız gerekecektir. Bu genellikle belgenizin en üst seviyesini temsil eden :root seçicisi içinde yapılır. Bu, değişkeni küresel olarak kullanılabilir hale getirir.

Örneğin:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}

Bu örnekte, --primary-color , --secondary-color ve --font-size adında üç değişken tanımlanmıştır. Bu değişkenler, tüm CSS dosyası boyunca kullanılabilir.

Adım 2: CSS Değişkeni Kullanma

Bir CSS değişkenini kullanmak için var() fonksiyonunu kullanmanız gerekecektir. İşte tanımladığımız değişkenlerin nasıl kullanılacağına dair bir örnek:

body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: var(--font-size);
}

Bu kodda, body elementinin arka plan rengi --primary-color değişkeninden, metin rengi --secondary-color değişkeninden ve yazı tipi boyutu --font-size değişkeninden alınmaktadır.

Adım 3: Varsayılan Değerler

CSS değişkenleri için varsayılan değerler de tanımlanabilir. Bu, değişkenin tanımlanmadığı durumlarda bir yedek değerin kullanılmasını sağlar. Bu özellik, CSS'in daha esnek ve dayanıklı olmasını sağlar.

Örneğin:

body {
    color: var(--main-color, black);
}

Bu kodda, --main-color değişkeni tanımlanmamışsa, metin rengi siyah ( black ) olacaktır.

CSS Değişkenlerinin Avantajları

Bakım Kolaylığı : Tek bir merkezi konumdan değişiklik yaparak tüm stil sayfasını güncellemek kolaylaşır.
Kod Tekrarının Azaltılması : Değişkenler, aynı değeri birden çok yerde kullanmayı sağlar, bu da kod tekrarını azaltır.
Temalar ve Özelleştirmeler : CSS değişkenleri, temaların ve kullanıcı tercihlerine göre özelleştirmelerin kolayca uygulanmasını sağlar.

Sonuç

CSS değişkenleri, stil sayfalarınızı daha sürdürülebilir, esnek ve yönetilebilir hale getirir. Bu eğitimde, CSS değişkenlerinin tanımlanması, kullanılması ve dinamik olarak güncellenmesi üzerinde durulmuştur. Bu özellikleri kullanarak, daha temiz ve verimli CSS kodları yazabilirsiniz.

Bu eğitim, CSS değişkenlerinin temel ve ileri düzey kullanımlarını kapsayan kapsamlı bir rehber sunmayı amaçlamaktadır. Sorularınız veya ek açıklamalarınız için lütfen iletişime geçin.

CSS Function

Bu eğitimde, CSS fonksiyonlarının tanımları, kullanımları ve örnekleri detaylı bir şekilde ele alınacaktır.

CSS Fonksiyonlarına Giriş

CSS fonksiyonları, çeşitli CSS özellikleri için değer olarak kullanılır. Bu fonksiyonlar, stil ve düzenlemelerde dinamik ve esnek çözümler sunar. Bu eğitimde, var(), linear-gradient() ve radial-gradient() fonksiyonlarına odaklanacağız.

var() Fonksiyonu

Tanım: var() fonksiyonu, CSS değişkenlerini kullanarak değerlerin yeniden kullanılmasını sağlar. Bu, stil sayfalarının daha yönetilebilir ve sürdürülebilir olmasını sağlar.

Kullanım:

:root {
    --primary-color: #3498db;
}

body {
    color: var(--primary-color);
}

Yukarıdaki örnekte, --primary-color değişkeni tanımlanmış ve bu değişkenin değeri var() fonksiyonu kullanılarak color özelliğine atanmıştır.

linear-gradient() Fonksiyonu

Tanım: linear-gradient() fonksiyonu, iki veya daha fazla renk arasında doğrusal bir geçiş oluşturur.

Kullanım:

background: linear-gradient(to right, red, yellow);

Bu örnekte, linear-gradient() fonksiyonu kırmızıdan sarıya doğru bir geçiş oluşturur.

radial-gradient() Fonksiyonu

Tanım: radial-gradient() fonksiyonu, bir merkezden dışa doğru radyal geçişler oluşturur.

Kullanım:

background: radial-gradient(circle, red, yellow);

Bu örnekte, radial-gradient() fonksiyonu kırmızıdan sarıya doğru radyal bir geçiş oluşturur.

Detaylı İnceleme ve Kritik

var() Fonksiyonu:

Avantajları: CSS değişkenlerinin kullanımı, stil sayfalarının okunabilirliğini artırır ve tekrar eden değerlerin merkezi bir yerden yönetilmesini sağlar.
Dezavantajları: Eski tarayıcılarda desteklenmeyebilir, bu nedenle tarayıcı uyumluluğu dikkate alınmalıdır.

linear-gradient() Fonksiyonu:

Avantajları: Arka plan geçişleri oluşturmak için etkili bir yoldur ve farklı yönlerde geçişler oluşturulabilir.
Dezavantajları: Karmaşık geçişler için zorlayıcı olabilir ve performans sorunlarına neden olabilir.

radial-gradient() Fonksiyonu:

Avantajları: Radyal geçişler, görsel olarak çekici arka planlar oluşturmak için kullanılır.
Dezavantajları: Performans sorunlarına yol açabilir ve karmaşık tasarımlarda zorlayıcı olabilir.

Sonuç

Bu eğitimde, CSS fonksiyonlarının tanımları, kullanımları ve örnekleri üzerinde durulmuştur. CSS fonksiyonları, modern web tasarımında dinamik ve esnek çözümler sunarak, stil sayfalarının daha yönetilebilir ve sürdürülebilir olmasını sağlar. Her bir fonksiyonun avantajları ve dezavantajları ele alınarak, doğru ve etkili bir şekilde kullanılmaları sağlanmıştır.

CSS Box Sizing

CSS'de kutu boyutlandırma ( box-sizing ) özelliği, öğelerin genişlik ve yüksekliğini hesaplarken dolgu ( padding ) ve kenarlıkların ( border ) dahil edilip edilmediğini belirlememize olanak tanır. Bu özellik, tasarım sürecinde daha öngörülebilir ve tutarlı sonuçlar elde etmemize yardımcı olur.

Temel Kullanım

box-sizing özelliğinin iki ana değeri vardır:

content-box : Bu varsayılan değerdir. Öğenin genişlik ve yüksekliği yalnızca içerik alanını kapsar. Dolgu ve kenarlıklar bu değerlere dahil edilmez.
border-box : Öğenin genişlik ve yüksekliği içerik, dolgu ve kenarlıkların tamamını kapsar.

Örnekler

content-box (Varsayılan Değer)

.element {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: content-box;
}

Yukarıdaki örnekte, .element sınıfına sahip öğenin toplam genişliği 300px (içerik) + 40px (dolgu) + 20px (kenarlık) = 360px, toplam yüksekliği ise 200px (içerik) + 40px (dolgu) + 20px (kenarlık) = 260px olacaktır.

border-box

.element {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
    box-sizing: border-box;
}

Bu örnekte, .element sınıfına sahip öğenin toplam genişliği ve yüksekliği 300px ve 200px olarak kalır çünkü dolgu ve kenarlık bu değerlere dahildir.

Neden Kullanmalıyız?

box-sizing: border-box; kullanmanın ana avantajı, öğelerin toplam boyutlarını hesaplamayı ve kontrol etmeyi daha kolay hale getirmesidir. Bu, özellikle karmaşık düzenler oluştururken önemlidir. Modern tarayıcıların çoğu bu özelliği destekler ve CSS reset dosyalarında yaygın olarak kullanılır.

CSS Reset Örneği

Birçok CSS reset dosyası, tüm öğelerde box-sizing özelliğini border-box olarak ayarlayarak başlar. Bu, tüm öğelerin aynı kutu boyutlandırma modelini kullanmasını sağlar ve tarayıcılar arası tutarlılığı artırır.

/* CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

Bu kod, tüm öğeler ve onların ::before ve ::after pseudo-elementleri için box-sizing değerini border-box olarak ayarlar.

Sonuç

CSS'de box-sizing özelliği, öğelerin toplam boyutlarını daha öngörülebilir ve yönetilebilir hale getirir. border-box değeri, özellikle karmaşık düzenler oluştururken ve farklı tarayıcılar arasında tutarlılığı sağlamak için çok yararlıdır. Bu özelliği doğru kullanarak, daha esnek ve bakım kolaylığı yüksek tasarımlar oluşturabilirsiniz.

CSS `initial` and `inherit`

Giriş

Bu bölümde, CSS'deki initial ve inherit anahtar kelimelerinin kullanımını ayrıntılı bir şekilde ele alacağız. initial ve inherit anahtar kelimeleri, CSS'de stil özelliklerinin belirlenmesinde önemli bir rol oynar ve doğru kullanıldıklarında kodun bakımını ve okunabilirliğini artırabilirler. Bu anahtar kelimelerin her birini tanımlayacak, kullanım örnekleri sunacak ve olası yanlış anlamaları gidereceğiz.

`initial` Anahtar Kelimesi

initial anahtar kelimesi, bir CSS özelliğini varsayılan değerine ayarlamak için kullanılır. CSS özelliklerinin varsayılan değerleri, genellikle tarayıcıların belirlediği başlangıç değerleridir ve bu değerler, HTML belgelerinin tarayıcıda nasıl görüneceğini belirler.

Tanım

property: initial;

Örnek Kullanım

p {
    color: blue;
}

.reset {
    color: initial;
}

Yukarıdaki örnekte, p etiketine mavi renk atanmışken, .reset sınıfına sahip elemanlar bu rengi sıfırlayarak varsayılan değeri kullanır.

Kritik Değerlendirme

initial anahtar kelimesi, özelliklerin başlangıç değerlerine dönmesini sağlar, ancak her tarayıcıda bu başlangıç değerleri aynı olmayabilir. Bu nedenle, initial kullanırken tarayıcı uyumluluğunu göz önünde bulundurmak önemlidir.

`inherit` Anahtar Kelimesi

inherit anahtar kelimesi, bir CSS özelliğinin değerinin, ebeveyn elemandan miras alınacağını belirtir. Bu, özellikle stil tutarlılığını sağlamak için kullanışlıdır.

Tanım

property: inherit;

Örnek Kullanım

div {
    color: green;
}

p {
    color: inherit;
}

Bu örnekte, p etiketleri, içinde bulundukları div etiketinin rengini miras alır ve yeşil olur.

Kritik Değerlendirme

inherit kullanımı, stil özelliklerinin ebeveyn elemanlardan miras alınmasını garanti eder, ancak bu miras alma işlemi her zaman beklenen sonucu vermeyebilir. Özellikle karmaşık stil hiyerarşilerinde, miras alınan değerlerin izlenmesi zor olabilir.

`initial` ve `inherit` Anahtar Kelimelerinin Karşılaştırılması

Özellik	`initial`	`inherit`
Tanım	Varsayılan değeri kullanır	Ebeveyn elemandan değeri miras alır
Kullanım	Özelliği sıfırlamak için	Stil tutarlılığını sağlamak için
Avantajlar	Basit ve hızlı bir sıfırlama sağlar	Stil özelliklerinde tutarlılık sağlar
Dezavantajlar	Tarayıcı uyumluluğu sorunları olabilir	Karmaşık stil hiyerarşilerinde izlenmesi zor olabilir

Sonuç

CSS'deki initial ve inherit anahtar kelimeleri, stil özelliklerini yönetmede güçlü araçlardır. initial anahtar kelimesi, özellikleri varsayılan değerlerine sıfırlarken, inherit anahtar kelimesi, stil özelliklerinin ebeveyn elemandan miras alınmasını sağlar. Bu anahtar kelimelerin doğru kullanımı, web sayfalarının stil yönetimini basitleştirir ve daha sürdürülebilir hale getirir.

Doğru ve etkili bir CSS yazımı, bu anahtar kelimelerin işlevlerinin ve kullanım alanlarının iyi anlaşılmasını gerektirir. Böylece, kodun bakımını kolaylaştırabilir ve tarayıcılar arası uyumluluğu artırabilirsiniz.

CSS Object-Fit Property

Giriş

CSS object-fit özelliği, bir <img> veya <video> elemanının konteynerine nasıl sığdırılacağını belirlemek için kullanılır. Bu özellik, görsellerin ve videoların yeniden boyutlandırılması sırasında içeriğin nasıl kesileceği veya genişletileceği konusunda kontrol sağlar.

Temel Kullanım

object-fit özelliği, aşağıdaki değerleri alabilir:

fill: Varsayılan değerdir. İçeriği konteynere sığdırır ve gerektiğinde bozulmasına izin verir.
contain: İçeriği konteynere sığdırır, ancak içeriğin en boy oranını korur.
cover: Konteyneri tamamen doldurur, ancak içeriğin en boy oranını korur.
none: İçeriğin boyutunu korur, ancak konteynerin boyutuna uymaz.
scale-down: İçeriği ya none ya da contain gibi ölçeklendirir, hangisi daha küçükse onu kullanır.

Örnekler

`fill` Değeri

Bu değer, içeriği konteynere sığdırır ve gerektiğinde içeriğin bozulmasına izin verir.

<img src="example.jpg" style="object-fit: fill; width: 300px; height: 200px;">

`contain` Değeri

Bu değer, içeriğin en boy oranını koruyarak konteynere sığdırır.

<img src="example.jpg" style="object-fit: contain; width: 300px; height: 200px;">

`cover` Değeri

Bu değer, içeriğin en boy oranını koruyarak konteyneri tamamen doldurur.

<img src="example.jpg" style="object-fit: cover; width: 300px; height: 200px;">

`none` Değeri

Bu değer, içeriğin boyutunu korur ve konteynerin boyutuna uymaz.

<img src="example.jpg" style="object-fit: none; width: 300px; height: 200px;">

`scale-down` Değeri

Bu değer, içeriği ya none ya da contain gibi ölçeklendirir, hangisi daha küçükse onu kullanır.

<img src="example.jpg" style="object-fit: scale-down; width: 300px; height: 200px;">

`object-position` Özelliği

object-position özelliği, object-fit özelliği ile birlikte kullanılarak, bir <img> veya <video> elemanının kendi içeriği içinde x/y koordinatları ile nasıl konumlandırılacağını belirler.

Örnek Kullanım

<img src="example.jpg" style="object-fit: cover; object-position: top right; width: 300px; height: 200px;">

Yukarıdaki örnekte, görsel cover değeri ile konteyneri tamamen dolduracak şekilde ölçeklendirilmiştir ve içeriğin sağ üst köşesinde konumlandırılmıştır.

Sonuç

CSS object-fit ve object-position özellikleri, görsellerin ve videoların bir web sayfasında nasıl gösterileceğini kontrol etmek için güçlü araçlardır. Bu özellikler, içeriğin kullanıcı deneyimini iyileştirecek şekilde esnek ve duyarlı olmasını sağlar. Bu nedenle, modern web geliştirme süreçlerinde bu özelliklerin doğru ve etkin kullanımı büyük önem taşır.

CSS Pseudo-Class

CSS pseudo-sınıfları, bir HTML elemanının belirli bir durumunu tanımlamak için kullanılan güçlü bir araçtır. Bu sınıflar, kullanıcı etkileşimlerine veya belgenin yapısal durumlarına dayanarak elemanların stilini dinamik olarak değiştirmemizi sağlar. Bu derste, CSS pseudo-sınıflarının detaylarına inilecek, uygulama örnekleri ve kullanımları ele alınacaktır.

Tanım ve Kullanım

Pseudo-sınıflar, belirli durumlar için elemanları seçmek amacıyla kullanılır. Örneğin:

Bir kullanıcı bir elemanın üzerine geldiğinde (hover)
Ziyaret edilen ve ziyaret edilmeyen bağlantıların farklı şekilde stillendirilmesi
Bir eleman odaklandığında (focus) stillendirme

Temel Sözdizimi

Pseudo-sınıfların sözdizimi şu şekildedir:

selector:pseudo-class {
    property: value;
}

Bağlantı Pseudo-sınıfları

Bağlantılar için yaygın olarak kullanılan pseudo-sınıflar şunlardır:

:link - Ziyaret edilmemiş bağlantılar için
:visited - Ziyaret edilmiş bağlantılar için
:hover - Üzerine gelindiğinde
:active - Aktif durumda

Örnek:

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;
}

a:active {
    color: yellow;
}

Yapısal Pseudo-sınıflar

Yapısal pseudo-sınıflar, belgenin yapısına dayalı olarak elemanları seçer. Bazı yaygın yapısal pseudo-sınıflar şunlardır:

:first-child - Ebeveyninin ilk çocuğu olan elemanı seçer
:last-child - Ebeveyninin son çocuğu olan elemanı seçer
:nth-child(n) - Ebeveyninin n. çocuğu olan elemanı seçer
:nth-last-child(n) - Ebeveyninin sonundan itibaren n. çocuğu olan elemanı seçer
:only-child - Ebeveyninin tek çocuğu olan elemanı seçer

Örnek:

p:first-child {
    color: red;
}

p:last-child {
    color: blue;
}

p:nth-child(2) {
    color: green;
}

Dinamik Pseudo-sınıflar

Dinamik pseudo-sınıflar, kullanıcı etkileşimlerine yanıt verir. Bu sınıflar, özellikle kullanıcı deneyimini geliştirmek için önemlidir.

:hover

Bir elemanın üzerine gelindiğinde uygulanır.

button:hover {
    background-color: lightblue;
}

:focus

Bir eleman odaklandığında uygulanır. Form elemanlarında sıkça kullanılır.

input:focus {
    border-color: blue;
}

Form Elemanları için Pseudo-sınıflar

Form elemanlarının belirli durumları için pseudo-sınıflar kullanılabilir:

:enabled - Aktif olan form elemanları için
:disabled - Devre dışı olan form elemanları için
:checked - Seçili olan onay kutuları ve radyo butonları için

Örnek:

input:enabled {
    background-color: white;
}

input:disabled {
    background-color: gray;
}

input:checked {
    background-color: blue;
}

Özet

CSS pseudo-sınıfları, elemanların belirli durumlarına göre dinamik stillendirme yapmamızı sağlar. Bu, kullanıcı etkileşimlerine yanıt veren ve daha esnek tasarımlar oluşturmanıza olanak tanır. Pseudo-sınıfları doğru ve etkin kullanarak, kullanıcı deneyimini büyük ölçüde artırabilir ve web sayfalarınızı daha çekici hale getirebilirsiniz. Bu detaylı incelemede ele alınan pseudo-sınıflar, modern web tasarımında sıklıkla kullanılan ve her web geliştiricisinin bilmesi gereken temel araçlardır. Daha ileri seviyede stillendirme ve etkileşim için bu sınıfları nasıl kullanabileceğinizi deneyerek öğrenmek, yeteneklerinizi geliştirecektir.

CSS Pseudo-Element

CSS Pseudo-Elementler, belirli bir öğenin belirli kısımlarını stilize etmek için kullanılan önemli araçlardır. Bu rehber, CSS Pseudo-Elementlerin tanımını, işlevlerini ve kullanım örneklerini detaylı ve bilimsel bir yaklaşımla ele alacaktır.

CSS Pseudo-Element Nedir?

CSS Pseudo-Elementler, bir HTML öğesinin belirli kısımlarını hedeflemek ve stilize etmek için kullanılan özel seçicilerdir. Bu seçiciler, öğenin tamamını değil, sadece belirli bir bölümünü etkiler. Pseudo-Elementler genellikle çift iki nokta üst üste (::) ile belirtilir ve belirli içerik bölümlerine stil uygulamak için kullanılır.

Önemli Pseudo-Elementler

::first-letter Pseudo-Elementi

::first-letter pseudo-elementi, bir blok seviyesinde öğenin ilk harfini stilize etmek için kullanılır. Genellikle, paragrafın ilk harfini büyük ve dikkat çekici bir şekilde göstermek için kullanılır.

Örnek:

p::first-letter {
    font-size: 200%;
    font-weight: bold;
    color: #333;
}

Bu kod parçası, tüm <p> etiketlerinin ilk harfini büyük, kalın ve koyu gri renkte gösterecektir.

::before Pseudo-Elementi

::before pseudo-elementi, bir öğenin içeriğinden önce içerik eklemek için kullanılır. Bu, genellikle dekoratif veya bilgilendirici içerikler eklemek için kullanılır.

Örnek:

.content::before {
    content: "Not: ";
    font-weight: bold;
    color: red;
}

Bu kod, .content sınıfına sahip her öğenin önüne "Not: " metnini ekleyecektir.

::after Pseudo-Elementi

::after pseudo-elementi, bir öğenin içeriğinden sonra içerik eklemek için kullanılır. Bu da dekoratif veya ek açıklamalar için kullanılabilir.

Örnek:

.content::after {
    content: " - Son";
    font-weight: bold;
    color: blue;
}

Bu kod, .content sınıfına sahip her öğenin sonuna " - Son" metnini ekleyecektir.

::selection Pseudo-Elementi

::selection pseudo-elementi, kullanıcı tarafından seçilen (highlighted) öğe bölümünü stilize etmek için kullanılır. Bu, metin seçildiğinde farklı bir arka plan veya metin rengi uygulamak için kullanışlıdır.

Örnek:

::selection {
    background: yellow;
    color: black;
}

Bu kod, seçilen metnin arka planını sarı, metin rengini ise siyah yapacaktır.

Pseudo-Element Kullanımının Doğru ve Yanlış Yöntemleri

Pseudo-Elementlerin kullanımı, HTML yapısını değiştirmeden estetik ve fonksiyonel iyileştirmeler yapmanın etkili bir yoludur. Ancak, bazı önemli noktalara dikkat edilmelidir:

Yanlış Kullanım:
- Pseudo-Elementler, HTML yapısının yerini almak için kullanılmamalıdır. İçerik eklemek veya düzenlemek için kullanıldığında, ekran okuyucular gibi yardımcı teknolojilerin doğru çalışmasını engelleyebilir.
Doğru Kullanım:
- Pseudo-Elementler, dekoratif veya yardımcı içerikler eklemek için idealdir. Ancak, bu içeriklerin anlamlı ve erişilebilir olması sağlanmalıdır.

Sonuç

CSS Pseudo-Elementler, web tasarımında esneklik ve yaratıcı çözümler sunar. ::first-letter , ::before , ::after ve ::selection gibi temel pseudo-elementleri doğru kullanarak, kullanıcı deneyimini zenginleştirebilir ve estetik açıdan hoş web sayfaları oluşturabilirsiniz. Bu rehberde verilen örnekler ve açıklamalar, bu güçlü araçları etkin bir şekilde kullanmanıza yardımcı olacaktır.

CSS Display Property

CSS display property, bir elementin nasıl görüntüleneceğini belirler. Bu kılavuzda, bu önemli özelliğin farklı değerlerini detaylı bir şekilde inceleyeceğiz.

Display Değerleri ve Özellikleri

display: inline

Bu değer, bir elementi satır içi (inline) element olarak görüntüler. Örneğin <span> etiketi gibi. Bu durumda, yükseklik ve genişlik özellikleri etkisiz kalacaktır.

Örnek:

span {
    display: inline;
}

<span>Bu bir satır içi elemandır.</span>

display: inline-block

Bu değer, bir elementi satır içi blok (inline-level block) konteyneri olarak görüntüler. Element, satır içi bir element gibi formatlanır, ancak yükseklik ve genişlik değerleri uygulanabilir.

Örnek:

div {
    display: inline-block;
    width: 100px;
    height: 50px;
}

<div>Bu bir inline-block elemandır.</div>

display: block

Bu değer, bir elementi blok elementi (block element) olarak görüntüler. Örneğin <p> etiketi gibi. Bu durumda, yeni bir satırda başlar ve tüm genişliği kaplar.

Örnek:

p {
    display: block;
}

<p>Bu bir blok elemandır.</p>

display: none

Bu değer, elementi tamamen kaldırır. Elementin görsel olarak hiçbir varlığı olmaz ve sayfa düzenini etkilemez.

Örnek:

div {
    display: none;
}

<div>Bu eleman görünmeyecek.</div>

visibility: hidden

Bu özellik, bir elementi gizler. Ancak, element hala aynı alanı kaplar ve sayfa düzenini etkilemeye devam eder.

Örnek:

div {
    visibility: hidden;
}

<div>Bu eleman gizlenmiş, ancak hala yer kaplamaktadır.</div>

İleri Seviye Display Değerleri

display: flex

Flexbox modelini etkinleştirir ve esnek konteyner (flex container) oluşturur. Flex konteyner içindeki çocuk elemanlar, esnek (flexible) kutular olarak düzenlenir.

Örnek:

div {
    display: flex;
}

<div>
    <div>Çocuk 1</div>
    <div>Çocuk 2</div>
    <div>Çocuk 3</div>
</div>

display: grid

CSS Grid Layout modelini etkinleştirir ve grid konteyner oluşturur. Grid konteyner içindeki çocuk elemanlar, grid öğeleri olarak düzenlenir.

Örnek:

div {
    display: grid;
    grid-template-columns: auto auto;
}

<div>
    <div>Öğe 1</div>
    <div>Öğe 2</div>
    <div>Öğe 3</div>
    <div>Öğe 4</div>
</div>

display: table

Elementi tablo (table) gibi görüntüler. Tablo düzeninde (table layout) bir element oluşturur.

Örnek:

div {
    display: table;
}

<div>
   <div>Satır 1</div>
   <div>Satır 2</div>
</div>

Kritik Analiz

Belirtilen display değerleri, bir web sayfasının düzenini ve stilini kontrol etmek için çok önemlidir. Ancak, "visibility: hidden" özelliğinin display özellikleri arasında yer almaması gerektiği not edilmelidir. Bu özellik, bir elementin görünürlüğünü kontrol eder ve display: none ile karıştırılmamalıdır.

Özet

inline : Elementi satır içi element yapar. Yükseklik ve genişlik uygulanamaz.
inline-block : Satır içi blok elementi. Yükseklik ve genişlik uygulanabilir.
block : Blok element. Yeni satırda başlar ve tüm genişliği kaplar.
none : Elementi tamamen kaldırır. Sayfa düzenini etkilemez.
visibility: hidden : Elementi gizler, ancak hala yer kaplar ve sayfa düzenini etkiler.
flex : Esnek kutu düzeni oluşturur.
grid : Grid düzeni oluşturur.
table : Tablo düzeni oluşturur.

CSS display property, elementlerin düzenini ve yerleşimini kontrol etmek için kritik bir özelliktir. Bu değerler, web sayfası tasarımının esnekliğini ve kullanıcı deneyimini önemli ölçüde artırabilir. Bu nedenle, bu özelliklerin doğru ve etkili bir şekilde kullanılması, profesyonel web geliştirme pratiğinin temelidir.

CSS Position Property

CSS (Cascading Style Sheets) konumlandırma özelliği, HTML belgelerinde elemanların konumlandırılma yöntemini belirler. Konumlandırma, bir web sayfasının düzenini ve kullanıcı etkileşimini önemli ölçüde etkiler. CSS, konumlandırma için beş farklı değer sunar: static , relative , fixed , absolute , ve sticky .

1. `position: static`

position: static; değeri, bir elemanın özel bir şekilde konumlandırılmadığını belirtir. Bu eleman, sayfanın normal akışına göre yerleştirilir. static konumlandırma varsayılan değerdir ve elemanlar bu şekilde herhangi bir özel pozisyonlama olmaksızın sayfa akışında sıralanır.

.element {
    position: static;
}

Bu durumda eleman, sayfadaki diğer içeriklerle birlikte doğal düzeninde yer alır ve üst, sağ, alt, sol gibi pozisyonlama özellikleri etkisizdir.

2. `position: relative`

position: relative; değeri, bir elemanın normal pozisyonuna göre yerleştirildiğini belirtir. Eleman, doğal konumundan göreceli olarak yer değiştirebilir. Bu, pozisyon özelliklerinin (top, right, bottom, left) elemanın başlangıç pozisyonuna göre ayarlandığı anlamına gelir.

.element {
    position: relative;
    top: 10px;
    left: 20px;
}

Bu örnekte eleman, normal konumundan 10 piksel aşağı ve 20 piksel sağa hareket ettirilir. Diğer elemanlar, elemanın orijinal yerleşimine göre yerleştirilir.

3. `position: fixed`

position: fixed; değeri, bir elemanın görünüm alanına (viewport) göre sabitlendiğini belirtir. Bu eleman, sayfa kaydırıldığında bile yerinde kalır. Sabit pozisyonlama, üst, sağ, alt ve sol özellikleri ile kontrol edilir.

.element {
    position: fixed;
    top: 0;
    right: 0;
}

Bu örnekte eleman, görünüm alanının sağ üst köşesine sabitlenir. Sayfa kaydırıldığında bile eleman bu konumda kalır.

4. `position: absolute`

position: absolute; değeri, bir elemanın en yakın konumlandırılmış ataya (ancestor) göre yerleştirildiğini belirtir. Bu, elemanın görünüm alanına göre değil, en yakın relative , absolute , fixed , veya sticky konumlandırılmış ataya göre pozisyonlandığı anlamına gelir.

.container {
    position: relative;
}

.element {
    position: absolute;
    top: 50px;
    left: 100px;
}

Bu örnekte .element , .container elemanına göre 50 piksel aşağı ve 100 piksel sağa konumlandırılır. .container elemanı relative olarak konumlandırılmıştır, bu yüzden .element bu konteynere göre yerleştirilir.

5. `position: sticky`

position: sticky; değeri, bir elemanın kullanıcı kaydırma pozisyonuna göre yerleştirildiğini belirtir. Bu eleman, belirli bir eşiğe ulaştığında relative ile fixed pozisyonlaması arasında geçiş yapar.

.element {
    position: sticky;
    top: 0;
}

Bu örnekte eleman, kaydırma sırasında görünüm alanının üst kısmına yapışır. Eleman, belirlenen eşiğe (top: 0) ulaştığında sabitlenir ve sayfa kaydırıldıkça yerinde kalır.

Sonuç

CSS konumlandırma özellikleri, web sayfalarının düzenini ve kullanıcı deneyimini şekillendirmek için güçlü araçlar sunar. Her pozisyonlama türünün kendine özgü kullanımları ve etkileri vardır. Doğru kullanıldığında, bu özellikler web sayfalarının daha dinamik ve kullanıcı dostu hale gelmesine yardımcı olabilir. Elemanların doğru bir şekilde konumlandırılması, web geliştirme sürecinde kritik bir adımdır ve her geliştiricinin bu konumlandırma türlerini ve nasıl çalıştıklarını derinlemesine anlaması gerekmektedir.

CSS Tooltip, web geliştirmede kullanıcı deneyimini artırmak için sıkça kullanılan bir tekniktir. Bu öğretici, CSS kullanarak ipuçları (tooltip) oluşturmanın temel ve ileri düzey yöntemlerini ele alacaktır. İçerik, ciddi ve bilimsel bir dille sunulacak ve herhangi bir yanlış veya eksik bilgi kritik bir şekilde ele alınacaktır.

Tooltip, kullanıcının fare imlecini bir öğenin üzerine getirdiğinde ek bilgi sağlamak için kullanılan küçük bir bilgi kutusudur. Bu bilgiler, kullanıcının daha iyi anlamasını ve etkileşimini sağlamak amacıyla kullanılır.

Tooltip oluşturmanın en basit yolu, HTML ve CSS kullanmaktır. Temel bir tooltip oluşturmak için aşağıdaki adımları izleyebilirsiniz:

HTML Yapısı

Öncelikle, HTML öğesi üzerinde bir tooltip oluşturmak için gerekli yapıyı kurmamız gerekir:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tooltip</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="tooltip">Hover over me
        <span class="tooltiptext">Tooltip text</span>
    </div>
</body>

</html>

CSS Stilleri

Tooltip'in görünümünü ve konumunu ayarlamak için CSS kullanılır:

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    /* Tooltip'in yukarıda konumlanmasını sağlar */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Tooltiplerin daha ileri seviye kullanımını ele alırken, daha fazla stil ve animasyon ekleyerek kullanıcı deneyimini artırabiliriz. Aşağıda, ileri düzey bir tooltip için bazı CSS teknikleri yer almaktadır.

CSS Animasyonları

Tooltip'in daha dikkat çekici olması için animasyon ekleyebiliriz:

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -70px;
    opacity: 0;
    transition: opacity 0.6s, transform 0.6s;
    transform: translateY(-10px);
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

Farklı Konumlandırmalar

Tooltipleri farklı konumlarda göstermek için CSS'te position özelliklerini değiştirebiliriz:

/* Sağda konumlanan tooltip */
.tooltip-right .tooltiptext {
    bottom: auto;
    top: 50%;
    left: 125%;
    margin-left: 0;
    margin-top: -30px;
}

/* Altta konumlanan tooltip */
.tooltip-bottom .tooltiptext {
    top: 125%;
    bottom: auto;
    left: 50%;
    margin-left: -60px;
}

/* Solda konumlanan tooltip */
.tooltip-left .tooltiptext {
    top: 50%;
    bottom: auto;
    right: 125%;
    left: auto;
    margin-top: -30px;
}

Erişilebilirlik

Tooltiplerin erişilebilirlik açısından uygun olması önemlidir. Aşağıdaki yöntemlerle erişilebilirliği artırabilirsiniz:

Aria Etiketleri : Tooltip öğelerine aria-label ve aria-describedby gibi etiketler ekleyerek ekran okuyucuların bu bilgileri doğru şekilde iletmesini sağlayabilirsiniz.
Odaklanabilirlik : Tooltip içeriğinin sadece fare ile değil, klavye ile de erişilebilir olması için tabindex kullanabilirsiniz.

<div class="tooltip" tabindex="0" aria-label="Tooltip text">Focus on me
    <span class="tooltiptext" id="tooltip1">Tooltip text</span>
</div>

Sonuç

CSS kullanarak tooltip oluşturmak, web sayfalarında kullanıcı deneyimini önemli ölçüde artırabilir. Temel ve ileri düzey teknikler kullanarak çeşitli stillerde ve konumlarda tooltipler oluşturabilirsiniz. Ayrıca, erişilebilirlik standartlarına uygun tooltipler oluşturarak tüm kullanıcıların bu bilgilerden faydalanmasını sağlayabilirsiniz.

CSS Pagination

Bir web siteniz çok sayıda sayfaya sahipse, her sayfaya bir çeşit sayfa numaralandırma (pagination) eklemek isteyebilirsiniz. Sayfa numaralandırma, kullanıcıların içeriği daha kolay gezinebilmesi için gereklidir ve kullanıcı deneyimini büyük ölçüde artırabilir. Bu eğitimde, CSS kullanarak nasıl etkili bir sayfa numaralandırma oluşturabileceğinizi öğreneceksiniz.

1. Sayfa Numaralandırma Nedir?

Sayfa numaralandırma, uzun içeriği daha yönetilebilir parçalara bölmek için kullanılır. Örneğin, bir blogda birden fazla makale olduğunda, kullanıcıların sayfalar arasında gezinmesine olanak tanır. Genellikle, sayfa numaraları, ileri ve geri oklar veya "ilk" ve "son" gibi bağlantılar içerir.

2. HTML Yapısı

Öncelikle, temel bir HTML yapısı oluşturmalıyız. Sayfa numaralandırma için genellikle bir liste öğesi kullanılır:

<div class="pagination">
    <a href="#">&laquo;</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">&raquo;</a>
</div>

Bu yapıda, « ve » karakterleri sırasıyla geri ve ileri gitme simgelerini temsil eder.

3. CSS İle Stil Verme

Şimdi, bu HTML yapısını CSS ile nasıl stillendirebileceğimize bakalım:

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
}

Bu CSS kodu, sayfa numaralandırma bağlantılarını yatay olarak hizalar ve fareyle üzerine gelindiğinde veya aktif olduğunda farklı stiller uygular. transition özelliği, arka plan renginin yumuşak bir şekilde değişmesini sağlar.

4. Örnek Uygulama

Aşağıda, yukarıdaki HTML ve CSS kodlarını birleştirerek oluşturulmuş tam bir örnek bulunmaktadır:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
}
</style>
</head>
<body>

<h2>CSS Sayfa Numaralandırma Örneği</h2>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

5. İleri Düzey Özelleştirmeler

Sayfa numaralandırmayı daha da özelleştirmek için aşağıdaki gibi ek CSS özelliklerini kullanabilirsiniz:

Responsive Tasarım : Farklı cihazlar için uygun hale getirmek için medya sorguları kullanabilirsiniz.
Daha Fazla Stil Seçenekleri : Farklı arka plan renkleri, kenar boşlukları ve kenarlıklar ekleyebilirsiniz.
JavaScript Entegrasyonu : Daha dinamik bir deneyim için sayfa numaralandırmayı JavaScript ile entegre edebilirsiniz.

Örnek olarak, responsive tasarım için medya sorgusu ekleyelim:

@media screen and (max-width: 600px) {
    .pagination a {
        padding: 8px 12px;
        font-size: 12px;
    }
}

Bu medya sorgusu, ekran genişliği 600 pikselden küçük olduğunda sayfa numaralandırma bağlantılarının boyutunu ayarlar.

Sonuç

CSS ile sayfa numaralandırma oluşturmak, kullanıcı deneyimini artırmak için oldukça etkili bir yöntemdir. Bu eğitimde, temel HTML yapısını ve CSS stillerini öğrendiniz. Kendi projelerinizde bu bilgileri kullanarak daha etkili ve kullanıcı dostu web sayfaları oluşturabilirsiniz. Bu eğitimde ele alınan konular, CSS'nin gücünü ve esnekliğini vurgulamakta olup, modern web geliştirme süreçlerinde sıkça karşılaşılan gereksinimlere yanıt vermektedir.

CSS Z-index Property

CSS'nin z-index özelliği, bir HTML belgesindeki elemanların yığılma sırasını belirlemeye yarar. Bu özellik, özellikle üst üste binen elemanların görsel hiyerarşisini kontrol etmek için kullanılır. Bu rehberde, z-index özelliğinin detaylarını, kullanımını ve dikkat edilmesi gereken noktaları ele alacağız.

Z-index Özelliğinin Tanımı

Z-index özelliği, bir elemanın diğer elemanlara göre hangi seviyede (üstte mi altta mı) görüneceğini belirler. Bu özellik, sadece pozisyonlanmış elemanlar için (position: relative, position: absolute, position: fixed veya position: sticky) geçerlidir. Varsayılan olarak, bir elemanın z-index değeri otomatik olarak "0"dır.

Örnek Kullanım:

<div style="position: absolute; z-index: 1;">Birinci Eleman</div>
<div style="position: absolute; z-index: 2;">İkinci Eleman</div>

Yukarıdaki örnekte, "İkinci Eleman" birinci elemanın üstünde yer alacaktır çünkü z-index değeri daha yüksektir.

Z-index Değerleri ve Anlamları

Z-index değeri, pozitif veya negatif bir tamsayı olabilir. Değer ne kadar yüksekse, eleman o kadar üstte yer alır. Negatif değerler ise elemanın daha alt seviyede görünmesini sağlar.

Örnek:

<div style="position: absolute; z-index: -1;">Arka Plan Elemanı</div>
<div style="position: absolute; z-index: 1;">Ön Plan Elemanı</div>

Bu örnekte, "Arka Plan Elemanı" ön plan elemanının arkasında kalacaktır.

Z-index ve Yığılma Bağlamı (Stacking Context)

Z-index özelliklerinin doğru anlaşılması için yığılma bağlamı kavramını bilmek önemlidir. Her HTML belgesi, kök yığılma bağlamı (root stacking context) adı verilen bir ana yığılma bağlamı ile başlar. Belirli CSS özelliklerinin kullanımı (örneğin, opacity, transform, filter) yeni yığılma bağlamları oluşturabilir. Bir yığılma bağlamı içinde, elemanlar z-index değerlerine göre sıralanır ve bu bağlamın dışındaki yığılma bağlamlarına etkileri olmaz.

Örnek:

<div style="position: relative; z-index: 10;">
    <div style="position: absolute; z-index: 1;">Yığılma Bağlamı İçinde</div>
</div>
<div style="position: relative; z-index: 5;">Başka Bir Yığılma Bağlamı</div>

Bu örnekte, içteki "Yığılma Bağlamı İçinde" elemanı, dıştaki yığılma bağlamına göre sıralanmaz, sadece kendi bağlamında z-index 1 olarak değerlendirilir.

Yanlış Anlaşılmalara Karşı Dikkat Edilmesi Gerekenler

Pozisyonlanmış Elemanlar: Z-index sadece position özelliği relative, absolute, fixed veya sticky olan elemanlar için geçerlidir. Diğer pozisyonlama değerlerine sahip elemanlarda z-index çalışmaz.
Yığılma Bağlamlarının Önemi: Yeni yığılma bağlamları oluşturmak, z-index sıralamasını etkileyebilir. Örneğin, bir eleman transform özelliği ile stilize edilirse, bu eleman yeni bir yığılma bağlamı oluşturur.
Negatif Z-index Değerleri: Negatif z-index değerleri, elemanın diğer elemanların arkasında yer almasını sağlar, ancak bu eleman yine de kök yığılma bağlamının üstünde kalır.

Z-index Kullanımıyla İlgili Örnekler

Örnek 1: Basit Yığılma

<style>
    .box1 {
        position: absolute;
        z-index: 2;
        width: 100px;
        height: 100px;
        background: red;
    }

    .box2 {
        position: absolute;
        z-index: 1;
        width: 100px;
        height: 100px;
        background: blue;
        top: 50px;
        left: 50px;
    }
</style>
<div class="box1"></div>
<div class="box2"></div>

Bu örnekte, kırmızı kutu mavi kutunun üstünde yer alır çünkü z-index değeri daha yüksektir. Örnek 2: Yığılma Bağlamı Oluşturma

<style>
    .parent {
        position: relative;
        z-index: 1;
    }

    .child {
        position: absolute;
        z-index: 2;
        width: 100px;
        height: 100px;
        background: green;
    }

    .sibling {
        position: relative;
        z-index: 3;
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>
<div class="sibling"></div>

Bu örnekte, sarı kutu (sibling) yeşil kutunun (child) üstünde yer alır çünkü sarı kutu farklı bir yığılma bağlamında daha yüksek bir z-index değerine sahiptir.

Sonuç

Z-index özelliği, elemanların yığılma sırasını kontrol etmek için güçlü bir araçtır, ancak doğru kullanılmadığında karmaşık sorunlara yol açabilir. Z-index kullanırken pozisyonlama, yığılma bağlamları ve CSS özelliklerinin etkileşimlerini dikkate almak önemlidir. Bu rehberde, z-index özelliğinin temel kavramlarını ve pratik kullanım örneklerini ele aldık. Z-index özelliğinin gücünü tam anlamıyla kullanmak için bu prensipleri doğru anlamak ve uygulamak gereklidir.

CSS Float and Clear

CSS Float Özelliği

CSS float özelliği, bir elementin nasıl konumlandırılacağını belirler. Bu özellik, elementin bir yanda yüzmesini sağlarken diğer içeriğin çevresinde akmasını sağlar. Genellikle, görseller ve metinler gibi içerikleri düzenlemek için kullanılır.

float özelliği şu değerleri alabilir:

left: Elementi sol tarafa yerleştirir ve diğer içerik sağ tarafında akar.
right: Elementi sağ tarafa yerleştirir ve diğer içerik sol tarafında akar.
none: Varsayılan değerdir, elementin yüzmesini engeller.
inherit: Üst elementin float değerini miras alır.

Örnek: float left

.image {
    float: left;
    margin: 10px;
}

Bu örnekte, .image sınıfına sahip elementin sol tarafa yüzmesini sağlarken, etrafındaki diğer içerik sağ tarafta akar.

CSS Clear Özelliği

CSS clear özelliği, bir elementin yanındaki yüzen elementlerle nasıl etkileşime gireceğini belirtir. Bu özellik, özellikle düzen ve hizalama sorunlarını çözmek için kullanılır.

clear özelliği şu değerleri alabilir:

none: Varsayılan değerdir, yüzen elementlerin etkisini yok sayar.
left: Sol taraftaki yüzen elementlerin etkisini kaldırır.
right: Sağ taraftaki yüzen elementlerin etkisini kaldırır.
both: Her iki taraftaki yüzen elementlerin etkisini kaldırır.
inherit: Üst elementin clear değerini miras alır.

Örnek: clear both

.clearfix {
    clear: both;
}

Bu örnekte, .clearfix sınıfına sahip element, her iki taraftaki yüzen elementlerin etkisini kaldırır.

float özelliği, hiperlinklerin listesini kullanarak yatay bir menü oluşturmak için de kullanılabilir. Bu, özellikle navigasyon menülerinde yaygın bir uygulamadır.

Örnek: Yatay Menü

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

.menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu li {
    float: left;
}

.menu li a {
    display: block;
    padding: 10px;
    text-decoration: none;
}

Bu örnekte, .menu sınıfına sahip ul elementi içindeki li elementleri sol tarafa yüzdürülerek yatay bir menü oluşturulur. Menü elemanları, a etiketleriyle stilize edilmiştir.

Kritik Değerlendirme

float ve clear özellikleri, CSS'in temel taşlarından biri olarak kabul edilir. Ancak, modern web geliştirme pratiklerinde flexbox ve grid düzenleri gibi daha güçlü ve esnek araçlar ön plana çıkmıştır. float ve clear özellikleri, belirli durumlarda hala kullanışlı olabilir ancak karmaşık düzenler için flexbox ve grid daha iyi bir seçim olabilir. Bu nedenle, yeni projelerde mümkün olduğunca bu modern yöntemleri tercih etmek daha iyi sonuçlar verebilir.

Sonuç

CSS float ve clear özellikleri, içeriklerin konumlandırılması ve düzenlenmesinde önemli araçlardır. Ancak, modern CSS teknikleri ve özellikleri ile bu araçların kullanımı, daha esnek ve güçlü düzen yöntemleri ile desteklenmelidir. Web geliştiricilerin, bu özellikleri bilmesi ve gerektiğinde kullanabilmesi önemlidir ancak yeni projelerde modern yöntemleri benimsemeleri daha etkili olacaktır.

CSS 2D Transform

CSS 2D dönüşümler, web geliştirme sürecinde önemli bir rol oynar. Bu dönüşümler, öğelerin hareket etmesini, dönmesini, ölçeklenmesini ve eğilmesini sağlar. Bu dökümanda, CSS 2D dönüşümleri ve bu dönüşümlerin nasıl kullanılacağı üzerinde duracağız. Her metodun nasıl çalıştığını ve doğru kullanımını ele alacağız.

CSS 2D Dönüşüm Metodları

CSS transform özelliği ile aşağıdaki 2D dönüşüm metodlarını kullanabilirsiniz:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

translate() Metodu

translate() metodu, bir öğeyi X ve Y eksenlerinde belirtilen parametrelere göre mevcut konumundan hareket ettirir.

Örnek:

div {
  transform: translate(50px, 100px);
}

Bu örnek, div öğesini X ekseninde 50 piksel, Y ekseninde ise 100 piksel hareket ettirir.

rotate() Metodu

rotate() metodu, bir öğeyi saat yönünde veya saat yönünün tersinde belirtilen dereceye göre döndürür.

Örnek:

div {
  transform: rotate(45deg);
}

Bu örnek, div öğesini saat yönünde 45 derece döndürür.

scale() Metodu

scale() metodu, bir öğenin boyutunu genişlik ve yükseklik parametrelerine göre arttırır veya azaltır.

Örnek:

div {
  transform: scale(2, 3);
}

Bu örnek, div öğesinin genişliğini iki katına, yüksekliğini ise üç katına çıkarır.

scaleX() Metodu

scaleX() metodu, bir öğenin genişliğini arttırır veya azaltır.

Örnek:

div {
  transform: scaleX(1.5);
}

Bu örnek, div öğesinin genişliğini 1.5 katına çıkarır.

scaleY() Metodu

scaleY() metodu, bir öğenin yüksekliğini arttırır veya azaltır.

Örnek:

div {
  transform: scaleY(0.5);
}

Bu örnek, div öğesinin yüksekliğini yarıya indirir.

skewX() Metodu

skewX() metodu, bir öğeyi X ekseninde belirtilen açı kadar eğer.

Örnek:

div {
  transform: skewX(30deg);
}

Bu örnek, div öğesini X ekseninde 30 derece eğer.

skewY() Metodu

skewY() metodu, bir öğeyi Y ekseninde belirtilen açı kadar eğer.

Örnek:

div {
  transform: skewY(20deg);
}

Bu örnek, div öğesini Y ekseninde 20 derece eğer.

matrix() Metodu

matrix() metodu, tüm 2D dönüşüm metodlarını tek bir matris içinde birleştirir. Bu metot, öğeleri döndürmek, ölçeklendirmek, taşımak ve eğmek için matematiksel fonksiyonlar içeren altı parametre alır.

Örnek:

div {
  transform: matrix(1, 0.5, -0.5, 1, 30, 30);
}

Bu örnek, div öğesini matris parametrelerine göre dönüşümler uygular.

Sonuç

CSS 2D dönüşümler, web sayfalarındaki öğeleri dinamik olarak değiştirmenize olanak tanır. Bu dönüşümleri doğru ve etkin bir şekilde kullanarak kullanıcı deneyimini artırabilirsiniz. Yukarıda belirtilen her metodun doğru kullanımı, web geliştirme sürecinizde önemli bir avantaj sağlar. Her metodun işlevini ve nasıl kullanıldığını anlamak, CSS dönüşümlerini uygularken karşılaşabileceğiniz zorlukların üstesinden gelmenize yardımcı olacaktır.

CSS 3D Transform

CSS, iki boyutlu dönüşümlerin yanı sıra üç boyutlu dönüşümleri de destekler. Bu yazıda, CSS'nin 3D dönüşümlerini detaylı bir şekilde ele alacağız. Bu dönüşümler, web sayfalarına dinamik ve etkileşimli özellikler kazandırmak için kullanılabilir.

CSS 3D Dönüşüm Yöntemleri

CSS transform özelliği ile aşağıdaki 3D dönüşüm yöntemlerini kullanabilirsiniz:

rotateX()
rotateY()
rotateZ()

rotateX() Yöntemi

rotateX() yöntemi, bir elementi X ekseni etrafında belirli bir dereceyle döndürür.

Örnek Kullanım:

.element {
    transform: rotateX(45deg);
}

Bu örnekte, .element sınıfına sahip bir eleman, X ekseni etrafında 45 derece döndürülür. X ekseni, yatay bir çizgiyi temsil eder ve dönüşüm, bu eksen etrafında gerçekleşir.

rotateY() Yöntemi

rotateY() yöntemi, bir elementi Y ekseni etrafında belirli bir dereceyle döndürür.

Örnek Kullanım:

.element {
    transform: rotateY(45deg);
}

Bu örnekte, .element sınıfına sahip bir eleman, Y ekseni etrafında 45 derece döndürülür. Y ekseni, dikey bir çizgiyi temsil eder ve dönüşüm, bu eksen etrafında gerçekleşir.

rotateZ() Yöntemi

rotateZ() yöntemi, bir elementi Z ekseni etrafında belirli bir dereceyle döndürür.

Örnek Kullanım:

.element {
    transform: rotateZ(45deg);
}

Bu örnekte, .element sınıfına sahip bir eleman, Z ekseni etrafında 45 derece döndürülür. Z ekseni, derinliği temsil eder ve dönüşüm, bu eksen etrafında gerçekleşir.

3D Dönüşümleri Uygulama

3D dönüşümler, web tasarımında etkileyici ve dinamik görseller oluşturmak için kullanılır. Bu dönüşümleri etkili bir şekilde uygulamak için aşağıdaki adımları izleyebilirsiniz:

Dönüşüm Kökenini Belirleyin: transform-origin özelliği ile dönüşümün merkez noktasını belirleyin.
```
.element {
    transform-origin: center;
}
```
Perspektif Ayarlayın: perspective özelliği ile 3D dönüşümler için bir perspektif tanımlayın.
```
.container {
    perspective: 1000px;
}
```
Birden Fazla Dönüşüm Uygulayın: Birden fazla dönüşüm yöntemini bir arada kullanarak karmaşık hareketler oluşturun.
```
.element {
    transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
}
```

Eleştirisel Değerlendirme

CSS 3D dönüşümler, görsel efektler ve animasyonlar yaratmak için güçlü araçlardır. Ancak, bu dönüşümlerin performans üzerinde etkili olabileceği unutulmamalıdır. Özellikle karmaşık ve büyük ölçekli 3D dönüşümler, düşük performanslı cihazlarda yavaşlamalara neden olabilir. Bu nedenle, dönüşümleri kullanırken performans optimizasyonlarına dikkat edilmelidir.

Ayrıca, tarayıcı uyumluluğu göz önünde bulundurulmalıdır. Her ne kadar modern tarayıcılar 3D dönüşümleri desteklese de, eski tarayıcılarda aynı desteğin bulunmayabileceği göz ardı edilmemelidir.

Sonuç

CSS 3D dönüşümler, web tasarımında derinlik ve hareket hissi yaratmak için etkili araçlardır. rotateX(), rotateY() ve rotateZ() yöntemleri ile elementlerinizi üç boyutlu olarak döndürebilir ve web sayfalarınıza dinamik bir görünüm kazandırabilirsiniz. Bu dönüşümleri dikkatli ve optimize bir şekilde kullanarak, hem estetik hem de performans açısından başarılı web sayfaları oluşturabilirsiniz.

CSS Transitions

CSS geçişleri, belirli bir süre boyunca CSS özellik değerlerini yumuşak bir şekilde değiştirmeyi sağlar. Bu eğitimde aşağıdaki konuları öğreneceğiz:

transition-property
transition-duration
transition-delay
transition-timing-function
transition

transition-property

transition-property özelliği, geçiş efektinin hangi CSS özelliği için geçerli olduğunu belirtir. Belirtilen CSS özelliği değiştiğinde geçiş efekti başlar.

.example {
  transition-property: background-color;
}

Bu örnekte, background-color özelliği değiştiğinde geçiş efekti uygulanacaktır.

transition-duration

transition-duration özelliği, bir geçiş efektinin tamamlanmasının ne kadar süreceğini belirtir. Süre saniye (s) veya milisaniye (ms) cinsinden tanımlanır.

.example {
  transition-duration: 2s;
}

Bu örnekte, geçiş efekti 2 saniye sürecektir.

transition-delay

transition-delay özelliği, geçiş efektinin ne zaman başlayacağını belirtir. Değer saniye (s) veya milisaniye (ms) cinsinden tanımlanır.

.example {
  transition-delay: 1s;
}

Bu örnekte, geçiş efekti 1 saniye gecikmeyle başlayacaktır.

transition-timing-function

transition-timing-function özelliği, geçiş efektinin hız eğrisini belirtir. Bu, geçiş efektinin nasıl bir hızla ilerleyeceğini tanımlar.

.example {
  transition-timing-function: ease-in-out;
}

Bu örnekte, geçiş efekti yavaş başlayacak, hızlanacak ve sonra tekrar yavaşlayacaktır.

transition

transition özelliği, aşağıdaki dört özelliğin kısayoludur:

transition-property
transition-duration
transition-timing-function
transition-delay

.example {
  transition: background-color 2s ease-in-out 1s;
}

Bu örnekte, background-color özelliği 1 saniye gecikme ile başlayacak, 2 saniye sürecek ve ease-in-out hız eğrisi ile geçiş yapacaktır.

Sonuç

CSS geçişleri, web sayfalarındaki animasyonları ve etkileşimleri daha pürüzsüz ve kullanıcı dostu hale getirmek için güçlü araçlardır. Geçiş özelliklerini dikkatlice kullanarak, kullanıcı deneyimini artırabilir ve web sayfanıza dinamik bir görünüm kazandırabilirsiniz.

Bu eğitimin sonunda, CSS geçişlerinin temel özelliklerini ve nasıl kullanılacaklarını öğrendiniz. Daha ayrıntılı bilgi ve örnekler için ilgili kaynaklara başvurabilirsiniz.

Responsive

Giriş

Duyarlı web tasarımı (responsive web design), web sayfanızın tüm cihazlarda iyi görünmesini sağlayan bir tekniktir. Bu teknik, yalnızca HTML ve CSS kullanılarak uygulanır ve herhangi bir program veya JavaScript içermez. Duyarlı web tasarımı, masaüstü bilgisayarlar, tabletler ve telefonlar gibi çeşitli cihazlarda web sayfalarının görüntülenebilmesini sağlar. Web sayfanızın cihaz ne olursa olsun iyi görünmesi ve kolay kullanılabilir olması gereklidir.

Temel Kavramlar ve İlkeler

Duyarlı Web Tasarımının Tanımı

Duyarlı web tasarımı, web sayfalarının farklı ekran boyutlarına ve yönelimlerine uyum sağlamasını sağlayan bir yaklaşımdır. Bu yaklaşım, web sayfalarının kullanıcının cihazına ve tarayıcı penceresine dinamik olarak uyum sağlayarak optimal bir kullanıcı deneyimi sunmasını hedefler.

HTML ve CSS Kullanımı

Duyarlı web tasarımı, yalnızca HTML ve CSS kullanılarak gerçekleştirilir. Bu, web sayfasının yapısal bileşenlerinin HTML ile tanımlanması ve stil özelliklerinin CSS ile uygulanması anlamına gelir. JavaScript gibi diğer teknolojiler bu süreçte kullanılmaz.

Duyarlı Tasarım Teknikleri

Esnek Izgaralar (Flexible Grids)

Esnek ızgaralar, duyarlı tasarımın temelini oluşturur. Bu ızgaralar, yüzde tabanlı genişlikler kullanarak farklı ekran boyutlarına uyum sağlar. Örneğin:

.container {
  width: 100%;
}

.column {
  float: left;
  width: 50%;
}

Bu örnekte, .container sınıfı genişliğini %100 olarak ayarlar, böylece her ekran boyutuna uyum sağlar. .column sınıfı ise genişliğini %50 olarak ayarlayarak iki sütunun yan yana durmasını sağlar.

Esnek Görseller (Flexible Images)

Esnek görseller, görüntülerin farklı ekran boyutlarına uyum sağlamasını sağlar. Bu, genellikle görsellerin maksimum genişliğinin %100 olarak ayarlanmasıyla gerçekleştirilir:

img {
  max-width: 100%;
  height: auto;
}

Bu stil kuralı, görsellerin kapsayıcı öğelerinin genişliğini aşmamasını ve orantılı olarak yeniden boyutlandırılmasını sağlar.

Medya Sorguları (Media Queries)

Medya sorguları, belirli koşullar altında farklı stil kuralları uygulamak için kullanılır. Bu koşullar, genellikle ekran boyutu, çözünürlük veya yönelimi içerir. Medya sorguları ile farklı cihazlarda farklı düzenler uygulanabilir:

@media (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Bu örnekte, ekran genişliği 600 pikselden az olduğunda .column sınıfının genişliği %100 olarak ayarlanır, böylece sütunlar dikey olarak yerleşir.

Örnek Uygulama

Aşağıda basit bir duyarlı web sayfası örneği verilmiştir:

HTML Kodu

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Duyarlı Web Tasarımı Örneği</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>Duyarlı Web Tasarımı</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Ana Sayfa</a></li>
        <li><a href="#">Hakkında</a></li>
        <li><a href="#">İletişim</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <h2>Başlık</h2>
        <p>Bu bir örnek paragraftır. Duyarlı web tasarımı ile ilgili içerik burada yer alacak.</p>
      </section>
      <aside>
        <h2>Kenar Çubuğu</h2>
        <p>Bu bir kenar çubuğu içeriğidir.</p>
      </aside>
    </main>
    <footer>
      <p>&copy; 2024 Duyarlı Web Tasarımı</p>
    </footer>
  </div>
</body>
</html>

CSS Kodu

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
}

.container {
  width: 100%;
  margin: 0 auto;
}

header, nav, main, footer {
  padding: 20px;
}

header {
  background-color: #333;
  color: #fff;
  text-align: center;
}

nav ul {
  list-style: none;
  text-align: center;
}

nav ul li {
  display: inline;
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

main {
  display: flex;
  flex-wrap: wrap;
}

section {
  flex: 1;
  padding: 20px;
}

aside {
  flex: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

@media (max-width: 600px) {
  main {
    flex-direction: column;
  }
}

Sonuç

Duyarlı web tasarımı, web sayfalarının farklı cihazlarda ve ekran boyutlarında iyi görünmesini ve işlevsel olmasını sağlayan önemli bir tekniktir. Esnek ızgaralar, esnek görseller ve medya sorguları gibi teknikler kullanılarak bu hedefe ulaşılabilir. Bu eğitimde, duyarlı web tasarımının temel kavramları ve uygulama yöntemleri ayrıntılı olarak ele alınmıştır.

The Viewport

Görünüm Alanı (Viewport)

Görünüm alanı, kullanıcının bir web sayfasında görebildiği alanı ifade eder. Görünüm alanı cihazla birlikte değişiklik gösterir ve mobil telefonda, bilgisayara göre daha küçük olur.

Mobil Görünümü Kontrol Etme

HTML5 ile birlikte, web tasarımcılarının görünüm alanını kontrol edebilmesini sağlayan bir yöntem tanıtılmıştır. Bu yöntem, <meta> etiketi kullanılarak gerçekleştirilir. <meta> etiketi, tarayıcıya sayfanın boyutlarını ve ölçeklendirmesini nasıl kontrol edeceği konusunda talimatlar verir.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Parametreler:

width=device-width: Bu kısım, sayfanın genişliğini cihazın ekran genişliğine göre ayarlar. Cihazın türüne göre genişlik değişecektir.
initial-scale=1.0: Bu kısım, sayfa ilk yüklendiğinde başlangıçta yapılacak olan yakınlaştırma seviyesini ayarlar.

Teknik Detaylar ve Öneriler

Görünüm alanını doğru bir şekilde ayarlamak, duyarlı (responsive) web tasarımı için kritik öneme sahiptir. Bu, farklı cihazlarda kullanıcı deneyimini optimize eder ve erişilebilirliği artırır. Aşağıda görünüm alanı ayarlarının bazı teknik detayları ve öneriler verilmiştir:

1. Görünüm Alanı Ölçeklendirmesi

Görünüm alanı ölçeklendirmesi, sayfanın kullanıcı tarafından nasıl görüntüleneceğini belirler. Aşağıdaki parametreler bu ölçeklendirmeyi kontrol eder:

maximum-scale: Kullanıcının yapabileceği en fazla yakınlaştırma seviyesini ayarlar.
minimum-scale: Kullanıcının yapabileceği en az yakınlaştırma seviyesini ayarlar.
user-scalable: Kullanıcının sayfayı yakınlaştırıp uzaklaştıramayacağını belirler. "yes" veya "no" değeri alır.

Örnek Kullanım:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Bu örnekte, sayfa genişliği cihaz genişliğine göre ayarlanır, başlangıç ölçeği 1.0 olarak belirlenir, maksimum ölçek 1.0 olarak sabitlenir ve kullanıcıya yakınlaştırma izni verilmez.

2. Duyarlı Tasarım Uygulamaları

Duyarlı tasarım uygulamalarında görünüm alanı ayarlarının doğru yapılması önemlidir. Aşağıdaki öneriler bu konuda yardımcı olabilir:

Media Queries: Farklı cihaz boyutlarına göre CSS stillerini uyarlamak için kullanılır. Örneğin:
```
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
```
Bu örnekte, ekran genişliği 600 pikselden küçük olan cihazlar için arka plan rengi açık mavi olarak ayarlanır.
Flexbox ve Grid Layouts: Esnek ve dinamik yerleşim düzenleri oluşturmak için kullanılır. Bu düzenler, farklı ekran boyutlarına uyum sağlar ve içeriğin düzgün bir şekilde yerleşmesini sağlar.
Responsive Images: Görüntülerin farklı cihaz boyutlarına uyum sağlaması için kullanılır. HTML'de srcset ve sizes öznitelikleri ile uygulanabilir.

Örnek:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 480px, 800px">

Bu örnekte, tarayıcı ekran genişliğine göre en uygun görüntü boyutunu seçer.

Sonuç

Görünüm alanı ayarları, modern web tasarımında hayati bir rol oynar. Kullanıcı deneyimini optimize etmek ve erişilebilirliği artırmak için bu ayarların doğru bir şekilde yapılandırılması gerekmektedir. Bu rehber, görünüm alanı ayarlarının temel ilkelerini ve uygulanabilir yöntemlerini kapsamlı bir şekilde ele almıştır. Doğru uygulamalar ve teknik detaylar sayesinde, web sayfalarının tüm cihazlarda tutarlı ve kullanıcı dostu bir şekilde görüntülenmesi sağlanabilir.

Media Queries

Giriş

CSS3 ile tanıtılan medya sorguları, belirli bir koşul doğru olduğunda bir dizi CSS özelliğini içeren bir blok eklemek için kullanılan bir tekniktir. Bu teknik, modern web geliştirme ve özellikle duyarlı web tasarımı (responsive web design) için kritik öneme sahiptir.

Medya sorguları, ekran genişliği, çözünürlük, cihaz yönelimi gibi özelliklere göre farklı stiller uygulamaya olanak tanır. Bu doküman, medya sorgularının temel kavramlarını, kullanım alanlarını ve en iyi uygulama örneklerini detaylandırarak, konuyu bilimsel bir yaklaşımla ele alacaktır.

Kavram ve Kullanım

Medya sorguları, @media kuralı ile kullanılır. Bu kural, belirli bir koşul sağlandığında uygulanacak CSS özelliklerini tanımlar. Aşağıda bir medya sorgusunun temel yapısı gösterilmektedir:

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Yukarıdaki örnekte, ekran genişliği 600 pikselden küçük olduğunda body elementi için arka plan rengi lightblue olarak ayarlanacaktır.

Kavram

Medya sorguları, CSS kodlarını belirli medya türlerine ve koşullarına göre uygulamayı sağlar. Örneğin, sadece ekranlar için geçerli olan stilleri tanımlayabilir veya belirli bir çözünürlüğün altındaki ekranlar için farklı düzenlemeler yapabilirsiniz.

Örnek:

@media only screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media only screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}

Bu örnekte, .container sınıfına sahip elemanların genişliği, ekran genişliğine bağlı olarak değişmektedir. Ekran genişliği 768 piksel veya daha büyükse, genişlik 750 piksel olarak ayarlanırken, daha küçük ekranlarda yüzde olarak ayarlanır.

Duyarlı Web Tasarımı - Görseller ve Videolar

Görseller ve videoların duyarlı hale getirilmesi, medya sorgularının yaygın kullanım alanlarından biridir. Bu bölümde, görsel ve videoların genişlik ve yükseklik özelliklerini kullanarak nasıl duyarlı hale getirilebileceğini inceleyeceğiz.

Genişlik Özelliğini Kullanma

Eğer genişlik özelliği bir yüzde olarak ayarlanır ve yükseklik otomatik olarak ayarlanırsa, görsel duyarlı hale gelir ve ölçeklenir.

img {
    width: 50%;
    height: auto;
}

Maksimum Genişlik Özelliğini Kullanma

Maksimum genişlik özelliği %100 olarak ayarlandığında, görsel gerekli olduğunda küçülür ancak orijinal boyutundan daha büyük olmaz.

img {
    max-width: 100%;
    height: auto;
}

Medya Sorgularının Avantajları

Medya sorgularının kullanılması, kullanıcı deneyimini iyileştirir ve farklı cihazlar arasında tutarlılık sağlar. Duyarlı tasarım, kullanıcıların mobil cihazlar, tabletler ve masaüstü bilgisayarlar gibi farklı cihazlarda web sitelerini rahatça görüntülemelerini sağlar.

Sonuç

Medya sorguları, modern web geliştirme için vazgeçilmez bir araçtır. Duyarlı web tasarımı oluşturmak, kullanıcı deneyimini iyileştirir ve web sitelerinin erişilebilirliğini artırır. Bu dokümanda, medya sorgularının temel kavramlarını ve uygulamalarını ele aldık. Doğru ve etkili kullanım, web projelerinizin başarısını artıracaktır.

Bu bilgiler, CSS medya sorguları konusunda kapsamlı bir anlayış sağlar ve bu alanda uzmanlaşmak isteyen geliştiricilere rehberlik eder.

CSS Selector

İçerik

Bu bölümde, CSS Gelişmiş Seçiciler konusunu detaylı ve bilimsel bir yaklaşımla inceleyeceğiz. Ele alınacak konular şunlardır:

Element Seçici
ID Seçici
Class Seçici
Pseudo Sınıf
Pseudo Element
Özellik (Attribute) Seçici
Evrensel Seçici
Birleştirici (Combinator) Seçici

Element Seçici

Tanım: Element seçici, HTML elemanlarını element isimlerine göre seçer. Örneğin, <p> elementi için p seçicisi kullanılır.

Örnek Kullanım:

p {
    color: blue;
}

Bu örnekte, tüm <p> elementlerinin metin rengi mavi olarak ayarlanır.

ID Seçici

Tanım: ID seçici, sayfa içinde benzersiz olan bir ID'ye sahip elementi seçmek için kullanılır. ID seçicisi bir # karakteri ile başlar ve ardından elementin ID'si gelir.

Örnek Kullanım:

#uniqueElement {
    color: red;
}

Bu örnekte, ID'si uniqueElement olan elementin metin rengi kırmızı olarak ayarlanır.

Class Seçici

Tanım: Class seçici, belirli bir sınıf (class) özniteliğine sahip HTML elemanlarını seçer. Class seçicisi bir . karakteri ile başlar ve ardından sınıf adı gelir.

Örnek Kullanım:

.exampleClass {
    font-size: 20px;
}

Bu örnekte, exampleClass sınıfına sahip tüm elementlerin yazı boyutu 20 piksel olarak ayarlanır.

Pseudo Sınıf

Tanım: Pseudo sınıf, bir elementin özel bir durumunu tanımlamak için kullanılır. Örneğin, bir kullanıcı fareyi elementin üzerine getirdiğinde veya bir link ziyaret edildiğinde stil uygulamak için kullanılır.

Örnek Kullanım:

a:hover {
    color: green;
}

Bu örnekte, bir bağlantı üzerine fare getirildiğinde, metin rengi yeşil olur.

Pseudo Element

Tanım: Pseudo element, bir elementin belirli bölümlerini stil vermek için kullanılır. Örneğin, bir elementin ilk harfini veya ilk satırını stil vermek için kullanılır.

Örnek Kullanım:

p::first-line {
    font-weight: bold;
}

Bu örnekte, tüm <p> elementlerinin ilk satırı kalın yazı tipinde olur.

Özellik (Attribute) Seçici

Tanım: Attribute seçici, belirli bir özniteliğe sahip elementleri seçmek için kullanılır.

Örnek Kullanım:

input[type="text"] {
    background-color: yellow;
}

Bu örnekte, type özniteliği text olan tüm <input> elementlerinin arka plan rengi sarı olur.

Evrensel Seçici

Tanım: Evrensel seçici, tüm elementleri seçer. Evrensel seçici * karakteri ile temsil edilir.

Örnek Kullanım:

* {
    margin: 0;
    padding: 0;
}

Bu örnekte, tüm elementlerin margin ve padding değerleri sıfırlanır.

Birleştirici (Combinator) Seçici

Tanım: Birleştirici seçici, seçiciler arasındaki ilişkiyi açıklar. CSS'de dört farklı birleştirici vardır:

Descendant (Alt Eleman) Seçici (Boşluk)
Child (Çocuk) Seçici (>)
Adjacent Sibling (Bitişik Kardeş) Seçici (+)
General Sibling (Genel Kardeş) Seçici (~)

Descendant (Alt Eleman) Seçici

Tanım: Belirtilen elementin alt elemanlarını seçer.

Örnek Kullanım:

div p {
    color: blue;
}

Bu örnekte, <div> elementinin altındaki tüm <p> elementlerinin metin rengi mavi olur.

Child (Çocuk) Seçici (>)

Tanım: Belirtilen elementin doğrudan çocuklarını seçer.

Örnek Kullanım:

div > p {
    color: blue;
}

Bu örnekte, <div> elementinin doğrudan çocukları olan <p> elementlerinin metin rengi mavi olur.

Adjacent Sibling (Bitişik Kardeş) Seçici (+)

Tanım: Belirli bir elementin hemen ardından gelen belirli bir elementi seçer.

Örnek Kullanım:

h1 + p {
    margin-top: 0;
}

Bu örnekte, bir <h1> elementinden hemen sonra gelen <p> elementinin üst kenar boşluğu sıfırlanır.

General Sibling (Genel Kardeş) Seçici (~)

Tanım: Belirtilen elementin tüm kardeşlerini seçer.

Örnek Kullanım:

h1 ~ p {
    color: red;
}

Bu örnekte, <h1> elementinin tüm kardeşleri olan <p> elementlerinin metin rengi kırmızı olur.

Bu derste, CSS'in gelişmiş seçicileri detaylı ve bilimsel bir yaklaşımla ele alınmıştır. Bu bilgilerin CSS'de daha karmaşık ve esnek stiller oluşturmanıza yardımcı olması umulmaktadır.

CSS Specifiy

CSS özgüllük, web sayfasındaki bir elemente uygulanacak stil kurallarının belirlenmesinde önemli bir rol oynar. Birden fazla CSS kuralının aynı elemente işaret ettiği durumlarda, en yüksek özgüllük değerine sahip olan seçici "kazanır" ve stil beyanı bu HTML elementine uygulanır. Bu yazıda, CSS özgüllük kavramını detaylı bir şekilde ele alacağız ve özgüllüğün nasıl hesaplandığını açıklayacağız.

Özgüllük Seviyelerini Tanımlayan Kategoriler

CSS seçicilerinin özgüllük seviyelerini dört ana kategoriye ayırabiliriz:

Satır İçi Stiller (Inline Styles): Örnek: <h1 style="color: pink;">
ID Seçicileri: Örnek: #navbar
Sınıflar, Pseudo-sınıflar, Özellik Seçicileri: Örnek: .test, :hover, [href]
Elementler ve Pseudo-elementler: Örnek: h1, :before

Not:

Bu kurala bir istisna vardır: !important kuralı kullanıldığında, satır içi stilleri bile geçersiz kılacaktır.

Özgüllük Nasıl Hesaplanır?

Özgüllüğü hesaplamak için belirli bir yöntem kullanılır. Bu yöntemi ezberlemek, CSS kodunuzun beklediğiniz gibi çalışmasını sağlamak için önemlidir. Özgüllük hesaplaması şu şekilde yapılır:

Başlangıç değeri olarak 0 alınır.
Her bir ID değeri için 100 eklenir.
Her bir sınıf değeri (veya pseudo-sınıf veya özellik seçici) için 10 eklenir.
Her bir element seçici veya pseudo-element için 1 eklenir.

Örnek:

Aşağıda bir özgüllük hesaplama örneği verilmiştir:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Özgüllük Örneği</title>
    <style>
        .example-class {
            color: blue;
        }
        #example-id {
            color: red;
        }
        h1 {
            color: green;
        }
        h1#example-id.example-class {
            color: yellow;
        }
    </style>
</head>
<body>
    <h1 id="example-id" class="example-class">Merhaba Dünya</h1>
</body>
</html>

Bu örnekte, h1 elementi üzerinde hangi stilin uygulanacağını belirlemek için her bir seçicinin özgüllüğünü hesaplamamız gerekir:

.example-class için özgüllük: 0-0-1 (class)
#example-id için özgüllük: 0-1-0 (ID)
h1 için özgüllük: 0-0-1 (element)
h1#example-id.example-class için özgüllük: 0-1-1 (ID + class + element)

En yüksek özgüllüğe sahip olan seçici h1#example-id.example-class (0-1-1) olduğundan, h1 elementine color: yellow; stili uygulanacaktır.

Özgüllük Hesaplamasında Dikkat Edilmesi Gerekenler

Satır içi stiller, diğer tüm CSS kurallarından daha yüksek bir özgüllüğe sahiptir.
ID seçicileri, sınıf seçicilerinden ve element seçicilerinden daha yüksek bir özgüllüğe sahiptir.
!important kuralı**, her zaman özgüllük hesaplamasından bağımsız olarak en yüksek önceliğe sahiptir.

Bu bilgiler, CSS kodlarınızın beklediğiniz gibi çalışmasını sağlamak ve stil çakışmalarını önlemek için önemlidir. Doğru bir özgüllük hesaplaması, web sayfalarınızın tutarlı ve istenen şekilde görünmesini sağlar.

Multiple Columns

CSS Flexbox Model

Giriş

CSS Flexbox Modeli, modern web geliştirme için esnek ve verimli bir düzen sistemi sağlar. Bu model, esnek kapsayıcı (flex container) ve esnek öğeler (flex items) olarak iki temel bileşene dayanır. Bu yazıda, Flexbox modelinin temel özelliklerini ve bunların nasıl kullanılacağını ayrıntılı olarak ele alacağız.

Flex Container Tanımlama

Flexbox modelini kullanmaya başlamak için ilk olarak bir flex container tanımlamanız gerekmektedir. Bir flex container, display özelliğini flex olarak ayarlayarak esnek hale getirilir.

.flex-container {
    display: flex;
}

Flex container özellikleri şunlardır:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

`flex-direction` Özelliği

flex-direction özelliği, flex öğelerin hangi yönde dizileceğini tanımlar. Varsayılan değer row olup, öğeler yatay olarak dizilir.

Örnek

.flex-container {
    display: flex;
    flex-direction: row; /* Varsayılan değer */
}

Alternatif değerler:

row: Öğeler yatay olarak dizilir.
row-reverse: Öğeler yatay olarak ters dizilir.
column: Öğeler dikey olarak dizilir.
column-reverse: Öğeler dikey olarak ters dizilir.

`flex-wrap` Özelliği

flex-wrap özelliği, flex öğelerin kapsayıcıya sığıp sığmadığını belirlemek için kullanılır. Varsayılan değer nowrap olup, tüm öğeler tek satırda dizilir.

Örnek

.flex-container {
    display: flex;
    flex-wrap: nowrap; /* Varsayılan değer */
}

Alternatif değerler:

nowrap: Öğeler tek satırda dizilir.
wrap: Öğeler birden fazla satırda dizilir.
wrap-reverse: Öğeler birden fazla satırda ters yönde dizilir.

`flex-flow` Özelliği

flex-flow özelliği, flex-direction ve flex-wrap özelliklerinin kısa yoldan tanımlanmasıdır.

Örnek

.flex-container {
    display: flex;
    flex-flow: row wrap;
}

`justify-content` Özelliği

justify-content özelliği, flex öğelerin ana eksende (main axis) nasıl hizalanacağını belirler.

Örnek

.flex-container {
    display: flex;
    justify-content: center;
}

Alternatif değerler:

flex-start: Öğeler başlangıçta hizalanır.
flex-end: Öğeler sonda hizalanır.
center: Öğeler ortalanır.
space-between: Öğeler arasına eşit boşluk bırakılır.
space-around: Öğelerin etrafına eşit boşluk bırakılır.

`align-items` Özelliği

align-items özelliği, flex öğelerin çapraz eksende (cross axis) nasıl hizalanacağını belirler.

Örnek

.flex-container {
    display: flex;
    align-items: flex-end;
}

Alternatif değerler:

flex-start: Öğeler çapraz eksende başlangıçta hizalanır.
flex-end: Öğeler çapraz eksende sonda hizalanır.
center: Öğeler çapraz eksende ortalanır.
baseline: Öğeler metin taban çizgisine hizalanır.
stretch: Öğeler çapraz eksende esnetilir.

`align-content` Özelliği

align-content özelliği, flex hatlarının (flex lines) nasıl hizalanacağını belirler. Bu özellik, birden fazla satır olduğunda etkili olur.

Örnek

.flex-container {
    display: flex;
    align-content: space-between;
}

Alternatif değerler:

flex-start: Hatlar başlangıçta hizalanır.
flex-end: Hatlar sonda hizalanır.
center: Hatlar ortalanır.
space-between: Hatlar arasına eşit boşluk bırakılır.
space-around: Hatların etrafına eşit boşluk bırakılır.
stretch: Hatlar esnetilir.

Sonuç

CSS Flexbox Modeli, esnek ve duyarlı web düzenleri oluşturmak için güçlü bir araçtır. Bu yazıda, Flexbox modelinin temel özelliklerini ve kullanım örneklerini ele aldık. Bu bilgiler, daha esnek ve modern web tasarımları oluşturmanıza yardımcı olacaktır.

Bu yazının doğruluğunu ve bilimsel niteliğini sağlamak için, örnek kodların ve açıklamaların detaylı ve doğru olduğundan emin olunmuştur. Web geliştirme sürecinde Flexbox modelini etkin bir şekilde kullanarak kullanıcı deneyimini optimize edebilirsiniz.

CSS Flex Items

CSS Flexbox düzeni, esnek ve verimli bir düzen modeli sağlayarak karmaşık yerleşim sorunlarını çözmeye yardımcı olur. Bu makale, Flexbox modelinin önemli bir bileşeni olan flex öğelerini ve onların özelliklerini ele alacaktır.

Flex Öğeleri (Flex Items)

Bir flex konteynerin doğrudan çocuk öğeleri otomatik olarak esnek (flex) öğeler haline gelir. Bu flex öğeler, konteynerin düzeni üzerinde belirli kontroller sağlayan çeşitli özelliklere sahiptir.

Örnek:

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

Yukarıdaki örnekte, flex-container sınıfına sahip div konteyneri, içinde bulunan flex-item sınıfına sahip div öğeleri otomatik olarak flex öğeler haline gelir.

Flex Öğesi Özellikleri

1. Order Özelliği

order özelliği, flex öğelerin sırasını belirtir. Varsayılan değer 0'dır ve negatif veya pozitif tamsayılar alabilir. Bu özellik, öğelerin HTML sırasından bağımsız olarak konteyner içinde nasıl sıralanacağını belirlemeye yardımcı olur.

Örnek:

.flex-item {
    order: 2;
}

2. Flex-grow Özelliği

flex-grow özelliği, bir flex öğesinin diğer öğelere göre ne kadar büyüyeceğini belirtir. Varsayılan değeri 0'dır. Eğer flex-grow değeri 1 ise, öğe boş alanı eşit şekilde paylaşır; 2 ise iki katı kadar büyür.

Örnek:

.flex-item {
    flex-grow: 1;
}

3. Flex-shrink Özelliği

flex-shrink özelliği, bir flex öğesinin diğer öğelere göre ne kadar küçüleceğini belirtir. Varsayılan değeri 1'dir. Eğer flex-shrink değeri 0 ise, öğe küçülmez.

Örnek:

.flex-item {
    flex-shrink: 1;
}

4. Flex-basis Özelliği

flex-basis özelliği, bir flex öğesinin başlangıç boyutunu belirtir. Bu özellik, öğenin esnekliğini belirlemeden önceki ana boyutunu (genişlik veya yükseklik) tanımlar. Varsayılan değeri auto'dur.

Örnek:

.flex-item {
    flex-basis: 100px;
}

5. Flex Özelliği

flex özelliği, flex-grow, flex-shrink ve flex-basis özelliklerinin kısayoludur. Bu özellikler tek bir değerle birleştirilebilir.

Örnek:

.flex-item {
    flex: 1 1 100px;
}

Yukarıdaki örnek, flex-grow değerini 1, flex-shrink değerini 1 ve flex-basis değerini 100px olarak ayarlar.

6. Align-self Özelliği

align-self özelliği, seçilen flex öğesinin konteyner içinde nasıl hizalanacağını belirtir. Bu özellik, konteynerin align-items özelliği tarafından belirlenen varsayılan hizalamayı geçersiz kılar. Değerleri şunlardır: auto, flex-start, flex-end, center, baseline, ve stretch.

Örnek:

.flex-item {
    align-self: center;
}

Bu örnek, flex-item öğesini konteynerin ortasına hizalar.

Sonuç

Flex öğeleri ve onların özellikleri, esnek düzenlerin oluşturulmasında büyük kolaylık sağlar. Bu özellikler doğru kullanıldığında, farklı ekran boyutlarına ve cihazlara uygun düzenler oluşturmak mümkündür. Flexbox modelini ve flex öğelerinin özelliklerini derinlemesine anlayarak, daha duyarlı ve kullanıcı dostu web tasarımları geliştirebilirsiniz.

Bu makale, CSS Flexbox düzen modelinin kritik bileşenlerinden biri olan flex öğeleri hakkında kapsamlı bir rehber sunmuştur. Belirtilen özellikler ve örnekler, esnek düzenler oluştururken size rehberlik edecektir.

CSS Grid Introduction

Giriş

CSS Grid Layout Modülü, satır ve sütunlarla ızgara tabanlı bir düzen sistemi sunar. Bu sistem, web sayfalarını tasarlamayı, float ve konumlandırma kullanmadan daha kolay hale getirir. Bu modül, kullanıcıların daha esnek ve uyumlu düzenler oluşturmasına olanak tanır.

Izgara Düzeni

Bir HTML elemanını ızgara konteyneri olarak tanımlamak için display özelliğini grid veya inline-grid olarak ayarlamanız gerekir.

Izgara Elemanları

Izgara düzeni, bir ebeveyn eleman ve bir veya daha fazla çocuk elemandan oluşur.

Izgara Sütunları

Izgara elemanlarının dikey çizgilerine sütun denir.

Izgara Satırları

Izgara elemanlarının yatay çizgilerine satır denir.

Izgara Boşlukları

Her sütun/satır arasındaki boşluklara boşluklar (gaps) denir.

Izgara Çizgileri

Sütunlar arasındaki çizgilere sütun çizgileri denir.
Satırlar arasındaki çizgilere satır çizgileri denir.

Boşluk Özellikleri

Boşluk boyutunu ayarlamak için aşağıdaki özellikleri kullanabilirsiniz:

column-gap
row-gap
gap

`column-gap` Özelliği

Bu özellik, sütunlar arasındaki boşluğu belirler.

`row-gap` Özelliği

Bu özellik, satırlar arasındaki boşluğu belirler.

`gap` Özelliği

Bu özellik, hem sütunlar hem de satırlar arasındaki boşlukları belirler. Bu özellik, hem column-gap hem de row-gap özelliklerini tek bir özellikte birleştirir.

Izgara Konteyneri

Izgara konteyneri, ızgara düzeninin ebeveyn elemanıdır. display özelliği grid veya inline-grid olarak ayarlandığında, bu eleman bir ızgara konteyneri haline gelir. Izgara konteyneri, içerdiği çocuk elemanları bir ızgara düzeninde düzenler.

Temel Izgara Özellikleri

grid-template-columns: Izgara konteynerinin sütunlarını tanımlar.
grid-template-rows: Izgara konteynerinin satırlarını tanımlar.
grid-template-areas: Izgara alanlarının isimlendirilmiş bölgelerini tanımlar.
grid-column-gap: Sütunlar arasındaki boşluğu tanımlar.
grid-row-gap: Satırlar arasındaki boşluğu tanımlar.
grid-gap: Hem sütunlar hem de satırlar arasındaki boşlukları tanımlar.

Izgara Öğeleri Konumlandırma

grid-column-start: Izgara öğesinin başladığı sütun çizgisini tanımlar.
grid-column-end: Izgara öğesinin bittiği sütun çizgisini tanımlar.
grid-row-start: Izgara öğesinin başladığı satır çizgisini tanımlar.
grid-row-end: Izgara öğesinin bittiği satır çizgisini tanımlar.

Izgara Alanları

Izgara alanları, ızgara öğelerinin yerleştirildiği adlandırılmış alanlardır. grid-template-areas özelliği ile tanımlanırlar ve ızgara düzeninde belirli bölgeleri işaretler.

Örnek Kullanım

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

.grid-item {
  background-color: lightblue;
  border: 1px solid #000;
}

Bu örnekte, .grid-container sınıfı bir ızgara konteyneri olarak tanımlanmış ve üç sütun ve iki satır içeren bir ızgara düzeni oluşturulmuştur. Izgara elemanları arasında 10 piksel boşluk bırakılmıştır.

Sonuç

CSS Grid Layout Modülü, karmaşık web düzenlerini basit ve etkili bir şekilde oluşturmayı mümkün kılar. Satır ve sütunları kullanarak, ızgara elemanlarını kolayca yerleştirebilir ve boşlukları ayarlayabilirsiniz. Bu modül, modern web tasarımında esneklik ve düzen sağlamak için güçlü bir araçtır.

CSS Grid Container

Giriş

CSS Grid Layout, iki boyutlu bir düzen sistemi sağlayarak modern web tasarımına devrim niteliğinde bir katkı sağlamaktadır. Grid Layout, satır ve sütunlara dayalı karmaşık düzenlerin kolayca oluşturulmasına imkan verir. Bu rehberde, bir HTML öğesini grid konteyner olarak nasıl tanımlayacağımızı ve ilgili CSS özelliklerini detaylı bir şekilde ele alacağız.

Grid Konteyner

Bir HTML öğesini grid konteyner olarak tanımlamak için display özelliğini grid veya inline-grid olarak ayarlamanız gerekmektedir. Bu ayar, öğenin çocuklarını grid ögeleri olarak tanımlar.

.container {
    display: grid;
}

Grid-Template-Columns Özelliği

grid-template-columns özelliği, grid düzeninizdeki sütunların sayısını ve her bir sütunun genişliğini tanımlar. Bu özellik, sütun genişliklerini piksel, yüzde veya fr (fractional) birimlerinde belirlemenize olanak tanır.

.container {
    display: grid;
    grid-template-columns: 100px 200px 1fr;
}

Yukarıdaki örnekte, ilk sütun 100 piksel, ikinci sütun 200 piksel ve üçüncü sütun ise kalan alanın tamamını kaplar.

Grid-Template-Rows Özelliği

grid-template-rows özelliği, grid düzeninizdeki satırların yüksekliğini tanımlar. Bu özellik de sütunlarda olduğu gibi, satır yüksekliklerini piksel, yüzde veya fr birimlerinde belirlemenize imkan tanır.

.container {
    display: grid;
    grid-template-rows: 50px 1fr 2fr;
}

Bu örnekte, ilk satır 50 piksel yüksekliğinde, ikinci satır kalan alanın bir bölümünü ve üçüncü satır ise iki bölümünü kaplar.

Justify-Content Özelliği

justify-content özelliği, tüm grid içeriğinin yatay eksende konteyner içinde nasıl hizalanacağını belirler. Olası değerler start, end, center, space-between, space-around, ve space-evenly şeklindedir.

.container {
    display: grid;
    justify-content: center;
}

Bu örnek, tüm grid içeriğinin yatay olarak merkeze hizalanmasını sağlar.

Align-Content Özelliği

align-content özelliği, tüm grid içeriğinin dikey eksende konteyner içinde nasıl hizalanacağını belirler. Olası değerler start, end, center, space-between, space-around, ve space-evenly şeklindedir.

.container {
    display: grid;
    align-content: center;
}

Bu örnek, tüm grid içeriğinin dikey olarak merkeze hizalanmasını sağlar.

Sonuç

CSS Grid Layout, karmaşık ve esnek web düzenleri oluşturmak için güçlü bir araçtır. Bu rehberde, bir HTML öğesini grid konteyner olarak tanımlamanın ve grid düzeninin temel özelliklerini ele aldık. Bu özellikler, modern ve kullanıcı dostu web siteleri tasarlamak için güçlü bir temel sağlar.

CSS Grid Items

Giriş

CSS Grid, modern web geliştirme dünyasında düzen ve hizalama işlemlerini devrim niteliğinde değiştiren bir araçtır. Bu makalede, CSS Grid'in child elementleri olan grid itemlar üzerine kapsamlı bir inceleme yapacağız. CSS Grid ile grid itemların nasıl yönetileceği, yerleştirileceği ve stil verileceği konularını detaylıca ele alacağız.

Grid Itemlar (Çocuk Elementler)

Bir grid konteyneri, grid itemları içerir. Varsayılan olarak, bir konteyner, her sütun için bir grid itemına sahiptir, fakat bu itemları birden fazla sütun ve/veya satır kaplayacak şekilde stilize edebilirsiniz.

Grid-Column Özelliği

grid-column özelliği, bir itemın hangi sütunda yer alacağını tanımlar. Bu özellik, itemın başlayacağı ve biteceği sütunu belirtir. grid-column, grid-column-start ve grid-column-end özelliklerinin kısayolu olarak kullanılır.

Örnek 1:

.item1 {
  grid-column: 1 / 3; /* 1. sütundan başla ve 3. sütunda bitir */
}

Örnek 2:

.item2 {
  grid-column: 2 / span 2; /* 2. sütundan başla ve 2 sütun genişliğinde yayıl */
}

Grid-Row Özelliği

grid-row özelliği, bir itemın hangi satırda yer alacağını tanımlar.

Örnek:

.item3 {
  grid-row: 1 / 2; /* 1. satırdan başla ve 2. satırda bitir */
}

Grid-Area Özelliği

grid-area özelliği, grid-row-start, grid-column-start, grid-row-end ve grid-column-end özelliklerinin kısayolu olarak kullanılır.

Örnek 1:

.item4 {
  grid-area: 1 / 1 / 2 / 3; /* 1. satır, 1. sütundan başla ve 2. satır, 3. sütunda bitir */
}

Örnek 2:

.item5 {
  grid-area: 2 / 2 / span 2 / span 2; /* 2. satır, 2. sütundan başla ve 2 satır, 2 sütun genişliğinde yayıl */
}

Kapsamlı Özellikler ve Kullanım Alanları

Grid-Column-Start ve Grid-Column-End:
- Bu özellikler, bir grid itemının başlayacağı ve biteceği sütunları belirlemek için kullanılır.
- grid-column-start: 1; ve grid-column-end: 3; ile itemın 1. sütundan başlayıp 3. sütunda biteceğini belirtebiliriz.
Grid-Row-Start ve Grid-Row-End:
- Bu özellikler, bir grid itemının başlayacağı ve biteceği satırları belirlemek için kullanılır.
- grid-row-start: 1; ve grid-row-end: 2; ile itemın 1. satırdan başlayıp 2. satırda biteceğini belirtebiliriz.
Grid-Area:
- Bir grid itemının belirli bir alanı kaplamasını sağlamak için grid-area özelliğini kullanabiliriz.
- grid-area: header; ile itemı bir alan adıyla ilişkilendirebiliriz.

Sonuç

CSS Grid, web sayfalarında kompleks düzenlerin oluşturulmasını kolaylaştıran güçlü bir araçtır. Grid itemların doğru ve etkili bir şekilde yerleştirilmesi, web sayfalarının kullanıcı deneyimini ve estetiğini önemli ölçüde artırabilir. Yukarıda belirtilen özellikler ve kullanım örnekleri, CSS Grid ile grid itemların yönetimi konusunda kapsamlı bir rehber sunmaktadır. Bu tekniklerin doğru uygulanması, modern ve esnek web tasarımlarının oluşturulmasını sağlar.

CSS Grid Items Naming

Giriş

CSS Grid Layout, modern web tasarımında yerleşim oluşturmak için güçlü bir araçtır. Bu eğitimde, CSS Grid öğelerine isim verme konusunu ele alacağız. Bu işlem, karmaşık yerleşimleri daha okunabilir ve yönetilebilir hale getirir. CSS Grid ile ilgili detaylı bilgi sağlayarak, bu özelliğin nasıl etkili bir şekilde kullanılacağını göstereceğiz.

Grid Alanına İsim Verme

CSS Grid Layout, grid-area özelliği ile grid öğelerine isim vermemizi sağlar. Bu özellik, karmaşık düzenlerin yönetimini kolaylaştırır ve kodun okunabilirliğini artırır. Aşağıda, bu özelliğin nasıl kullanılacağına dair örnekler ve açıklamalar bulunmaktadır.

Grid-Area Özelliği

grid-area özelliği, bir grid öğesine isim atamak için kullanılır. Bu isim, grid şablonlarında ve grid yerleşimlerinde kullanılarak öğelerin konumunu belirler.

.item1 { grid-area: header; }
.item2 { grid-area: main; }
.item3 { grid-area: sidebar; }
.item4 { grid-area: footer; }

Yukarıdaki kod parçasında, dört farklı grid öğesine isimler atanmıştır: header, main, sidebar, ve footer.

Grid Template Areas

Grid şablonları, grid alanlarının düzenini tanımlamak için kullanılır. Aşağıdaki örnek, grid şablonlarının nasıl kullanılacağını göstermektedir.

.container {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-gap: 10px;
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

Bu örnekte, grid-template-areas özelliği kullanılarak bir grid şablonu tanımlanmıştır. Şablon, üç satırdan ve üç sütundan oluşmaktadır. Her alan, önceden belirlenmiş grid alan isimlerine göre yerleştirilmiştir.

Grid Öğelerinin Sıralaması

Grid Layout, öğelerin sayfa üzerindeki sırasını ve konumunu esnek bir şekilde yönetmemizi sağlar. grid-area ve grid-template-areas özellikleri kullanılarak öğelerin sırası ve yerleşimi kolayca ayarlanabilir.

<div class="container">
  <div class="header">Header</div>
  <div class="main">Main Content</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

Sonuç

CSS Grid Layout'un grid-area özelliği, karmaşık yerleşimlerin yönetimini basitleştirir ve kodun okunabilirliğini artırır. Bu eğitimde, grid öğelerine nasıl isim verileceğini ve bu isimlerin grid şablonlarında nasıl kullanılacağını inceledik. Bu teknikler, web sayfalarınızda daha esnek ve yönetilebilir düzenler oluşturmanıza yardımcı olacaktır.

CSS Website Layout

Giriş

Web siteleri genellikle başlıklar, menüler, içerikler ve altbilgiler olarak bölümlere ayrılır. Bu bölümler, web sitesinin kullanıcı dostu ve düzenli olmasını sağlar. CSS (Cascading Style Sheets), bu bölümlerin stilini ve yerleşimini kontrol etmek için kullanılır. Bu tutorial, CSS kullanarak bir web sitesi düzeninin nasıl oluşturulacağını detaylı bir şekilde açıklamaktadır.

Başlık (Header)

Başlık genellikle web sitesinin en üstünde yer alır (veya bir üst navigasyon menüsünün hemen altında). Çoğunlukla bir logo veya web sitesi adını içerir.

Örnek Kod

<!DOCTYPE html>
<html>
<head>
<style>
.header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
    font-size: 35px;
}
</style>
</head>
<body>

<div class="header">
  <h1>Web Sitesi Adı</h1>
  <p>Web Sitesi Sloganı</p>
</div>

</body>
</html>

Navigasyon çubuğu, ziyaretçilerin web sitenizde gezinebilmesi için bağlantılar listesi içerir.

Örnek Kod

<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
    overflow: hidden;
    background-color: #333;
}

.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Ana Sayfa</a>
  <a href="#news">Haberler</a>
  <a href="#contact">İletişim</a>
  <a href="#about">Hakkında</a>
</div>

</body>
</html>

İçerik/Kolonlar (Content/Columns)

Ana içerik, web sitenizin en büyük ve en önemli kısmıdır. Bu bölüm genellikle birden fazla sütundan oluşur.

Örnek Kod

<!DOCTYPE html>
<html>
<head>
<style>
.row {
  display: flex;
}

.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

.main {
  flex: 70%;
  background-color: #ffffff;
  padding: 20px;
}
</style>
</head>
<body>

<div class="row">
  <div class="side">
    <h2>Yan Menü</h2>
    <p>Yan menü içeriği.</p>
  </div>
  <div class="main">
    <h2>Ana İçerik</h2>
    <p>Ana içerik bölümü.</p>
  </div>
</div>

</body>
</html>

Altbilgi, sayfanızın en altında yer alır. Genellikle telif hakkı ve iletişim bilgileri gibi bilgiler içerir.

Örnek Kod

<!DOCTYPE html>
<html>
<head>
<style>
.footer {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
}
</style>
</head>
<body>

<div class="footer">
  <p>Telif Hakkı © 2024 Tüm Hakları Saklıdır.</p>
</div>

</body>
</html>

CSS ile Web Sitesi Düzeni Oluşturma

CSS, HTML öğelerinin düzenini kontrol etmek için kullanılır. Bu örnekler, temel bir web sitesi düzeni oluşturmak için gereken adımları göstermektedir. Bu düzen, çeşitli cihaz ve ekran boyutlarına uyacak şekilde daha da geliştirilebilir.

Kritik İnceleme ve Düzeltmeler

Belgede belirtilen düzenleme yapısında bazı iyileştirmeler ve düzeltmeler yapılabilir. Örneğin, esnek düzen (flex layout) ve ızgara düzeni (grid layout) kullanarak daha modern ve duyarlı tasarımlar oluşturulabilir. Ayrıca, erişilebilirlik ve SEO (Arama Motoru Optimizasyonu) dikkate alınarak HTML yapısı daha semantik hale getirilebilir.

Flexbox ve Grid Kullanımı

/* Flexbox ile yan yana dizilim */
.row {
  display: flex;
}

/* Grid ile düzenleme */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

Flexbox ve Grid kullanarak daha karmaşık ve esnek düzenler oluşturabilirsiniz. Bu teknikler, web tasarımında modern yaklaşımları temsil eder ve çeşitli cihazlarda tutarlı bir kullanıcı deneyimi sağlar.

Sonuç

Bu tutorial, temel bir web sitesi düzeni oluşturmak için CSS kullanımı hakkında kapsamlı ve detaylı bilgiler sunmuştur. CSS'in gücünü kullanarak, web sitenizi daha kullanıcı dostu ve estetik hale getirebilirsiniz. Bu bilgiler, web tasarımı ve geliştirme konusundaki profesyonel standartları yansıtacak şekilde hazırlanmıştır.

CSS Frameworkler Üzerine Detaylı Rehber

CSS frameworkleri, kullanıcı arayüzü geliştirme sürecini kolaylaştıran hazır CSS kütüphaneleridir. Bu frameworkler, UI geliştiricilerine projelerine başlarken temel bir altyapı sağlar ve bu altyapıyı proje boyunca tekrar ederek ve düzenleyerek kullanıcı arayüzü oluşturmayı mümkün kılar. CSS frameworkleri, responsive tasarım sunan birçok ücretsiz seçenek içerir.

Popüler CSS Frameworkleri

Bootstrap

Bootstrap, en popüler ve yaygın kullanılan CSS frameworklerinden biridir. HTML, CSS ve JavaScript bileşenleri içerir ve responsive, mobil-öncelikli projeler geliştirmeyi kolaylaştırır. Grid sistemi, butonlar, formlar, navigasyon elemanları ve daha birçok UI bileşeni içerir.

Tailwind CSS

Tailwind CSS, utility-first bir CSS frameworküdür. Bu framework, önceden tanımlanmış sınıflar kullanarak hızlı bir şekilde stil oluşturmayı mümkün kılar. Esnek yapısı sayesinde özelleştirme ve yeniden kullanım kolaylığı sağlar.

Foundation

Foundation, responsive ve açık kaynaklı bir front-end frameworküdür. Responsive grid sistemi, HTML ve CSS UI bileşenleri, şablonlar ve kod parçacıkları içerir. Tipografi, formlar, butonlar, navigasyon ve diğer arayüz elemanlarının yanı sıra JavaScript uzantıları ile ek işlevsellik sağlar.

Bulma

Bulma, kullanıma hazır frontend bileşenleri sağlayan ücretsiz ve açık kaynaklı bir frameworktür. Bu bileşenler, responsive web arayüzleri oluşturmayı kolaylaştırır. Az JavaScript kullanımı ile sade ve modern tasarımlar sunar.

Materialize

Materialize, Google'ın Material Design prensiplerine dayanan modern bir responsive front-end frameworküdür. Material Design'ın getirdiği tasarım öğelerini kullanarak tutarlı ve estetik görünümler elde etmeyi sağlar.

UIkit

UIkit, hızlı ve güçlü web arayüzleri geliştirmek için hafif ve modüler bir front-end frameworküdür. Esnek yapısı sayesinde özelleştirilmiş ve performans odaklı uygulamalar geliştirmeyi mümkün kılar.

Semantic UI

Semantic UI, insan dostu HTML kullanarak güzel ve responsive düzenler oluşturmayı sağlayan bir geliştirme frameworküdür. Tasarımcılar ve geliştiriciler arasında ortak bir dil oluşturur ve işbirliğini kolaylaştırır.

Pure

Pure, responsive web siteleri ve web uygulamaları geliştirmek için kullanılan ücretsiz ve açık kaynaklı bir CSS frameworküdür. Yahoo tarafından geliştirilen bu framework, hızlı, şık ve responsive tasarımlar sunar. Tüm modüllerin minified ve gzipped hali sadece 3.5KB boyutundadır.

Skeleton

Skeleton, küçük projeler veya büyük frameworklerin tüm işlevselliğine ihtiyaç duyulmayan projeler için ideal olan bir responsive CSS boilerplate'tir. Basit ve minimal bir yapı sunar, hızlı bir başlangıç sağlar.

Susy

Susy, flexbox ve CSS grid kullanılmadan önce Sass için responsive bir layout motoruydu. Artık güncellenmemekte ve desteklenmemektedir. Yeni web layout tekniklerine geçiş yapmanıza yardımcı olmak için eğitim ve danışmanlık hizmetleri sunulmaktadır.

CSS Project

Building a YouTube Clone Step by Step: HTML and CSS Project

In this comprehensive tutorial where we will build a YouTube clone from scratch using HTML and CSS. By following this step-by-step guide, you'll learn how to create layouts and add content, ultimately gaining valuable skills in web development.

Introduction

In this tutorial, we'll break down the YouTube clone project into smaller units, making it easier to understand and build. Here's an overview of what we'll cover:

Understanding the structure and layout of the YouTube clone.
Creating the HTML structure.
Styling the layout with CSS.
Adding content to the header, sidebar, and content sections.
Making the YouTube clone responsive using media queries.

Let's dive in!

YouTube Clone Breakdown

Before we start coding, let's understand the structure of the YouTube clone we'll be building. The website consists of the following major units:

Header: Contains three sections - left, center, and right.
Main Body: Divided into sidebar and content sections.
Sidebar: Contains navigation links.
Content: Displays videos.

Step 1: Creating the HTML Structure

Let's begin by setting up the basic HTML structure for our YouTube clone.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="styles/index.css">
    <title>YouTube Clone with HTML & CSS</title>
</head>
<body>
    <header class="header"></header>
    <main>
        <div class="side-bar"></div>
        <div class="content"></div>
    </main>
</body>
</html>

Step 2: Styling the Layout with CSS

Now, let's add CSS to style our YouTube clone layout.

/* Importing Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* Reset HTML default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set the font-family */
body {
  font-family: 'Roboto', sans-serif;
}

/* Style the header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 15px;
}

/* Set the height of the main section */
main {
  height: calc(100vh - 70px);
  display: flex;
  background-color: #f9f9f9;
}

/* Style the sidebar */
.side-bar {
  height: 100%;
  width: 17%;
  background-color: white;
  overflow-y: hidden;
}

/* Add media queries for responsiveness */
@media (max-width: 768px) {
  .side-bar {
    display: none;
  }
}

Step 3: Adding Content to the Header Section

Let's divide the header into three sections - left, center, and right - and add content accordingly.

<header>
    <div class="logo left">
        <i id="menu" class="material-icons">menu</i>
        <img src="https://www.freecodecamp.org/news/content/images/2022/01/yt-logo.png">
    </div>

    <div class="search center">
        <form action="">
            <input type="text" placeholder="Search">
            <button><i class="material-icons">search</i></button>
        </form>
        <i class="material-icons mic">mic</i>
    </div>

    <div class="icons right">
        <i class="material-icons">videocam</i>
        <i class="material-icons">apps</i>
        <i class="material-icons">notifications</i>
        <i class="material-icons display-this">account_circle</i>
    </div>
</header>

Step 4: Adding Content to the Sidebar

Now, let's add navigation links to the sidebar section.

<div class="nav">
    <a class="nav-link active">
        <i class="material-icons">home</i>
        <span>Home</span>
    </a>
    <!-- Add more navigation links here -->
    <hr> <!-- Add a line to separate sections -->
    <!-- Add more navigation links here -->
</div>

Step 5: Adding Videos to the Content Section

Finally, let's add videos to the content area.

<div class="videos">
    <!-- Video 1 -->
    <div class="video">
        <div class="thumbnail">
            <img src="https://img.youtube.com/vi/zUwB_imVjmg/maxresdefault.jpg" alt="">
        </div>
        <div class="details">
            <div class="author">
                <img src="https://yt3.ggpht.com/bpzY-S4DYlbTeOpY5hIA7qz_hcbMkgvLAugtwKBGTTImNnWAGudX0y53bo_fJZ0auypxrWkUiw=s88-c-k-c0x00ffffff-no-rj" alt="">
            </div>
            <div class="title">
                <h3>Introverts & Content Creation | Sumudu Siriwardana</h3>
                <a href="">Francesco Ciulla</a>
                <span>2M Views • 3 Months Ago</span>
            </div>
        </div>
    </div>
    <!-- Add more videos here -->
</div>

Step 6: Making the YouTube Clone Responsive

To make our YouTube clone responsive, let's use CSS media queries.

@media (max-width: 768px) {
    .side-bar, .search {
        display: none;
    }
}

@media (max-width: 900px) {
    .search input {
        width: 25rem;
    }
}