 |
| Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata # 2 |
Dalam Posting Sebelumnya Saya telah menyebutkan bahwa kita akan belajar tentang cara membuat gambar bulat menggunakan CSS, tanpa perlu mengedit satu per satu menggunakan program. Sekarang kita telah melihat dasar-dasar CSS, mari kita coba untuk menerapkannya pada beberapa gambar.
Apa yang akan kita lakukan dalam tutorial ini adalah untuk meng-upload gambar (HTML) dan kemudian menambahkan beberapa aturan dalam stylesheet yang akan mengubah bentuk luar terlihat seperti lingkaran ... atau, setidaknya, untuk tampil putaran. Ini akan tergantung pada proporsi gambar yang akan kita gunakan.
Bahkan, kita dapat menerapkan efek ini untuk gambar apapun, untuk bagian tertentu dari blog kita atau untuk semua gambar yang ditemukan di blog kami. Hal ini tergantung pada selera Anda.
Menandai HTML
Jelas, hal pertama yang perlu kita lakukan dalam rangka untuk menetapkan batas bulat sekitar gambar adalah untuk mendapatkan gambar dan meng-upload untuk mendapatkan struktur html. kode bisa menjadi sedikit lebih rumit, tetapi gambar dapat dibangun dalam tag img, yang pada dasarnya, terlihat seperti ini:
<img src="image_URL"/>
Screenshot
 |
| Dashbboard blogger |
Menambahkan kode ini di dalam HTML pos dengan url gambar kita - bukan teks warna biru – tapi kita akan dapat menampilkannya seperti gambar ini di sebelah kiri.
Biasanya, itu juga mungkin berisi teks alt, dan kadang-kadang, mungkin memiliki beberapa dimensi yang telah ditentukan (dengan lebar tertentu dan / atau tinggi). Ketika kita upload gambar menggunakan editor posting Blogger, kode ini juga akan memiliki link yang menunjuk ke gambar asli.
Tetapi jika kita ingin memodifikasi gambar ini menggunakan CSS, kita perlu menambahkan pemilih kelas. Kita bisa menambahkannya dalam dua cara: dalam tag img . Nama yang telah saya pilih untuk pemilih gambar sudut tumpul, namun, Anda dapat menambahkan nama yang Anda inginkan:
<img class="roundedcorners" src="image_URL"/>
<div class="roundedcorners">
<img src="image_URL"/>
</div>
Menerapkan Gaya ke Semua Elemen Yang Sama
Tapi pemilih itu sendiri tidak akan melakukan sesuatu yang istimewa. Perlu dikaitkan dengan aturan gaya memberitahu apa yang harus dilakukan dengan itu. Sama jika ketika kita menambahkan hanya kelas, jika ini tidak didefinisikan dalam CSS, penampilan gambar (atau elemen tertentu) tidak akan berubah.Untuk mengubah bentuk dari semua gambar pada blog kita, ini adalah apa yang harus kita tambahkan ke CSS kami:
img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 1000px;
-moz-border-radius: 1000px;
}
Dan bagaimana ini diterjemahkan ke browser Anda?
Mencari gambar dengan nama tag img dan menerapkan gaya berikut:
• Perbatasan hijau solid 2 piksel
• Mengatur margin (ruang di luar perbatasan) dan padding (ruang di dalam perbatasan) ke nol
• Menerapkan bulat sudut tampilan untuk semua empat penjuru
Sekarang kita memiliki aturan ini dalam lembar gaya kita sendiri, saya akan dapat melihat gambar seperti yang kita inginkan - lihat gambar di sebelah kanan.
Untuk mendeklarasikan properti dengan benar, kita perlu tahu apa yang dilakukan dan bagaimana menulis itu dengan rincian yang dapat ditemukan di seluruh internet, meskipun W3C adalah otoritas dalam hal ini.
Misalnya, properti border-radius awalnya memerlukan empat (4) nilai-nilai membaca dari kiri ke kanan, yang mewakili kebulatan dari, kanan kiri atas, kanan bawah dan sudut kiri bawah. Jika Anda menambahkan ini, itu akan membuat semua empat penjuru untuk menjadi setara dengan nilai tersebut.
Hal ini penting untuk menyebutkan bahwa ketika nilai perbatasan melebihi dimensi wadah, perbatasan ini akan membuat lingkaran.
Bagaimana Menerapkan Gaya Yang Sama
Kadang-kadang, kita tidak ingin semua gambar di blog kita untuk menjadi bulat, kecuali hanya orang-orang yang kita pilih untuk melihatnya, jika tidak menambahkan gaya di atas dalam tag head akan membuat semua gambar menjadi beda. Sebelum, kami menggunakan HTML tag img, bukan untuk memilih melainkan , untuk alasan ini, gaya akan mempengaruhi semua gambar kami.Untuk menghindari hal ini, kita dapat melakukan salah satu hal yang kita lihat di awal posting ini dan itu untuk menempatkan gambar di dalam div dengan kelas roundedcorners. Dengan cara ini, hanya gambar dalam wadah dengan kelas yang akan terpengaruh oleh aturan yang akan membuat mereka bulat.
<div class="roundedcorners"><img src="image_URL"/></div>
Tapi aturan itu seharusnya tidak mempengaruhi tag img langsung, tapi pemilih roundedcorners. Dalam hal ini, Anda harus menulis seperti ini:
.roundedcorners img {
border: 2px solid #BADA55;
....
}
Ini berarti bahwa hanya berlaku untuk gambar yang berada dalam wadah dengan kelas roundedcorners.
Akhir Kata
Untuk mengakhiri tutorial ini untuk menciptakan gambar dengan batas bulat, perlu diingat bahwa jika ini tidak persegi, bukannya menjadi melingkar, mereka akan terlihat oval:
Untuk memperbaiki ini kita harus menambahkan lebar dan tinggi dengan ukuran yang sama (nilai dalam pixel) untuk memaksa tanam gambar dan untuk membuatnya tampak sempurna melingkar. Itu saja!
Jika Anda menikmati membaca blog ini, silakan berbagi dan berlangganan. Untuk setiap pertanyaan, drop komentar di bawah ini
EmoticonEmoticon