Css ile kenarlık (border) işlemleri
23 Aralık 2017 Furkan Atabaş 6.424 Okunma Yorum Yok

Css ile kenarlık (border) işlemleri


CSS (3)

atabasyazilim-css-kenarliklar-border-styleMerhabalar bugün ki konumuz css ile nesne kenarlıkları olacak. Css ile html nesnelerimize çeşitli renk ve şekillerde kenarlıklar eklememiz mümkündür. Bu işlemlerle html nesnelerinin %98 kadarlık bir bölümüne kenarlık işleyebiliriz. %98 gerçek bir analiz değil tabiki de kendim uydurdum 😀 ama şunu söyleyebilirim ki head etiketi dahil içerisinde yazılan meta nesneleri dışında ekranda görüntlene bilecek olan tüm nesnelere kenarlık css deki ismi ile border ekleyebiliriz.

Nesnelere ekleyebileceğimiz kenarlığın 3 css3 ile gelen +1 özelliği ile de toplamda 4 özelliği bulunmaktadır. Bu özellikler kenarlık şekli, genişliği, rengi ve köşelerin eğimidir.. Bu özelliklerin 3ünü  ayrı ayrı ekleyebileceğimiz gibi tek kodla da eklememiz mümkündür.

Kenarlık şekli ekleme: border-style: şekil;

Kenarlık genişliği belirleme: border-width: boyut;

Kenarlık rengini belirleme: border-color: renk;

Köşelerin eğimini ovalliği ayarlamak: border-radius: ölçü;

Şimdi en basit hali ile kodlarımızı örnek yazılım ile görelim.

Önce css seçicileri ile nesnemizi seçip daha sonra border özelliklerini nesnemize uygulayacağız.

 

 

Bu kodlar ile class ismi kutu olan nesnelere 5px kalınlığında kırmızı renk düz bir kenarlık eklemiş olduk. Şimdi birde 3 özelliği tek bir kodla nasıl yapacağımızı görelim

 

İstersek border etiketinden sonra top, tight, bottom ve left şeklinde yön belirterek sadece tek bir kenar için özellik belirtmiş olabilir. Örnek olarak biraz önce  yaptığımız işlemleri birde nesnenin sadece sol kenarına uygulayalım.

 

Şimdi de 3 özelliği sadece sağ kenara tek kodla ekleyelim.

Son olarak border-radiusu göstererek yazımı sonlandırıyorum.

Border radius kodu ile tek seferde 4 köşeyide oval yapabileceğimiz gibi her bir kenarı ayrı ayrıda ovalleştirebiliriz.