Bugüne kadar kullandığım ve tasarladığım temalarda yazı alanını hep bir çerçeve içine almayı tercih etmişimdir.Yazılarım genelde uzun, görselerle destekli ve kod içeren yazılar olduğu için Resimli Devamını Oku eklentisi kullanarak ana sayfada yazının küçük bir bölümünü gösteriyorum ve bu bölümleri çerçeve içine alarak birbirinden ayırıyorum.
İletişim formundan bunun nasıl yapıldığını soran çok mesaj aldım.Bu yazıda yazılarınızı nasıl çerçeve içerisine alacağınızı ve bu çerçevelere nasıl stil vereceğinizi anlatacağım.
1. Klasik ve basit bir çerçeve ile başlayalım
İlk örnek en basit çerçeve örneği olsun.Resimde gördüğünüz gibi yazılarınızı 1 pixel kalınlığında siyah bir çerçeve içine almak için ]]></b:skin> kodundan önce şu kodu ekleyin:
.post { border:1px solid #000; padding:8px }
2. Çerçevenin kalınlığını ve rengini değiştirelim
İkinci örnekte çerçevinin kalınlığını 3 pixele çıkaralım ve rengini kırmızı yapalım.Bunun için kodları şu şekilde değiştiriyoruz:
.post { border:3px solid #ef1010; padding:8px }
3. Çerçeve şeklini noktalı yapalım
Üçüncü ve dördüncü örnekte çerçevenin şeklinde yapabileceğiniz değişiklikleri göstermek istiyorum.Öncelikle noktalı çerçeve yapalım.Örneğin çerçevemiz 2 pixel kalınlığında, siyah renkte ve noktalı olsun.Bunun için eklememiz gereken kod şu:
.post { border:2px dotted #000; padding:8px }
4. Çerçeve şeklini çizgili yapalım
Çerçevemizin şeklini noktalı yapmanın dışında bir başka sık kullanılan yöntem de çizgili yapmaktır.Bunun için de kırmızı renkli, 1 pixel kalınlığında ve çizgili bir çerçreve örneği verelim.Eklememiz gereken kod şu:
.post { border:1px dashed #ef1010; padding:8px }
5. Oval köşeli çerçeve yapalım
Bu ve bundan sonra göstereceğim örnekte kullanacağımız yöntem CSS3 olduğu için Internet Explorer gibi çağ dışı tarayıcılarda çalışmaz.Bu örnekte yazımızı 1 pixel kalınlığında, siyah renkli ve 10 pixel yarıçapında oval köşeli bir çerçeve içine alacağız.Eklememiz gereken kod şu:
.post { border:1px solid #000; padding:8px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }
6. Oval köşeli noktalı çerçeve yapalım
Son olarak oval köşeli çerçevinin şeklini noktalı , kalınlığını 2 pixel ve yarıçapını 20 pixel yapıp bir çerçeve oluşturarak yazıyı bitirelim.Ekleyeceğimiz kod şu:
.post { border:2px dotted #000; padding:8px;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px; }
Son Söz
Olayın mantığını anlamanız için bu kadar örneğin yeterli olduğunu sanıyorum.Bundan sonra kendiniz de çeşitli kombinasyonlar oluşturarak farklı çerçeveler kodlayabilirsiniz.Sormak istediğiniz bir şey olursa yorum yazarak sorabilirsiniz.Bu arada yazıyı oluşturmak için epey zaman harcadım.Faydalı bir yazı olduğunu düşünüyorsanız aşağıdaki paylaşım butonlrını kullanarak yazıyı paylaşın lütfen.
Hiç yorum yok: