25 Nisan 2013 Perşembe

Renkli Sevimli Kenarlık Yapma ♥

Herkese günaydın... :)
Şimdi size ister gönderi resimlerinde , ister alıntı yazılarında , ister widget'larda isterseniz normal bir yazıda renkli çerçeve yapmayı göstereceğim...
Önce çerçeveler hakkında bilgi vermek istiyorum.
Çerçeveler Cascading Style Sheets (CSS) ekleyerek değişir. Basit bir şekilde bunu özelleştirebiliriz...
İlk önce basit bir kaç çerçeve ve kodlarını göstereyim:



border: 1px solid red

border: 1px dotted orange

border: 2px dashed yellow

border: 3px double green

border: 5px groove blue

border: 3px inset indigo

border: 4px ridge violet

Şimdi de kendi özelleştirdiğim çerçeveye geçme zamanı...
]]></b:skin> kodunu bulun ve hemen üstüne aşağıda ki kodu ekleyin:

.post img{/* Gönderilerde ki resimler) */
border-left: 3px solid #D5BACB;
border-right: 3px solid #DEEEFE;
border-top: 3px solid #D1F5C7;
border-bottom: 3px solid #F2BFC8;
border-radius: 20px;/* İsteğe bağlı, resim yuvarlak oluyor üzerine geldiğinizde dikdörtgen */
}
.post img:hover{/* Üzerine geldiğinizde ki değişiklik.. */
border-top: 3px solid #D5BACB;
border-left: 3px solid #DEEEFE;
border-bottom: 3px solid #D1F5C7;
border-right: 3px solid #F2BFC8;
border-radius: 10px;/*Yuvarlak */
}
Gadget veya belirli alanlarda kullanmak için:
 .bordas{
border-left: 3px solid #D5BACB;
border-right: 3px solid #DEEEFE;
border-top: 3px solid #D1F5C7;
border-bottom: 3px solid #F2BFC8;
}
Başka bir kod:
  <div class="bordas">
Yazı buraya </div>
Hepsi bu millet. Sizde yaratıcılığınızı kullanarak bunun gibi çerçeveler yapabilirsiniz ^ . ^
Umarım işinize yaramıştır, görüşmek üzere! :)




Hiç yorum yok:

Yorum Gönder

Rainbow