CSS Dersleri 5: Kenarlık Yapımı (Border)

Merhabalar,

CSS derslerimize kaldığımız yerden devam ediyoruz. Daha önce ki css dersimizde sizlere html elementlerine arkaplan rengi verme ve css ile arkaplan uygulamalarını yapmıştık. Arkaplana resim verme, renk ekleme vb.

Bu dersimizde ise CSS’de Kenarlık Yapımı nı anlatacağım. Oldukça basit ve css tasarımlarınıza biçim vermek için en sık kullanılan css özelliklerinden bir tanesidir Border (Kenarlık).

Daha önce ki CSS Derslerine aşağıda ki bağlantılarla ulaşabilirsiniz.

  1. CSS Dersleri 1: CSS Nedir ?
  2. CSS Dersleri 2: Söz Dizim Kuralları ve Seçiciler
  3. CSS Dersleri 3: Renklerin Kullanımı
  4. CSS Dersleri 4: Arkaplan (Background) Özellikleri

CSS border yani kenarlık veya cerçeve HTML elementlerine kenarlık eklemek için kullanılır.Bu yazımda sizlere CSS’de Kenarlık Yapımı nı anlatacağım.

Haydi başlayalım o halde…

CSS’de Kenarlık Yapımı

CSS’in border özelliği, HTML elementlerinde belirlediğimiz kutunun,nesnenin kenarlarına çerçeve eklememizi sağlar. Kısaca tasarımımıza şekil vermek için sıkça kullandığımız bir CSS özelliğidir. CSS’de Kenarlık Yapımı nı detaylı olarak bu konuda işleyeceğiz.

CSS border özelliği HTML elementlerinin kenar çizgilerini tanımlamak ve stil (kenar çizgi kalınlığı,rengi ve şekli) vermek için kullanılır.

Kenarlıklara biçim vermek için 3 tane border özelliği vardır bunlar:

  1. border-color
  2. border-style
  3. border-width

Yukarıda sıraladığımız border özelliklerini sırasıyla açıklayıp, birer tane örnek ile anlatmaya çalışacağım.

Border-style (Kenarlık Biçimi)

Kenar çizgilerinin biçimini(şeklini) belirlemek için border-style özelliği kullanılır.20 tane önceden tanımlı biçim vardır.

Örnek kullanım:

[syntax type=”css”]

div {  
  border-style: dashed;
}

[/syntax]

Burada dashed yazan kısıma verebileceğimiz birkaç tane parametre mevcuttur. Bunlar;

  • solid -> Sade ve düz çizgi anlamına gelir yani şuan bu sitenin kenarlıkları solid kenarlıklardır. Dikkat ederseniz düz çizgi halindedir.
  • dashed -> Kesik çizgi olarak tercüme edebiliriz. Yani solid’in aksine kesik kesik çizgilerden oluştur örnek (- – – – )
  • dotted -> Kesik çizginin noktalı halidir. Nokta halinde kenarlıklar oluşturur. Örnek (……..)

Bunlar default olarak basitce oluşturduğumuz kenarlıklara biçim vermemizi sağlıyorlar. Birde bunların yönlere göre kullanımı mevcuttur. Yani, sadece belli bir yere veya yönde kenarlık oluşturmamızı sağlıyor. Hiçbir yön belirtmeden border-style diye yazdığımız bütün kenar bölgelere kenarlık eklemesi yapacaktır. Bazen sadece üste veya sadece alt kısma kenarlık eklemek isteyebiliriz bunun içinde  4 tane farklı yön verme özelliği mevcuttur. Bunlar;

  • border-top-style: -> Sadece üst kısıma kenarlık ekler.
  • border-left-style: -> Sadece sol kısıma kenarlık ekler.
  • border-bottom-style: -> Sadece alt kısıma kenarlık ekler.
  • border-right-style: -> Sadece sağ kısıma kenarlık ekler.

[label style=”darkred”]İpucu:[/label] border-style yukarıdaki yönlere göre border özelliklerinin kısaltılmış halidir.Bu özellik 1 ile 4 arasında değer alabilir.1 tane değer alırsa -yukardaki örnekte gibi- bu değer bütün kenarlara uygulanır.Eğer 4 değer alırsa her kenara aynı biçim verilmiş olur.
Örnek Kullanımı:

[syntax type=”css”]

p {  
  border-style: dashed dotted solid double;
                  
}

[/syntax]

Border-color (Kenarlık Rengi)

Border-color özelliği oluşturduğumuz kenarlıklara renk vermek için kullanırız. Tasarımımızın rengine uygun kenarlık renkleri vermemiz için çok kullanışlı bir CSS özelliğidir. Basit bir örnek yapalım.

[syntax type=”css”]

p {  
  border-color: blue;
}

[/syntax]

