Dasar-Dasar CSS. Cara Menerapkan Sudut Bulat Pada Gambar # 2 - Funkysst.com

Friday, February 23, 2018

Dasar-Dasar CSS. Cara Menerapkan Sudut Bulat Pada Gambar # 2

Avertisement
Avertisement
.saya telah menyebutkan bahwa kita akan belajar tentang bagaimana membuat gambar membulat menggunakan CSS, tanpa perlu mengeditnya satu per satu menggunakan sebuah program. Sekarang setelah kita melihat dasar-dasar CSS, mari kita coba aplikasikan pada beberapa gambar

Apa yang akan kita lakukan dalam tutorial ini adalah mengupload gambar (HTML) dan kemudian menambahkan beberapa aturan di stylesheet yang akan mengubah bentuk luarnya agar terlihat seperti lingkaran ... atau, paling tidak, untuk tampil bulat. Ini akan tergantung pada proporsi gambar yang akan kita gunakan.

Sebenarnya, kita bisa menerapkan efek ini ke gambar apapun, ke bagian tertentu dari blog kita atau ke semua gambar yang ada di blog kita. Hal ini tergantung selera Anda.

Menandai HTML

Tentunya, hal pertama yang perlu kita lakukan agar bisa mengatur border yang membulat di sekitar gambar adalah mendapatkan gambar dan mengunggahnya untuk mendapatkan struktur html. Kode itu bisa sedikit lebih rumit, tapi gambar dibuat dengan tag img , yang pada dasarnya, terlihat seperti ini:
<img src = " image_URL " />
Screenshot :



Menambahkan kode ini di dalam HTML pos dengan url gambar kita - alih-alih teks dengan warna biru - kita akan dapat menampilkannya seperti gambar ini di sebelah kiri.

Biasanya, mungkin juga berisi teks alt , dan terkadang, mungkin memiliki beberapa dimensi yang telah ditentukan (dengan lebar dan / atau tinggi tertentu). Saat mengunggah gambar menggunakan editor posting Blogger, kode tersebut juga memiliki tautan yang mengarah ke gambar asli.

Tapi jika kita ingin memodifikasi gambar ini dengan menggunakan CSS, kita perlu menambahkan pemilih kelas. Kita dapat menambahkannya dalam dua cara: dalam tag img atau dalam kotak induk. Nama yang telah saya pilih untuk pemilih gambar adalah roundedcorners , 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 homogen

Tapi pemilih itu saja tidak akan melakukan sesuatu yang istimewa. Ini perlu dikaitkan dengan peraturan gaya yang mengatakan apa yang harus dilakukan dengannya. Sama jika bila kita menambahkan hanya kelas, jika ini tidak didefinisikan dalam CSS, tampilan gambar (atau elemen tertentu) tidak akan berubah.

Untuk mengubah bentuk semua gambar di blog kita, inilah yang harus kita tambahkan ke CSS kita:
img {
border: 2px solid # BADA55;
margin: 0;
padding: 0;
border-radius: 1000px;
-moz-border-radius: 1000px;
}
Dan bagaimana ini diterjemahkan ke browser Anda?

Cari gambar dengan tag nama ( img ) dan terapkan gaya berikut:
  • batas hijau solid 2 piksel
  • atur margin (ruang di luar perbatasan) dan padding (ruang di dalam perbatasan) menjadi nol
  • Terapkan sudut bulat ke keempat penjuru
Sekarang kita memiliki peraturan ini di lembar gaya kita sendiri, kita akan dapat melihat gambar yang kita inginkan - lihatlah gambar di sebelah kanan.

Untuk menyatakan sebuah properti dengan benar, kita perlu tahu apa yang dilakukannya dan bagaimana cara menulisnya - rincian yang dapat ditemukan di seluruh internet, walaupun W3C adalah otoritas dalam hal ini.

Misalnya, properti border-radius pada awalnya membutuhkan empat (4) nilai pembacaan dari kiri ke kanan, yang mewakili kebalikan dari sudut kiri atas, kanan atas, kanan bawah dan kiri bawah. Jika Anda menambahkan satu nilai, itu akan membuat keempat sudut menjadi sama dengan nilai itu.

Penting untuk disebutkan bahwa bila nilai batas melebihi dimensi wadah, perbatasan ini akan menciptakan lingkaran.

Bagaimana menerapkan gaya yang sama pada t ia unsur t ia s kontainer ame

Terkadang, kita tidak ingin semua gambar di blog kita menjadi bulat, tapi hanya yang kita pilih, jika tidak menambahkan gaya di atas dalam head tag akan membuat semua gambar berbentuk seperti ini. Sebelumnya, kami menggunakan tag HTML ( img ) dan bukan pemilih dan, untuk alasan ini, gaya akan memengaruhi semua gambar kami.
Untuk menghindarinya, kita bisa melakukan salah satu hal yang kita lihat di awal posting ini dan itu adalah untuk menempatkan gambar di dalam sebuah div dengan kelas roundedcorners . Dengan cara ini, hanya gambar dalam wadah dengan kelas itu yang akan terpengaruh oleh aturan yang akan membuat mereka berputar.
<div class = " roundedcorners "> <img src = " image_URL " /> </ div>
Tapi aturannya seharusnya tidak mempengaruhi img tag secara langsung, tapi pemilih roundedcorners . Dalam hal ini, Anda harus menuliskannya seperti ini:
.roundedcorners img {
border: 2px solid # BADA55;
....
}
Ini menyiratkan bahwa gaya ini hanya berlaku untuk gambar yang berada dalam wadah dengan kelas roundedcorners.

Kata akhir

Untuk mengakhiri tutorial ini untuk membuat gambar dengan batas yang membulat, perlu diingat bahwa jika ini tidak persegi, alih-alih menjadi lingkaran, mereka akan terlihat oval:


Untuk memperbaiki ini kita harus menambahkan lebar dan tinggi dengan ukuran yang sama (nilai dalam piksel) untuk memaksa cropping gambar dan membuatnya tampak sempurna melingkar. Itu saja!

Jika anda senang membaca blog ini, silahkan share dan berlangganan. Untuk pertanyaan apa pun, turunkan komentar di bawah;)
Avertisement
Comments


EmoticonEmoticon