Kayıtlar

CSS etiketine sahip yayınlar gösteriliyor

Mouse ile üzerine gelince değişen resim | HTML + CSS

Merhaba arkadaşlar.Uzun bir aradan sonra yeni bir paylaşım yapıyorum.Basit ama web sayfanizda kullanınca göze güzel görünecek bir özellikten bahsedeceğim.Özelliğimiz; Mouse ile resim üzerine gelince değişip üzerinden çekince eski haline gelen resimler. Bu özelliği menülerde,butonlarda yada resim paylaşımlarında kullanabilirsiniz. Hemen kodları deneyelim.Masaüstünüze index.html,resim1.jpg,resim2.jpg dosyaları ekleyin.Ardından not defteri ile index.html dosyasını açıp içine aşağıdaki kodları ekleyip kaydedelim. <html> <style> #degisenresim {     height: 70px;     width: 120px;     background-image: url('resim1.jpg'); } #degisenresim:hover {     background-image: url('resim2.jpg'); } </style> <img id="Library"> </html> Kodları kaydettikten sonra index.html dosyasını tarayıcı ile açtığınızda sayfada resim1.jpg'yi göreceksiniz üzerine mouse götürdüğünüzde resim1 kaybolacak yerine resim2.jpg görünecektir tekrar m
22 yorum
Devamı

CSS ile site arka plana resim ekleme veya rengini değiştirme

Site görüntüsünü en çok etkileyen faktörlerden biridir arkaplan.Tek resimle bile site tasarımını daha profesyonel göstermek mümkün olabilir.Bu işlerde eğer yeniyseniz ilk öğrenmeniz gereken şeylerden biri budur ama ben bunu paylaşmada geç kaldım sanırım :) Yine de yeni başlamış olanlar olacaktır aramızda onlara anlatmış olalım. Sitenin arkaplanına resim eklemek istiyorsanız background-image: url("resim adresi"); kodunu css dosyanızın body tag kısmına eklemeniz yeterli olacaktır.Background repeat ise resimin tekrar yapıp yapmayacağını belirtir.Bunu eklemezsek tek resim olarak görünür ve resim ekrandan küçük ise diğer kısımlar boş görünür.onun için sağa doğru ve aşağıya doğru tekrar ettirmek mümkün. Sağa doğru resmi tekrar ettirmek için; background-repeat: repeat-x; Aşağıya doğru tekrar ettirmek için; background-repeat: repeat-y; Sayfanın tamamını kaplaması için hem sağ hem aşağı doğru tekrar etmesi için ise; background-repeat: repeat; kodunu eklemek yeterlidir.Eğer re
Yorum Gönder
Devamı

Otomatik arka plan rengini değiştirme (Javascript & HTML)

Merhaba arkadaşlar.Bu konumuzda siteniz için otomatik olarak değişen site arka plan rengi nasıl yapılır onu göstereceğiz. Aşağıdaki javascript fonksiyon ile css ye komut vererek otomatik olarak sayfanin renk değiştirmesini sağlıyoruz.Süre ayarını kodların içindeki 5000 yazan kısmı değiştirerek yapabilirsiniz.5000=5 saniye. Kodları çalıştırmadım ama çalışıyor olması gerekiyor sorun yaşayanlar yorum yaparsa yardımcı olmaya çalışırım.İyi çalışmalar. <html> <head> <style> body { background: blue; /* initial color */ transition: background .5s; /* .5s how long transition should take */ } </style> <script> var colors = ['green', 'orange', 'blue']; var active = 0; setInterval(function(){ document.querySelector('body').style.background = colors[active]; active++; if (active == colors.length) active = 0; }, 5000);</script> </head> <body> </body> </html>
1 yorum
Devamı