Bir web sitesi sayfasının öğelerini döndürmenin çok basit bir yolu - sadece birkaç css stili uygulayın. Bu derse aşina olmak, sayfadaki bir albüme katlanmamış bir kart yelpazesi, dağılmış düşen yapraklar veya şık fotoğraflar yerleştirmenize izin verecektir. Ders, bir fotoğraf albümünün uygulanmasının bir örneğini içerir ve tüm modern tarayıcılar için çözümü dikkate alır.
Bu gerekli
450 piksele kadar genişliğe sahip dört fotoğraf
Talimatlar
Aşama 1
Bu örnek, döndürülmüş fotoğraflarla şık bir albüm sayfası oluşturmaya odaklanacaktır.
Adresleri ile önceden resimler (genişlik 400 piksel) hazırladım:
Gelecekte, resimlere isimlerine göre kimlikler atayacağız.
Adım 2
İlk olarak, div etiketini kullanarak fotoğraf albümümüz için bir blok hazırlayacağız ve buna img etiketini kullanarak da fotoğraflar ekleyeceğiz (her resim kendi div etiketi içine alınmalıdır), şöyle:
- bloğuna bir tanımlayıcı atadığımızı lütfen unutmayın. Tanımlayıcı ile css kullanarak bloğa başvurabiliriz.
Aşama 3
Ardından, css stillerini bloğa ayarlamanız gerekir. Stil listesi: "konum: göreceli;" - bloğumuzun sol üst köşesinden orijini ayarlayacaktır; "marj: 50 piksel otomatik;" - "50px" bloğumuzun girintisini sayfa içeriğinin geri kalanının üstünde ve altında ayarlayacak ve ayrıca otomatik girintiyi sağa ve sola ayarlayacak, böylece bloğumuzu merkeze hizalayacaktır; "genişlik: 900 piksel; yükseklik: 650 piksel;" - sırasıyla genişliği 900 piksele ve yüksekliği 650 piksele ayarlayacaktır.
Belirtilen stil listesi şu şekilde yerleştirilmelidir:
#photo_page {
pozisyon: göreceli;
kenar boşluğu: 0 otomatik;
genişlik: 900 piksel;
yükseklik: 650 piksel;
metin hizalama: merkez;
}
"#photo_page" kullanımına dikkat edin - blok kimliğine bu şekilde atıfta bulunuyoruz.
4. Adım
Şimdi photo_page bloğu içindeki her bir görüntü için genel stiller atayacağız. Bunlar yuvarlatılmış köşeler, gri kenarlık, beyaz arka plan, dolgu ve alt gölgedir.
Bu fotoğrafik bir etki yaratacaktır:
#photo_page resmi {
sınır yarıçapı: 7 piksel;
kenarlık: 1 piksel düz gri;
arka plan: #ffffff;
dolgu: 10 piksel;
kutu gölgesi: 2px 2px 10px # 697898;
}
"#photo_page img" kullanımına dikkat edin - bu, photo_page bloğu içindeki tüm resimlere atıfta bulunur
Adım 5
Bunun gibi kısa bir stil eklemek de önemlidir:
#photo_page div {
yüzer: sol;
}
photo_page bloğunun içindeki tüm blokları sola doğru küçültür.
6. Adım
Dersin ara aşaması artık tamamlanmıştır. Çalışmanız ekran görüntüsündeki resme benziyorsa, hata yapmamışsınızdır ve bir sonraki adıma geçebilirsiniz.
7. Adım
Şimdi yayınlanan fotoğrafları döndürmek için dönüyoruz. Bunun için dönüşüm stiline ihtiyacımız var. Şu anda, saf haliyle kullanılmamaktadır, ancak yalnızca başlangıçta her tarayıcı için bir önek ile şu şekildedir:
-webkit-transform: döndürme (değer);
-moz-dönüşüm: döndürme (değer);
-o-dönüşüm: döndürme (değer);
Bu, tarayıcılar için döndürme stilidir: Google Chrome, Mazilla, Opera (sırasıyla). "Değer" kelimesi yerine, sonuna derece ile aşağıdaki gibi bir sayı ekleyeceğiz:
90deg - saat yönünde 90 derece döndürün.
-5deg - saat yönünün tersine -5 derece döndürün.
Vb.
8. Adım
photo_1 için stil:
# fotoğraf_1 {
-webkit-dönüşüm: döndürme (5 derece);
-moz-dönüşüm: döndürme (5 derece);
-o-dönüştürme: döndürme (5 derece);
}
İlk görüntü 5 derece döndürülür.
9. Adım
Fotoğraf photo_2 için stil:
# fotoğraf_2 {
-webkit-dönüşüm: döndürme (-3 derece);
-moz-dönüşüm: döndürme (-3 derece);
-o-dönüşüm: döndür (-3 derece);
}
İkinci görüntü -3 derece döndürülür.
Adım 10
Fotoğraf photo_3 için stil:
# photo_3 {
-webkit-dönüşüm: döndürme (-2 derece);
-moz-dönüşüm: döndürme (-2 derece);
-o-dönüşüm: döndür (-2 derece);
}
Üçüncü görüntü -2 derece döndürülür.
11. Adım
Fotoğraf photo_4 için stil:
# photo_4 {
-webkit-dönüşüm: döndürme (8 derece);
-moz-dönüşüm: döndürme (8 derece);
-o-dönüşüm: döndür (8 derece);
}
Dördüncü görüntü 8 derece döndürülür.
Adım 1/2
Şimdi resimlerin konumunu nasıl düzeltebileceğinizi görelim. Örneğin, ilk resmi 20 piksel üstten ve 10 piksel soldan kaydırmak istiyorsunuz. Bu durumda, kenar boşluğu stilini kullanmanız gerekir. İşte bizim durumumuz için kullanmanın doğru yolu:
# fotoğraf_1 {
kenar boşluğu: 20px -10px -20px 10px;
-webkit-dönüşüm: döndürme (5 derece);
-moz-dönüşüm: döndürme (5 derece);
-o-dönüştürme: döndürme (5 derece);
}
Lütfen stilin ilk değerinin üst kenar boşluğu olduğunu unutmayın; ikincisi sağdaki girintidir; üçüncüsü alttan bir girintidir; dördüncü - sol girinti.
Önemli: Bizim durumumuzda, alt kenar boşluğu, üst kenar boşluğunun negatif değerine eşittir. Sayfanızda resmin altında beyaz boşluk görüyorsanız, resmin altına daha da olumsuz girinti yapmaya çalışın.
Adım 13
İş tamamlandı, bir ekran görüntüsü sağladım (12. adımda açıklanan ilk görüntünün girintisindeki değişikliği dikkate alarak).
Size uygun konumda olmayan tüm görüntülere girinti stili ekleyin.
