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.
Resimdede 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ü:
Ö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