Cara yang sangat sederhana untuk memutar elemen halaman situs web - cukup terapkan beberapa gaya css. Membiasakan diri dengan pelajaran ini akan memungkinkan Anda untuk menempatkan kipas kartu yang tidak dilipat, daun-daun jatuh yang berserakan, atau foto bergaya di album di halaman. Pelajaran ini berisi contoh penerapan album foto dan mempertimbangkan solusi untuk semua browser modern.
Itu perlu
Empat foto dengan lebar hingga 450px
instruksi
Langkah 1
Contoh ini akan fokus pada pembuatan halaman album bergaya dengan foto yang diputar.
Saya menyiapkan gambar terlebih dahulu (lebar 400px) dengan alamat:
Di masa mendatang, kami akan menetapkan ID ke gambar sesuai dengan namanya.
Langkah 2
Pertama, kita akan menyiapkan blok untuk album foto kita menggunakan tag div, dan juga menambahkan foto ke dalamnya menggunakan tag img (setiap gambar harus diapit tag div sendiri), seperti ini:
Harap dicatat bahwa kami telah menetapkan pengidentifikasi ke blok -. Dengan pengidentifikasi, kita dapat merujuk ke blok menggunakan css.
Langkah 3
Selanjutnya, Anda perlu mengatur gaya css ke blok. Daftar gaya: "posisi: relatif;" - akan mengatur asal dari sudut kiri atas blok kami; "margin: 50px otomatis;" - akan mengatur lekukan blok kami "50px" di atas dan di bawah sisa konten halaman, serta mengatur lekukan otomatis ke kanan dan kiri, sehingga menyelaraskan blok kami di tengah; "lebar: 900 piksel; tinggi: 650 piksel;" - akan mengatur lebar masing-masing menjadi 900px dan tinggi menjadi 650px.
Daftar gaya yang ditentukan harus ditempatkan dengan cara ini:
#foto_halaman {
posisi: relatif;
margin: 0 otomatis;
lebar: 900 piksel;
tinggi: 650 piksel;
perataan teks: tengah;
}
Perhatikan penggunaan "#photo_page" - ini adalah cara kami merujuk ke ID blok.
Langkah 4
Sekarang kita akan menetapkan gaya umum untuk setiap gambar di dalam blok photo_page. Ini adalah sudut membulat, batas abu-abu, latar belakang putih, bantalan, dan bayangan jatuh.
Ini akan menciptakan efek fotografi:
#foto_halaman img {
batas-radius: 7px;
perbatasan: 1px abu-abu solid;
latar belakang: #ffffff;
bantalan: 10 piksel;
kotak-bayangan: 2px 2px 10px #697898;
}
Perhatikan penggunaan "#photo_page img" - ini akan merujuk ke semua gambar di dalam blok photo_page
Langkah 5
Penting juga untuk menambahkan gaya pendek seperti ini:
#foto_halaman div {
mengapung: kiri;
}
Ini menyusutkan semua blok di dalam blok photo_page ke kiri.
Langkah 6
Tahap peralihan pelajaran sekarang telah selesai. Jika pekerjaan Anda mirip dengan gambar di tangkapan layar, maka Anda tidak melakukan kesalahan dan dapat melanjutkan ke langkah berikutnya.
Langkah 7
Sekarang kita beralih untuk memutar foto yang diposting. Untuk ini kita membutuhkan gaya transformasi. Saat ini, dalam bentuknya yang murni, itu tidak digunakan, tetapi hanya dengan awalan untuk setiap browser di awal, seperti ini:
-webkit-transform: memutar (nilai);
-moz-transform: memutar (nilai);
-o-transform: memutar (nilai);
Ini adalah gaya rotasi untuk browser: Google Chrome, Mazilla, Opera (masing-masing). Alih-alih kata "nilai", kami akan memasukkan angka dengan deg di akhir, seperti ini:
90deg - putar 90 derajat searah jarum jam.
-5deg - putar -5 derajat berlawanan arah jarum jam.
dll.
Langkah 8
Gaya untuk foto foto_1:
# foto_1 {
-webkit-transform: memutar (5deg);
-moz-transform: memutar (5deg);
-o-transform: memutar (5deg);
}
Gambar pertama diputar 5 derajat.
Langkah 9
Gaya untuk foto foto_2:
# foto_2 {
-webkit-transform: memutar (-3deg);
-moz-transform: memutar (-3deg);
-o-transform: memutar (-3deg);
}
Gambar kedua diputar -3 derajat.
Langkah 10
Gaya untuk foto foto_3:
# foto_3 {
-webkit-transform: memutar (-2deg);
-moz-transform: memutar (-2deg);
-o-transform: memutar (-2deg);
}
Gambar ketiga diputar -2 derajat.
Langkah 11
Gaya untuk foto foto_4:
# foto_4 {
-webkit-transform: memutar (8deg);
-moz-transform: memutar (8deg);
-o-transform: memutar (8deg);
}
Gambar keempat diputar 8 derajat.
Langkah 12
Mari kita lihat bagaimana Anda dapat memperbaiki posisi gambar. Misalnya, Anda ingin mengimbangi gambar pertama 20px dari atas dan 10px dari kiri. Dalam hal ini, Anda perlu menggunakan gaya margin. Inilah cara yang benar untuk menggunakannya untuk kasus kami:
# foto_1 {
margin: 20px -10px -20px 10px;
-webkit-transform: memutar (5deg);
-moz-transform: memutar (5deg);
-o-transform: memutar (5deg);
}
Harap dicatat bahwa nilai pertama dari gaya adalah margin atas; yang kedua adalah lekukan di sebelah kanan; yang ketiga adalah indentasi dari bawah; keempat - indentasi kiri.
Penting: dalam kasus kami, margin bawah sama dengan nilai negatif margin atas. Jika Anda melihat ruang putih di bawah gambar pada halaman Anda, cobalah untuk membuat indentasi lebih negatif di bagian bawah gambar.
Langkah 13
Pekerjaan selesai, saya memberikan tangkapan layar (dengan mempertimbangkan perubahan lekukan pada gambar pertama yang dijelaskan pada Langkah 12).
Tambahkan gaya lekukan ke gambar apa pun yang tidak sesuai dengan posisi Anda.
