Cara Membuat Radius Image Di Blog WordPress – Salah satu cara untuk mempercantik tampilan blog yaitu dengan memberi radius atau sudut lengkung pada gambar blog. Di wordPress, untuk membuat radius image atau rounded corners image sangat mudah.
Hanya dengan menambahkan kode tambahan pada Additional CSS wordPress, maka seluruh gambar di blog akan memiliki sudut lengkung yang rapih. Selain itu, kita juga dapat membuat variasi radius image yang dibungkus border, shadow (bayangan) dengan warna-warna sesuai keinginan.
Tak hanya untuk featured image saja, namun rounded corners image atau radius image juga dapat dibuat pada tumbnail related post. Ingin tahu seperti apa cara membuatnya? Silahkan simak pembahasan berikut ini.
Cara Membuat Radius Image Di Blog WordPress
Berikut merupakan langkah-langkah membuat radius gambar di blog wordPress, mulai dari menambahkan kode CSS, border dan memberi efek shadow (bayangan).
1. Menambahkan Kode CSS
Kode CSS untuk membuat radius gambar atau rounded corners image adalah sebagai berikut:
| .post-thumb img, .single .entry-header .post-thumb img { border-radius: 8px; } |
Sesuaikan sudut yang diinginkan. Semakin besar angkanya, maka gambar akan semakin terlihat bulat.
2. Menambahkan Border Image
Jika ingin menambahkan border atau garis tepi pada radius gambar, maka kode CSS-nya menjadi seperti ini:
| .post-thumb img, .single .entry-header .post-thumb img { border-radius: 8px; border: 1px solid grey; } |
Sesuaikan ketebalan border. Semakin besar angkanya, maka semakin tebal
Pilih jenis border yang diinginkan. Jenis-jenis kode border adalah sebagai berikut:
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset
Untuk memilih warna, bisa menggunakan nama warna (in english), kode warna, rgb(), rgba(), dan lainnya.
3. Memberi Efek Bayangan
Untuk memberi efek bayangan pada radius gambar, kode CSS-nya seperti ini:
| .post-thumb img, .single .entry-header .post-thumb img { border-radius: 8px; border: 1px solid grey; box-shadow: 3px 2px 5px #ababab; } |
Kode efek bayangan memiliki 4 nilai yang harus disesuaikan, yaitu:
| box-shadow: x y z warna |
- Nilai x untuk menentukan arah horizontal
- Nilai y untuk menentukan arah vertikal
- Nilai z untuk menentukan keburaman (blur) bayangan
- Kode warna, bisa menggunakan nama warna (in english) atau kode warna
Jika nilai x dan y negatif, maka bayangan akan mengarah ke atas. Sementara itu, nilai z tidak boleh negatif.
Demikianlah tutorial cara membuat radius image atau rounded corners image di blog wordPress. Semoga bermanfaat.
Baca Juga :
