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.
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’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:
Yukarıda sıraladığımız border özelliklerini sırasıyla açıklayıp, birer tane örnek ile anlatmaya çalışacağım.
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”]Burada dashed yazan kısıma verebileceğimiz birkaç tane parametre mevcuttur. Bunlar;
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-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”]Ö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;
Örnek Kullanımı:
[syntax type=”css”]p {border-color: red green pink black; }
[/syntax]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”]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;
Örnek Kullanımı:
[syntax type=”css”]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”]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.
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”]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ı Bağlantısını Kopyala & Paylaş
Bir Cevap Yaz