CSS Çerçeve Kodu

CSS Çerçeve Kodu : HTML Web Tasarımları yaparken kullanılan CSS kodlarının içinde bir takım görselliği arttırıcı kodlar mevcuttur. Bu makale içinde görsellik için CSS kullanılan çerçeve  kodlarına ve çerçevelerin hangi stillerde olduklarına örnekli bir şekilde göz atacağız. CSS border yani çerçeve verme CSS kodunun özelliklerinin neler olduğunu ve çerçeve kalınlığı, rengi ve çerçevenin nasıl olması gerektiği hakkında bilgiler öğreneceksiniz.

CSS kodunda border özellikleri aşağıdaki sıraladığım gibidir.

  • Çerçeve kalınlığı
    • Tüm ölçü birimleri uygundur.
  • Çerçeve Stili
    • Düz çizgi, Kesik Çizgi, Aralıklı Çizgi, Noktalı Çizgi vb Çizgi Stilleri
  • Çerçeve Rengi
    • Çerçeveye dilediğiniz renk kodunu yazabilirsiniz.

CSS Çerçeve Kullanımı

CSS Çerçeve Kodunu kullanmak aslına bakılacak olursa oldukça kolaydır. İhtiyacımız olan bir HTML elementi ve CSS kodudur. Çerçeve oluşturabilmek için gereken kodları aşağıdaki bölüme resimli bir şekilde sizlerle paylaşıyorum.

HTML Kodu:

<div class="duz-cerceve"></div>

CSS Kodu:

.duz-cerceve{
	border:3px solid #f00;

	width:200px;
	height:200px;
}

Açıklama: HTML Div Etiketi içine CSS kodu ile genişlik, yükseklik ve çerçeve verdim. 3px kalınlık, solid ifadesi düz çizgi anlamına gelmektedir ve #f00 kırmızı renkte olduğunu ifade eder.

Düz Çizgili Çerçeve
Düz Çizgili Çerçeve

CSS Çerçeve Özellikleri

CSS çerçeve özelliklerini kod ifadeleri ile belirtiyorum;

.cerceve{
	border:5px dotted #000;
}
  • 1. Parametre : px, em, cm vb uzunluk girilir.
  • 2. Parametre : Çerçeve stilleri.
    1. none : Çerçevenin olmadığı anlamına gelir. Genelde çerçeveyi gizlemek için kullanılır.
    2. hidden : Çerçeve var ancak gizleme ifadesi için kullanılır.
    3. dotted : İnce çizgili çerçeve.
    4. dashed : Kalın çizligi çerçeve.
    5. solid : Düz çizgili çerçeve.
    6. double : Çift çizgili çerçeve kullanımı içindir.
    7. groove : Dışı kalın iç bölüme ince çizgi çeken çerçeve çeşididir.
    8. ridge : Dışa doğru kabartma görünümlü çerçeve.
    9. inset : İç kısma doğru kabartma görünümlü çerçeve.
    10. outset : Alt dış kısma kabartma görünümlü çerçeve.
  • 3. Parametre : Renk verme bölümüdür. Dilediğiniz şekilde renk verebilirsiniz.

CSS Kesik Çizgili Çerçeve

Aşağıda sizlerle paylaşacağım bu örnekte kesik çizgili çerçeve yapacağım. Bu kodun kullanım alanları yapacağınız işleme göre değişebilir. Genel kullanım alanı bellidir.

HTML Kodu:

<div class="kesik-cizgili-cerceve"></div>

CSS Kodu:

.kesik-cizgili-cerceve{
	width: 200px;
	height: 200px;

	border:4px dashed #000;
}

Açıklama: HTML Div Etiketine 4px genişliğinde, kesik çizgili ve siyah renkte çerçeve eklemiş olduk.

Kesik Çizgili Çerçeve
Kesik Çizgili Çerçeve

 

Diğer tüm Web Tasarım konuları hakkında sormak istediğiniz konuları aşağıdaki form üzerinden veya iletişim sayfasından yazabilirsiniz. Şimdiden hepinize iyi çalışmalar diliyorum.

CSS Çerçeve Kodu
Etiketlendi: