CSS Dersleri 5: Kenarlıklar (Borders)
CSS Dersleri 5: Kenarlık Yapımı (Border)
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 Dersleri 1: CSS Nedir ?
- CSS Dersleri 2: Söz Dizim Kuralları ve Seçiciler
- CSS Dersleri 3: Renklerin Kullanımı
- CSS Dersleri 4: Arkaplan (Background) Özellikleri
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’de Kenarlık Yapımı
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:
- border-color
- border-style
- border-width
Yukarıda sıraladığımız border özelliklerini sırasıyla açıklayıp, birer tane örnek ile anlatmaya çalışacağım.
Border-style (Kenarlık Biçimi)
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;
- solid -> Sade ve düz çizgi anlamına gelir yani şuan bu sitenin kenarlıkları solid kenarlıklardır. Dikkat ederseniz düz çizgi halindedir.
- dashed -> Kesik çizgi olarak tercüme edebiliriz. Yani solid’in aksine kesik kesik çizgilerden oluştur örnek (- – – – )
- dotted -> Kesik çizginin noktalı halidir. Nokta halinde kenarlıklar oluşturur. Örnek (……..)
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-top-style: -> Sadece üst kısıma kenarlık ekler.
- border-left-style: -> Sadece sol kısıma kenarlık ekler.
- border-bottom-style: -> Sadece alt kısıma kenarlık ekler.
- border-right-style: -> Sadece sağ kısıma kenarlık ekler.
Örnek Kullanımı: [syntax type=”css”]
Border-color (Kenarlık Rengi)
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;
- border-top-color: -> Sadece üst kısımda ki kenarlığa renk verir.
- border-left-color: -> Sadece sol kısımda ki kenarlığa renk verir.
- border-bottom-color: -> Sadece alt kısımda ki kenarlığa renk verir.
- border-right-color: -> Sadece sağ kısımda ki kenarlığa renk verir.
Örnek Kullanımı:
[syntax type=”css”]p {border-color: red green pink black; }
[/syntax]Border-width (Kenarlığın Genişliği)
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;
- border-top-width: -> Sadece üst kısımda ki kenarlığın kalınlığını (genişliğini) belirler.
- border-left-width: -> Sol kenarlık
- border-bottom-width: -> Alt kenarlık
- border-right-width: -> Sağ kenarlık
Ö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.
Border-radius (Yumuşak ya da Hafif Yuvarlak Kenarlık)
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ş
Benzer Yazılar
-
En Popüler 5 CSS Kütüphanesi 2019
Web geliştiricileri olarak işimizi büyük ölçüde kolaylaştıran CSS kütüphaneleri mevcut. CSS3 teknolojisinin ortaya çıkmasıyla kazanılan kolaylıklar bu CSS kütüphanelerinin artmasını sağladı. Kütüphanelerin çeşidi ve sayısı artıkça arayüz ya da bir değiş ile ön yüz geliştiricilerin işi bir hayli kolaylaştı. Projelerinizi çok daha etkin ve kolay yönetebilmenizi, efekt verebilmenizi sağlayan bu… -
Sık Kullanılan CSS Ölçü Birimleri
Yaklaşık 2 hafta önce bir start-up projesinde front end developer olarak işe başladım. Bu başladığım yeni proje tamamen özel yazılmış bir yazılım olduğu için tasarım yapısını, kodlama yapısını çözmem zamanımı aldı. Bir web arayüzü geliştiricisi için CSS'de ki "px" değeri can damarıdır tasarımın. Oluşturulmuş bir yapıyı alıp, ete kemiğe büründüren… -
CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı
Selamlar, Daha önce ki CSS ders yazımda CSS'in text özelliğini, yazı özelliğini anlatmıştım. Önceki dersimizde yazılara biçim vermiştik, işte üstü çizili,altı çizili gibi bir takım text özellikleri anlatmıştım. Bu yazımda ise CSS'de Font Özellikleri ve Kullanımı anlatacağım. Daha önce ki css derslerim için buraya tıklayınız. CSS, font özellikleri metinlerin yazı tipi,kalınlık,boyut gibi… -
CSS Dersleri 9: CSS’de Text (Metin) Özellikleri
Selamlar, Daha önce ki CSS yazımda sizlere width ve height değerlerinin kullanımını göstermiştim. Bu yazımda ise CSS'de Text (Metin) Özellikleri konusunu anlatacağım. Yazı olmadan bir website olmaz arkadaşlar, yazılar websitelerin yapı taşlarından bir tanesi ama önemli olan bir yapı taşıdır. Bu yüzden websitelerimizi hazırlerken dikkat etmemiz gereken husus text (metin)'lerdir.…
Bir Cevap Yaz