jQuery ile Rastgele Yazı ve Background Renkleri
İlk olarak renk şablonumuzu hazırlayalım. İstediğiniz tüm renkleri array içerisine ekleyebilirsiniz. Hex, RGB ve HSL gibi tüm renk tanımlarını destekleyecek bu yapıya 20 adet flat renkten oluşan aşağıdaki şablonu da dahil edip bu adımı hızlıca geçebilirsiniz.
Kullanacağımız flat renkler şöyle :
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.
Şimdi fonksiyonumuzu sitemizin alt kısmına, jQuery’nin de altına ekleyerek sayfamıza dahil edelim.
Artık web sayfanızdaki herhangi bir elemanı selector öğesiyle çağırarak arkaplan ve yazı tipi rengi tanımlayabilirsiniz. Kullanım şekli en basit haliyle şöyle :
İlk olarak renk şablonumuzu hazırlayalım. İstediğiniz tüm renkleri array içerisine ekleyebilirsiniz. Hex, RGB ve HSL gibi tüm renk tanımlarını destekleyecek bu yapıya 20 adet flat renkten oluşan aşağıdaki şablonu da dahil edip bu adımı hızlıca geçebilirsiniz.
Kullanacağımız flat renkler şöyle :
- #1abc9c
- #2ecc71
- #3498db
- #9b59b6
- #34495e
- #16a085
- #27ae60
- #2980b9
- #8e44ad
- #2c3e50
- #f1c40f
- #e67e22
- #e74c3c
- #ecf0f1
- #95a5a6
- #f39c12
- #d35400
- #c0392b
- #bdc3c7
- #7f8c8d
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.
PHP Kod:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Şimdi fonksiyonumuzu sitemizin alt kısmına, jQuery’nin de altına ekleyerek sayfamıza dahil edelim.
PHP Kod:
function color(element, attribute) {
var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];
var getRandom = colors[Math.floor(Math.random() * colors.length)];
if (attribute == 'color') {
$(element).css('color', getRandom);
} else {
$(element).css('background-color', getRandom);
}
}
Artık web sayfanızdaki herhangi bir elemanı selector öğesiyle çağırarak arkaplan ve yazı tipi rengi tanımlayabilirsiniz. Kullanım şekli en basit haliyle şöyle :
PHP Kod:
color('body','background'); // Sayfa arkaplan rengini rasgele değiştirir.
color('body','color'); // Sayfa yazı rengini rasgele değiştirir.
color('.menu','color'); // Menü classına sahip elemanın yazı rengini rasgele değiştirir.