Örnekte te gördüğünüz gibi kenarlıkların rengini mavi olarak belirledik. Yine bir önceki özelliğimiz olan Border-style ‘da olduğu gibi border-color özelliğinde de farklı yönlerdeki kenarlıklara ayrı ayrı renk verebiliriz. Yani, üst kısımda ki kenarlığa kırmızı rengini, alt kısımda ki kenarlığa ise sarı rengi verebiliriz. Bunun içinde yine 4 tane özellik parametresi mevcuttur. Bunlar;

  • border-top-color: -> Sadece üst kısımda ki kenarlığa renk verir.
  • border-left-color: -> Sadece sol kısımda ki kenarlığa renk verir.
  • border-bottom-color: -> Sadece alt kısımda ki kenarlığa renk verir.
  • border-right-color: -> Sadece sağ kısımda ki kenarlığa renk verir.

[label style=”darkred”]İpucu:[/label] border-color yukarıdaki yönlere göre border özelliklerinin kısaltılmış halidir.Bu özellik 1 ile 4 arasında değer alabilir.1 tane değer alırsa -yukardaki örnekte gibi- bu değer bütün kenarlara uygulanır.Eğer 4 değer alırsa her kenara aynı biçim verilmiş olur.

Örnek Kullanımı:

[syntax type=”css”]

p {border-color: red green pink black; }

[/syntax]

Border-width (Kenarlığın Genişliği)

Adından da anlaşılacağı gibi seçtiğimiz HTML elementine verdiğimiz kenarlık css özelliğinin genişliğini belirlememizi sağlar. Başka bir değişile kalınlığını belirlememizi sağlar.

Örnek kullanımı:

[syntax type=”css”]

p {  
  border-width: 2px;
}

[/syntax]

Yine diğer özelliklerimizde olduğu gibi border-width özelliğimizde de yönlere göre farklı kalınlık (genişlik) değerlerini verebiliyoruz. Bunlar;

  • border-top-width: -> Sadece üst kısımda ki kenarlığın kalınlığını (genişliğini) belirler.
  • border-left-width: -> Sol kenarlık
  • border-bottom-width: -> Alt kenarlık
  • border-right-width: -> Sağ kenarlık

[label style=”darkred”]İpucu:[/label] border-width yukarıdaki yönlere göre border özelliklerinin kısaltılmış halidir.Bu özellik 1 ile 4 arasında değer alabilir.1 tane değer alırsa -yukardaki örnekte gibi- bu değer bütün kenarlara uygulanır.Eğer 4 değer alırsa her kenara aynı biçim verilmiş olur.

Örnek Kullanımı:

[syntax type=”css”]

p {  
  border-width: 2px 3px 1px 3px;
                  
}

[/syntax]

Aslında yukarıda saydığımız 3 border özelliğinin yönler için kısaltılmış bir özellik olduklarını gördünüz.Sadece border özelliği de bu 3 özelliğin kısaltması olarak kullanılabiliyor.

Örnek Kullanım:

[syntax type=”css”]

p {  
  border: 2px solid red;        
                  
}

[/syntax]

Yukarıda ki örnekte border kısmı kısaltılmış bir CSS özelliğidir. Yani, yukarıda saydığımız tüm border özelliklerini tek tek eklemek yerine tek bir ifade bütün özellikleri sırayla ekleyerek kullanabiliyoruz. Buda bizi gereksiz ve kalabalık bir kod yazımından kurtarıyor.

Örneği inceleyecek olursak 2px kısmı bizim kenarlığımızın border-width özelliğine denk geliyor yani birnevi kalınlığını belirtmiş oluyoruz. solid yazan kısım ise en başta anlattığımız border-style özelliğinsen solid (düz çizgili kenarlık) özelliğine denk geliyor.  red kısmı ise kenarlığın renginin kırmızı olduğunu belirtmiş oluyoruz.

Border-radius (Yumuşak ya da Hafif Yuvarlak Kenarlık)

Normalde elementlere kenarlık (border) verildiğin de bu borderlar köşelidir.CSS3 ile birlikte gelen bu özellik kenarları yuvarlatmak ya da yumuşatmak için kullanılır.Sadece kenarlık için değil  html elementine de verilebilir.

Örnek Kullanımı:

[syntax type=”css”]

p {border-radius: 3px; }

[/syntax]

CSS’de Kenarlık Yapımı nda anlatacaklarım bu kadardı. Henüz css ile gelişmiş bir kod yazımına başlamadık bunlar en temelde bilinmesi gereken konular olduğu için kısa ve öz bir şekilde anlatarak geçiyorum. Bunları bilmezsiniz ya da ne olduklarını,nasıl kullanıldıklarını bilmezseniz CSS ile bir tasarım yapmakta zorlanırsınız. Bundan dolayı bu yazıları dikkatli ve anlayarak okumaya çalışın ve mutlaka örnekler yaparak anladıklarınızı pekiştirin. Bir sonra ki CSS ders yazımda görüşmek dileği ile hoşcakalın.

Bir önceki yazım olan CSS Dersleri 4: Arkaplan (Background) Özellikleri başlıklı yazımda CSS'de Arkaplan Özellikleri, CSS'de Arkaplan Resmini Konumlandırma ve CSS'de Arkaplana Eklenen Resmi Sabitlemek hakkında bilgiler verilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir