CSS Border Örneği Detaylı İnceleme

İçindekiler

CSS Border

CSS Border (Çerçeve) özellikleri, HTML elementlerinin etrafında çerçeve oluşturmayı sağlar. CSS, çerçevenin stilini, genişliğini, rengini ve hatta bir görüntü ile çerçeve oluşturmayı mümkün kılan birçok farklı özellik sunar. Aşağıdaki HTML ve CSS kodu, CSS border (çerçeve) özelliklerini görsel olarak anlamak için hazırlanmış bir demo sayfasıdır. Kodu detaylıca açıklayalım:

CSS Bölümü

Kod içerisinde farklı çerçeve stilleri (border-style), genişlikleri (border-width), renkleri (border-color), köşe yuvarlama (border-radius), ve görsel çerçeve (border-image) kullanılmıştır.

`border-style`: Çerçeve Stilleri

border-width: 3px; → Çerçevenin kalınlığı 3 piksel.
border-style: solid; → Varsayılan çerçeve stili düz çizgi.
border-color: #333; → Çerçeve rengi koyu gri.
padding: 20px; → Çerçeve ile içerik arasında boşluk bırakılmış.
margin: 10px 0; → Üstten ve alttan 10 piksel boşluk bırakılmış.

Farklı Border Stilleri

Dotted → Noktalı çerçeve.
Dashed → Kesikli çizgili çerçeve.
Double → Çift çizgili çerçeve.
Groove → 3D görünüm veren oyuk çerçeve.
Ridge → 3D görünüm veren çıkıntılı çerçeve.
Inset → 3D içeri gömülü çerçeve.
Outset → 3D dışarı çıkıntılı çerçeve.

`border-radius`: Yuvarlatılmış Köşeler

border-radius: 15px; → Köşeleri 15px yuvarlatılmış.
Kırmızı-turuncu (#ff6347) renkte çerçeve.

`border-image`: Çerçeve İçin Görsel Kullanımı

border: 15px solid transparent; → Şeffaf arka plana sahip çerçeve.
border-image → Çerçeve için bir resim kullanılmış.
Resim URL’si → https://picsum.photos/id/508/600/300
30 round → Resim çerçeveye uyarlanırken yuvarlanıyor.

style.css

 /* Genel stil ayarları */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      padding: 20px;
    }

    /* Border-Style: Çerçeve Stilleri */
    .border-style {
      border-width: 3px;
      border-style: solid;
      border-color: #333;
      padding: 20px;
      margin: 10px 0;
    }

    .dotted {
      border-style: dotted;
    }

    .dashed {
      border-style: dashed;
    }

    .double {
      border-style: double;
      border-width: 6px;
    }

    .groove {
      border-style: groove;
    }

    .ridge {
      border-style: ridge;
    }

    .inset {
      border-style: inset;
    }

    .outset {
      border-style: outset;
    }

    /* Border-Width: Çerçeve Genişliği */
    .border-width {
      border-style: solid;
      border-width: 5px;
      border-color: #00f;
      padding: 20px;
      margin: 10px 0;
    }

    .thin {
      border-width: thin;
    }

    .medium {
      border-width: medium;
    }

    .thick {
      border-width: thick;
    }

    /* Border-Radius: Yuvarlatılmış Köşeler */
    .border-radius {
      border: 3px solid #ff6347;
      border-radius: 15px;
      padding: 20px;
      margin: 10px 0;
    }

    /* Border-Color: Çerçeve Rengi */
    .border-color {
      border-style: solid;
      border-width: 4px;
      border-color: #8a2be2;
      padding: 20px;
      margin: 10px 0;
    }

    /* Border Image: Çerçeveye Görüntü Eklemek */
    .border-image {
      border: 15px solid transparent;
      border-image: url('https://picsum.photos/id/508/600/300') 30 round;
      padding: 20px;
      margin: 10px 0;
    }

    /* Kısayol Kullanımı */
    .border-shortcut {
      border: 3px solid #ff4500;
      padding: 20px;
      margin: 10px 0;
    }

    /* Border-Width Her Kenara Farklı */
    .border-width-custom {
      border-style: solid;
      border-width: 10px 20px 30px 40px; /* üst, sağ, alt, sol */
      border-color: #008080;
      padding: 20px;
      margin: 10px 0;
    }

    /* Farklı Kenarlara Farklı Renkler */
    .border-color-custom {
      border-style: solid;
      border-width: 2px;
      border-color: red green blue yellow; /* üst, sağ, alt, sol */
      padding: 20px;
      margin: 10px 0;
    }

HTML Bölümü

