Sunday, May 7, 2017

Yorum yok

kod yayınlama kutusu özelleştirme

kodlarınız için size özel kod yayınlama kutucuğu

CSS gerektirmeden kod yayınlarınız için sadece html ile çalışan şık bir kod yayınlama eklentisini sizinle paylaşıyorum. Kodlar üzerinde değişiklik yapabilmeniz için html kodları üzerindeki birkaç özelliği size anlatayım.
kod yayınlama eklentisi
En güzel tarafı arka planına istediğiniz bir resim yerleştirip kodlarınızı bu resim üzerinde paylaşabilirsiniz.
pre {
   font-size: 12px;
   padding: 0;
   margin: 0;
   background: #f0f0f0;
   border-left: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   line-height: 20px;
   background: url(//img.webme.com/pic/-/-index-/pre_code_bg.gif) repeat-y left top;
   width: 600px;
   overflow: auto;
}
özellikleri:
  • font-size: kod alanı yazı boyutu
  • padding: kenar boşluğu
  • margin: kenar
  • background: arka fonu
  • background url: arka plan resmi
Bunlar değişiklik yapabileceğiniz önemli özellikleri. En iyi özelliği ise arka plan resim özelliği background: url(resim url) repeat-y left top;. Arka planında kullandığım resim kendi tercihim, resim boyutunda dikkatetmeniz gereken genişliğin 700px'in altında olmaması. Bunun dışında sadece html ile çalıştığı için her sayfa üzerine ayrı ayrı yerleştirmeniz.


0 yorum:

Post a Comment