CSS3 Tutorials Multi Background Yapımı

Yazı başlığındada belirtmiş olduğum gibi sayfanıza yazı girerken veya herhangi bir şekilde resimleri üst üste koymak isterseniz CSS3 buna olanak tanımaktadır.
Multiple Backgrounds yapımı oldukça basit bir kod kümesi sayesinde Png veya Jpg bir resminizin üzerine .png bir resminizi istediğiniz bölgesine yerleştirebilir,ve bu resmi yazınızın arka planı olarak kullanabilirsiniz.

CSS3 öğreniyoruz,öğrenmeye çalışıyoruz,Multiple background hoşuma giden bir CSS3 özelliği diyebilirim çünkü ben bunu imza olarak görüyorum.
Belki daha önce HTML kod sunan birçok sitede resim üzerine resim yerleştirme vs. gibi kodları görmüş ve kullanmış olabilirsiniz.Ama CSS3 kod kümeleri o kadar standart değil sizlere bunları değiştirme imkanları kendinize göre düzenleme imkanlarını rahatlıkla sunuyor ben dansla ilgili bir örnek göstermek istiyorum tabiki sizlerde bunu rahatlıkla kendinize göre düzenleyebilirsiniz.

#example1 {
width: 500px;
height: 250px;
background-image: url(Resminizin üzerine gelecek resim Urlsi), url(Arkaplan resminizin Urlsi);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

Yukarıdaki ufak kod
kümesi sayesinde                                                                                   Follow Me
bu şekilde yazılar hazırlayabilirsiniz.                                                       @Teknokirpi

Sanırım gereksiz diye düşünen arkadaşlar vardır.Sadece hoşuma gittiği ve ihtiyacı olabilecek arkadaşlarımız olabileceği ayrıcada sizlere'de kendimede CSS3'ü sevdirmeye çalıştığım için paylaştım umarım beğenirsiniz.

Bu kodları şablonunuzda sabit olarak kullanmak istiyorsanız  "/b:skin" kodlarından önce yapıştırınız.Veya sadece arada bir yazılarınızda kullanmak istiyorsanız aşağıdaki kod kümesini kullanınız.

<style>
#Multiplebackground {
width: 565px;
height: 354px;
background-image: url(Resminizin üzerine gelecek resim Urlsi), url(Arkaplan resminizin Urlsi);
background-position: right bottom, left top;
background-repeat: no-repeat;
}
</style>

<div class="Multiplebackground">

Yazılarınızı buraya yazabilirsiniz.

</div>


       

"Açıklamalar"




background-position: right bottom ( Küçük resminizin sağ alt köşede olmasını sağlar. )

background-position: right bottom, left top ; ( Yazılarınızın sol üst köşede olmasını sağlar. )

Rigt bottom kısımlarını "left bottom" ya da "center bottom" olarak değiştirebilirsiniz.

Left bottom ( Sol alt köşe ) Center bottom ( Alt orta )

Left top kısımlarını "right top" ya da "center top" olarak değiştirebilirsiniz.

Right top ( Sağ üst köşe ) , Center top ( Üst orta )

                                                                                                                Follow me !

Kolay gelsin ...

Be a Fan

Bu yazıyı oylamak istermisiniz ?