HTML yapısı, başlık (h1, h2) ve çeşitli çerçeve türlerini göstermek için kullanılan <div> öğelerinden oluşur.

meta charset="UTF-8" → Türkçe karakterlerin düzgün görüntülenmesini sağlar.
meta name="viewport" content="width=device-width, initial-scale=1.0" → Sayfanın mobil uyumlu olması için eklenmiştir.
<title> etiketi → Sekmede görünen başlığı belirler.

index.html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Border Özellikleri</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <h1>CSS Border Özellikleri</h1>

  <div class="border-style dotted">
    <h2>Noktalı Çerçeve</h2>
    <p>Bu bir noktalı çerçeve örneğidir.</p>
  </div>

  <div class="border-style dashed">
    <h2>Kesikli Çerçeve</h2>
    <p>Bu bir kesikli çerçeve örneğidir.</p>
  </div>

  <div class="border-style double">
    <h2>Çift Çizgili Çerçeve</h2>
    <p>Bu bir çift çizgili çerçeve örneğidir.</p>
  </div>

  <div class="border-style groove">
    <h2>3D Oyuk Çerçeve</h2>
    <p>Bu bir 3D oyuk çerçeve örneğidir.</p>
  </div>

  <div class="border-style ridge">
    <h2>3D Çıkıntılı Çerçeve</h2>
    <p>Bu bir 3D çıkıntılı çerçeve örneğidir.</p>
  </div>

  <div class="border-style inset">
    <h2>3D İçe Doğru Çerçeve</h2>
    <p>Bu bir 3D içe doğru çerçeve örneğidir.</p>
  </div>

  <div class="border-style outset">
    <h2>3D Dışa Doğru Çerçeve</h2>
    <p>Bu bir 3D dışa doğru çerçeve örneğidir.</p>
  </div>

  <div class="border-width thin">
    <h2>İnce Çerçeve</h2>
    <p>Bu bir ince çerçeve örneğidir.</p>
  </div>

  <div class="border-width medium">
    <h2>Orta Kalınlıkta Çerçeve</h2>
    <p>Bu bir orta kalınlıkta çerçeve örneğidir.</p>
  </div>

  <div class="border-width thick">
    <h2>Kalın Çerçeve</h2>
    <p>Bu bir kalın çerçeve örneğidir.</p>
  </div>

  <div class="border-radius">
    <h2>Yuvarlatılmış Köşeler</h2>
    <p>Bu bir yuvarlatılmış köşelerle tasarlanmış çerçeve örneğidir.</p>
  </div>

  <div class="border-color">
    <h2>Renkli Çerçeve</h2>
    <p>Bu bir renkli çerçeve örneğidir.</p>
  </div>

  <div class="border-image">
    <h2>Görüntü ile Çerçeve</h2>
    <p>Bu bir görüntü ile tasarlanmış çerçeve örneğidir.</p>
  </div>

  <div class="border-shortcut">
    <h2>Kısayol Kullanımı</h2>
    <p>Bu bir kısayol ile tanımlanmış çerçeve örneğidir.</p>
  </div>

  <div class="border-width-custom">
    <h2>Farklı Kenar Kalınlıkları</h2>
    <p>Bu çerçevenin her kenarının farklı kalınlıkları vardır.</p>
  </div>

  <div class="border-color-custom">
    <h2>Farklı Kenar Renkleri</h2>
    <p>Bu çerçevenin her kenarının farklı renkleri vardır.</p>
  </div>

</body>
</html>

HTML hakkında daha fazla bilgiye “HTML” kategorisinden bakabilirsin. CSS hakkında daha fazla bilgi için “CSS” kategorisine bakabilirsin.

Etiketler: CSS Border CSS Border Örnek

Paylaş:

Tayyip Bölük

Merhaba! Ben Tayyip Bölük, yazılım geliştirme alanında uzmanlaşmış bir geliştiriciyim. Teknoloji ve yazılım dünyasına olan ilgim, beni bu blogu oluşturmaya yönlendirdi. Amacım, yazılım geliştirme sürecindeki deneyimlerimi, öğrendiklerimi ve sektördeki yenilikleri okuyucularımla paylaşmak. Yazılım geliştirme sürecindeki yenilikçi yaklaşımlar, uygulama geliştirme ipuçları ve teknoloji trendleri üzerine içerikler üretiyorum. Blogumda ayrıca kendi projelerimden ve sektördeki ilham verici hikayelerden de bahsediyorum. Bu blog, hem yazılım meraklıları hem de sektöre adım atmak isteyenler için bir bilgi ve ilham kaynağı olmayı hedefliyor.