Dasar-Dasar CSS. Cara Mendaftar Rounded Corners On Images # 2

5Dasar-Dasar CSS. Cara Mendaftar Rounded Corners On Images # 2

Dalam posting sebelumnya saya telah menyebutkan bahwa kita akan belajar untuk gambar bulat dengan menggunakan CSS, tanpa perlu mengeditnya satu per satu menggunakan program. Sekarang kita telah melihat dasar-dasar CSS, mari kita coba untuk diterapkan pada beberapa gambar.

Apa yang akan kita lakukan adalah meng-upload gambar seperti biasa (HTML) dan kemudian menambahkan beberapa aturan dalam style sheetkami yang akan mengubah bentuk luar sebagai lingkaran ... atau setidaknya muncul bulat. Ini akan tergantung pada proporsi gambar yang kita gunakan.

Bahkan, kita dapat menerapkan efek ini untuk gambar apapun, untuk semua wilayah atau semua di blog kita. Itu tergantung pada selera Anda.

Menandai HTML

Jelas hal pertama yang kita butuhkan untuk dalam rangka untuk melengkapi gambar adalah idem. Kode bisa lebih rumit, tapi gambar dibangun dalam tag img dan pada dasarnya terlihat seperti ini:

 <img src=" IMAGE_URL "/>

Screenshot:

Ini adalah bagaimana kita membuatnya terlihat seperti salah satu dari kiri.Biasanya, hal itu juga harus menjaga teks alt dan kadang-kadang membawa beberapa dimensi paksa (dengan lebar dan / atau tinggi). Ketika Anda meng-upload gambar, kode di dalam editor Blogger juga berisi link yang menunjuk ke gambar asli.

Tetapi jika kita ingin memodifikasi gambar ini menggunakan CSS, kita perlu untuk memasukkan pemilih kelas. Kita bisa menambahkannya dengan dua cara: dalam tag img atau kotak orangtua. Nama yang saya telah memilih untuk pemilih adalahroundedcorners:

 roundedcorners <img class=" "src=" IMAGE_URL "/>

 <div class=" roundedcorners ">
<img src=" IMAGE_URL "/>
</ Div>

Menerapkan gaya semua elemen homogen

Tapi pemilih itu sendiri akan melakukan apa-apa. Ini perlu dikaitkan dengan aturan gaya yang menceritakan apa yang harus dilakukan dengan hal itu. Sebanyak kita menambahkan kelas, jika ini tidak didefinisikan dalam CSS, tampilan gambar (atau elemen tertentu) tidak akan berubah.

Untuk mengubah bentuk semua gambar di blog kita, ini akan menjadi apa yang harus kita tambahkan ke CSS kami:

 img {
border: 2px solid # BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-Moz-border-radius: 900px;
}

Dan bagaimana hal itu diterjemahkan ke browser Anda? Sebagai berikut:

Mencari gambar dengan tag nama (img) dan menerapkan gaya berikut:

• perbatasan hijau solid 2 piksel
• margin (ruang di luar perbatasan) dan padding (ruang di dalam perbatasan) diatur ke nol
• gambar bulat di empat penjuru

Sekarang bahwa kita memiliki aturan ini dalam style sheet kita sendiri, kita dapat melihat gambar seperti yang kita inginkan - lihat contoh di sebelah kanan.

Untuk mendeklarasikan properti dengan benar, kita perlu tahu apa yang dilakukan dan bagaimana menulis dan Anda dapat menemukan info lebih lanjut di banyak tempat, meskipun W3C adalah otoritas dalam hal ini.

Misalnya border-radius membutuhkan awalnya 4 nilai membaca dari kiri ke kanan yang mewakili kebulatan dari kiri atas, kanan atas, kanan bawah dan sudut kiri bawah. Jika Anda menempatkan nilai tunggal dipahami bahwa keempat akan sama dengan itu.

Anda juga harus tahu bahwa ketika nilai perbatasan melebihi dimensi kotak, perbatasan ini disesuaikan dengan bentuk lingkaran.

Cara Mendaftar Style t o t ia Elemen t dia S kunci B ame

Tapi tentunya kita tidak ingin semua gambar blog menjadi bulat, tetapi hanya mereka yang kita pilih, jika tidak menambahkan gaya di atas pada tag kepala akan membuat semua gambar blog kita untuk mengambil bentuk ini.Sebelum kita menggunakan tag HTML (img) dan bukan pemilih dan itulah sebabnya gaya akan mempengaruhi semua gambar.

Untuk menghindari hal ini, kita dapat melakukan salah satu hal yang kita lihat di awal dan itu untuk menempatkan gambar di dalam div dengan kelas roundedcorners. Dengan cara ini, hanya gambar yang berada dalam kotak dengan kelas yang akan terpengaruh oleh aturan yang akan membuat mereka bulat.

 <div class=" roundedcorners "> <img src=" IMAGE_URL "/> </ div>

Tapi aturan itu tidak boleh menyerang tag img langsung, tetapi roundedcorners pemilih. Dalam hal ini, Anda harus menulis seperti ini:

 . Roundedcorners img {
border: 2px solid # BADA55;
....
}

Ini berarti bahwa gaya ini hanya berlaku untuk gambar yang berada dalam kotak dengan kelas roundedcorners.

Bagian terakhir dr suatu karya sastra 

Untuk menutup subtopik gambar pembulatan, Anda harus diingat bahwa jika ini tidak persegi, bukan menjadi lingkaran, mereka akan terlihat oval.

Untuk mengatasinya kita harus menambahkan lebar dan tinggi dengan ukuran yang sama (nilai dalam pixel), yang memaksa gambar tanam dan untuk membuatnya tampak benar-benar bulat. Itu saja!

Jika Anda menikmati membaca blog ini, silakan berbagi dan berlangganan. Untuk setiap pertanyaan, drop komentar di bawah ini ;)