Mintik posted
4 year ago

Css border çeşitleri


Css ile websayfalarımızda hazırladığımız çerçevelere değişik görünümler verebilmek mümkün. Toplamda 8 adet şekilden oluşuyor, css3 te daha değişik stillerde var tabi ama bu konuyla alakası biraz farklı. Bu örnekler bütün web tarayıcılarında sorunsuz bir şekilde çalışmaktadır.
Yapacağınız çerçevelerde isteğinize bağlı olarak sağ, sol, aşağı yada yukarı çerçeve kenarlarının şekillerini kendinize göre belirleyebilirsiniz. Sadece şekiller değil tabi her kenara ayrı bir renk, her kenara ayrı bir stil ve her kenara ayrı bir çerçeve kalınlığı verebilirsiniz.

Karışık olarak renk, kalınlık ve şekil verdiğim bir  örnek kod:
.ornek_cerceve {
width: 200px; height: 200px; /* Genislik ve yukseklik ayari */
border-style: dotted groove ridge dashed; /* Kenar sekil ayari */
border-width: 15px 10px 5px 1px; /* Kenar kalinlik ayari */
border-color: #000 #06c #fc0 #0c0 /* Kenar renk ayari */
}

Bu şeklde vereceğiniz bir css ayarının ortaya çıkaracağı görünüm aşağıdaki resim gibi olacaktır.

Css  Çerçeve Şekillendirme | mintik.comResimdede  gördüğünüz  gibi  kullandığımız  css kodu  sayesinde  kutu modelimizin her  kenarına  ayrı bir  kalınlık, ayrı  bir  renk ve ayrı bir stil kazandırmışgörünüyor.

Birde her kenar  için aynı görünümü verelim şimdi.

Örnek  Kod  : .ornek_cerceve { width: 200px; height: 200px; border: dotted 10px #000 }
Yukarıdaki css kodumuz  sayesinde  oluşturacağımız çerçevenin görünümü:Css  Çerçeve Şekillendirme | mintik.com

Örnekleri daha  bir çok şekilde  göstererek çoğaltabilmemiz  mümkün. Aşağıda  verdiğim  demo linkinde css kutuların örneklerini bulabilirsiniz. Demo adresinde her kutunun css  kodunu  kutunun içine  yerleştirdim. Sadece işinize  yarayan kodu  alıp daha kolay şekild e kullanabilirsiniz. Örneklerin kenarları daha görünür  olsun diye 10px  olarak ayarladım. Kodların içerisinde 10px  yazan yerleri  bulup kendinize  göre  kutu kenarlarına  kalınlık ayarı verebilirsiniz.
Css kenar  şekillerinde kullanabileceğimiz  fonksiyonlar:

  • border: solid
  • border: dotted
  • border: dashed
  • border: groove
  • border: ridge
  • border: inset
  • border: outset
  • border-style: inherit
  • border: none

Demo : Css Çerçeve Şekilleri

Mintik is curious about your thoughts. Add a comment
Did you know that members who log in don't see ads?
Sign in with E-mail