Herhangi Bir Alanda Kenarlık ve Arkaplan Nasıl Düzenlenir

Bildiğiniz gibi blogger kod yapısı olarak CSS (Cascading Style Sheets) kod yapısını kullanmakta ve blogunuzun herhangi bir alanını (header,sidebar veya footer gibi ) bu kod yapısına uygun değerleri girerek düzenleyebiliyorsunuz. İyi bir tasarım için elbette CSS bilgisine ihtiyacımız var fakat en temel şeylerden olan kenarlık belirleme yapısını CSS de nasıl yapabiliriz en basit şekliyle sizlerle paylaşmak istedim.Sidebar, Header,Footer ya da oluşturduğunuz herhangi bir tablo yapısında kenarlıkları nasıl belirler nasıl renklerini değiştirebilirsiniz onu bu yazımda bulabilirsiniz.

İlk olarak border ya da Türkçe ifadeyle kenarlık koduna neden ihtiyaç duyarız?Şöyle ki tasarımda önemli yerleri birbirinden ayırmak ya da önemli yerlere vurgu yapabilmek için kenarlık belirlemeye ihtiyaç duyarız.Şimdi birlikte örneklere göz atalım  :

border-kenarlik

İlk örnekte en basitçe kenarlık kırmızı olan bir kutu oluşturalım :

border:2px solid #ff0000;

Bu kutunun kenarlıklarına farklı stiller kazandırabilirsiniz.Örneğin noktalı—kesik çizgili gibi.Aşağıdaki örneği kontrol edin.

border:4px dashed #6A0888;

 

border:4px dotted #5FB404;

 

border:4px double #FF8000;

yukarıdaki örneklerde çerçevenin tüm kenarlarına müdahele ettik.Tabii sadece bir kenara müdahale etmek de isteyebilirsiniz.Burada yapmanız gerek border terimine – işareti ile birlikte konum belirtmek.Örneğin:

border-bottom:Alt kenar

border-top:Üst kenar

border-left:Sol Kenar

border-right:Sağ kenar

border-left:4px solid #FF8000;

Aynı zamanda oluşturduğunuz bu kenarlıklar alanı için arkaplan da ekleyebilirsiniz.Bunun için yapmanız gereken şey sadece background kodunun yanına gerekli renk kodunu belirtmek.Örneğin :

border:4px double #FF8000;
background:#666666;

Evet yukarıda herhangi bir alanın kenarlık ve arkaplanını nasıl değiştirebiliriz en basit yapılarla sizlerle paylaştım.Burdaki kodları herhangi bir gadget ı düzenlerken kullanabilirsiniz.Örneğin şablonunuzda yer alan #sidebar-wrapper, #header-wrapper gibi kısımların kenarlık ve arkaplanını yukarıdaki kodlara uygun olarak düzenleyebilirsiniz.Yapmanız gereken bu kod satırlarını bulup örneklerdeki kodları eklemek.En sık karşılaştığım kod yapıları ile ilgili sizlerle paylaşımda bulunmaya devam edeceğim.Ehl-i Blog u takip etmeye devam edin…

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

2 yorum:

  1. ben bunları yazılara uyarlamak istiyorum..belirli yazıları böyle çerçeveye eklemek istiyorum..bunun için ne yapabilirim?

    YanıtlaSil
    Yanıtlar
    1. bunu yapmak için yazının içine html div kodları ekleyerek yapabilirsiniz.
      Burdaki yazımı okuyun : http://www.ehliblog.com/2012/10/her-yazi-farkli-arkaplan.html, tırnak içindeki alana yukarıdaki border kodlarını ekleyin

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.