CSS BORDER ÖZELLİKLERİ

CSS BORDER ÖZELLİKLERİ

Tarhi : 15-05-2017 06:57:10 | Yazar : ÇAĞLAR BOSTANCI

BORDER ÖZELLİKLERİ

Html elementlerinden neredeyse hepsinin border yani kenar çizgisi özelliği bulunmaktadır. Bu bölümde css ile elementlere ve diğer nesnelere nasıl kenaralık özelliğini verildiğini aynı zamandan kenarlık sitillerini anlatacağım.Border özelliğini html elementlerinden table elementi için kullanıyorduk. Bu elementin özelliğini verdiğimizde tablonun dört bir köşesine bir kenarlık eklemekteydi. CSS border özelliğinde ise bunu daha kapsamlı bir şekilde yapabiliri. Örneğin css ile bütün kenaralıkları değilde sadece alt kenarlık vermeyi, kenarlıklara değişik sitiller ve resimler eklemeyi hatta daha estetik 3D görünüm vermemizi sağlamaktadır. Aşağıda kenarlıkla ilgili css kodları ve onların açıklamaları bulunmaktadır. Bu örneklere ek olarak her birine ayrı ayrı örneklemler vermeyi düşünüyorum. Şimdiden başarılar.

border-style Özelliği

Kenarlık stilini tanımlamamızı sağlar aşağıda stiller ve açıklamaları aynı zamanda örneklemleri verilmiştir.

border-style Örneği

ÜÇGEN TASARLAMA

Yukarı gösteren üçgen örenği

CSS BİLGİ BALONU YAPIMI

border-radius KULLANIMI

Elemenlere tanımlanan border özelliğinde kenarlıkların keskin bir şekilde oluşmaktadır. Bu köşelerin daha estetik bir şekilde sunulmasını istiyorsak border-radius özlliğini kullanarak tam köşeli değil oval bir şekilde olmasını sağlayabiliriz. CSS3 ile birlikte gelen border radius özelliği popüler tüm tarayıcılar tarafından desteklenmektedir. Örnek kullanımı aşağıdaki gibidir.

DÜŞÜNCE BALONU ÖRNEĞİ

box-shadow ÖZELLİĞİ

Kutu gölgelendirme metodudur. Gölge rengini uzaklık ve yakınlıklarını belileyebileceğimiz bir metoddur. Bu sayede daha estetik görüntü sunulabilmektedir.

ÖRNEK KULLANIM

ÖRNEK 2

 

Reklam Alanı