+90 535 297 51 48 - (212) 268 10 24

Sosyal Medyada Biz}

3 Adımda CSS ile Otomatik Değişen Arka Plan Yapmak

3 Adımda CSS ile Otomatik Değişen Arka Plan Yapmak

CSS ile otomatik değişen arka plan yapmak için üç adet dosyaya ihtiyacımız var.

  1. images klasörü
  2. index.html dosyası
  3. style.css dosyası

İmages Klasör İçeriği

İmages klasörünün içine değişmesini istediğimiz resimleri koyacağız. Bu resimleri yeri geldikçe kodlar ile çağırarak kullanacağız.

Not: Resimlerin isimlerini kısa tutmanızı tavsiye ederiz. Çünkü böylelikle hem kod yazarken fazla uğraşmazsınız hem de site hızınız bir nebze olsun artar. Örnek olarak isimlerini “1” ve “2” gibi koyabilirsiniz.

 

index.html Dosya İçeriği

· Basit HTML Sayfa Örneği

<!DOCTYPE html>
<html lang=”tr”>
<head>
meta charset=”utf-8″>
<title>Başlığınızı Buraya Yazınız</title>
</head>
<body>
</body>
</html>

· CSS Dosya Çağırma Kodu

<link rel=”style.sheet” href=”style.css” type=”text/css” media=all”/>

style.css Dosya İçeriği

Css ile otomatik değişen arka plan resimleri yapmak için en önemli dosya style.css dosyasıdır. Bu dosyayı özel olarak ve adımlar halinde hazırlayacağız.

1.Adım

Body elementi ile gövdeyi oluşturacağız.

Body Kod İçeriği

body{

}

2.Adım

Css dosyamız ile images klasörü arasında bağlantı kuracağız ki yaptığımız kodlarda resimler bulunsun.

CSS Dosyasından Bir Klasör Nasıl Çağırılır?

Öncelikle dosyamıza arka plan kodu ekleyeceğiz ve sonra “url” kodu ile adresimizi girerek dosyamızı çağıracağız.

Arka Plan Kod İçeriği

bacground:url(“images/1.jpg”);

Url adresi style.css dosyasının bulunduğu klasörü baz alarakk çalışır. İmages klasörü ile style.css dosyasıda bir klasörde bulunduğu için direk adrese “images” diye başlıyoruz ve sonra “/” sembolünü ekleyerek resmin ismini uzantısı ile beraber yazıyoruz.

Not: “/” işareti her zaman dosyanın içine doğru gittiğinizi ifade eder.

3. Adım

Son adım olarak vereceğimiz css kod ile otomatik olarak değişen arka plan resimleri için adres ve zamanlamayı ayarlayacağız.

body{
bacground:url(“images/1.jpg”);
animation:image 10s infinite alternate;
-webkit-animation:image 10s infinite alternate;
-moz- animation:image 10s infinite alternate;
}
@keyframes image {
0%{
bacground:url(“images/1.jpg”);
}

25%{
bacground:url(“images/2.jpg”);
}

50%{
bacground:url(“images/3.jpg”);
}

75%{
bacground:url(“images/4.jpg”);
}

100%{
bacground:url(“images/5.jpg”);
}
}

  • Kalın olarak yazdığımız “10sn” yerlerini değiştirerek zamanlamayı hazırlayabilirsiniz.

· “images/5.jpg” yerlerinden ise resim isimlerini yazarak hangi resmin hangi sırada çıkacağını ayarlayabilirsiniz.

Bir önceki yazımız olan 6 Adımda Mobil Uygulama Tasarımı Arayüzü Nasıl Yapılır başlıklı makalemizi de okumanızı öneririz.

02 Kasım 2017
47 kez görüntülendi

ZİYARETÇİ YORUMLARI - 1 YORUM

  1. Muhammed dedi ki:

    Çok güzel bir anlatım olmuş, İnşallah devamı gelir

BİR YORUM YAZIN

rokettube hd porno