Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
CSS Dersleri 5: Kenarlıklar (Borders)
CSS

CSS Dersleri 5: Kenarlıklar (Borders)

 01 Eki 2016
Makale YazarıHüseyin Körbalta
 Yorum Yok »

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

İçindekiler gizle

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.

 Yazı Etiketleri

 Yazı Bağlantısını Kopyala & Paylaş

 Facebook'da Paylaş  Twitter'da Paylaş  Linkedin'de Paylaş  WhatsApp İle Paylaş  Yazdır

Benzer Yazılar

  • En Popüler 5 CSS Kütüphanesi 2019

    En Popüler 5 CSS Kütüphanesi 2019

     Web geliştiricileri olarak işimizi büyük ölçüde kolaylaştıran CSS kütüphaneleri mevcut. CSS3 teknolojisinin ortaya çıkmasıyla kazanılan kolaylıklar bu CSS kütüphanelerinin artmasını sağladı. Kütüphanelerin çeşidi ve sayısı artıkça arayüz ya da bir değiş ile ön yüz geliştiricilerin işi bir hayli kolaylaştı. Projelerinizi çok daha etkin ve kolay yönetebilmenizi, efekt verebilmenizi sağlayan bu…
  • Sık Kullanılan CSS Ölçü Birimleri

    Sık Kullanılan CSS Ölçü Birimleri

     Yaklaşık 2 hafta önce bir start-up projesinde front end developer olarak işe başladım. Bu başladığım yeni proje tamamen özel yazılmış bir yazılım olduğu için tasarım yapısını, kodlama yapısını çözmem zamanımı aldı. Bir web arayüzü geliştiricisi için CSS'de ki "px" değeri can damarıdır tasarımın. Oluşturulmuş bir yapıyı alıp, ete kemiğe büründüren…
  • CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

    CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

     Selamlar, Daha önce ki CSS ders yazımda CSS'in text özelliğini, yazı özelliğini anlatmıştım. Önceki dersimizde yazılara biçim vermiştik, işte üstü çizili,altı çizili gibi bir takım text özellikleri anlatmıştım. Bu yazımda ise CSS'de Font Özellikleri ve Kullanımı anlatacağım. Daha önce ki css derslerim için buraya tıklayınız. CSS, font özellikleri metinlerin yazı tipi,kalınlık,boyut gibi…
  • CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

    CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

     Selamlar, Daha önce ki CSS yazımda sizlere width ve height değerlerinin kullanımını göstermiştim. Bu yazımda ise CSS'de Text (Metin) Özellikleri konusunu anlatacağım. Yazı olmadan bir website olmaz arkadaşlar, yazılar websitelerin yapı taşlarından bir tanesi ama önemli olan bir yapı taşıdır. Bu yüzden websitelerimizi hazırlerken dikkat etmemiz gereken husus text (metin)'lerdir.…
CSS Dersleri 5: Kenarlıklar (Borders) için Yorum'da Bulun

Bir Cevap Yaz

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

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.

Copyright © 2016- 2020 -  Hüseyin Körbalta Tüm Hakları Saklıdır.
Bu eser Creative Commons Atıf-GayriTicari-Türetilemez 4.0 Uluslararası Lisansı ile lisanslanmıştır. Bu lisansın kapsamı dışındaki izinler kullanım koşulları adresinde mevcut olabilir.