Cara Membuat Kotak Catatan dengan Efek Bayangan di Postingan Blog/Website

Ngopi sadayana! 😎

Well, waktu luang kali ini saya akan membahas bagaimana cara membuat kotak catatan dengan efek bayangan di postingan blog/website.

Kotak catatan atau kotak script atau disebut juga text box area fungsinya sama, yaitu : sebagai tempat meletakkan kode-kode script (khususnya buat arahan tutorial) atau tempat khusus poin-poin penting atau catatan penegasan pada postingan di blog, agar halaman posting telihat responsive.

Sehingga pesan ataupun informasi yang kita sampaikan dalam artikel tersebut dapat di mengerti dengan baik oleh pembaca.

Jadi ya, penting nggak penting! Kalau seseorang berminat berkecimpung dalam dunia karya tulis, terutama yang berhubungan dengan dunia teknologi informasi. Kita perlu (wajib) mempunyai sedikit keahlian yang bisa kita aplikasikan pada artikelnya.

Setidaknya dari hal-hal kecil. Seperti judul thread di atas, cara membuat kotak catatan dengan efek bayangan di postingan blog. Ya, agar tulisan pada postingan kita lebih ada feel -nya gitu. Nggak mau kan blognya polos aje kyak gedebong pisang?? 😆

Pernah dong lihat kotak catatan dengan efek bayangan di beberapa artikelnya para Blogger? “PERNAH!!!”. Tapi bisa nggak bikinnya? “NGGAK!!”. Kalau belum bisa, sinih belajar yuk..

“Ini contoh kotak catatan dengan efek bayangan di postingan blog/website” – Rico Sihaloho

Keren yakan!! Semacam ilusi optik gitu..

Djujur! Awalnya saya kira ini sebuah gambar hasil sotoshop, yang kemudian di-upload. Sebagai pemilik blog gado-gado rasa pare, tentu saja hal tersebut menjadi suatu ancaman yang serius bagi saya pribadi. Kenapa yang lain bisa, saya nggak? Padahal platformnya sama – Think Big!!

So, what the next step?

“Jikalaupun saya akan mati esok hari,
saya akan tetap bahagia hari ini”
- Ngopi sadayana! 😎

Cari solusi.. googling-googling!

Caranya sebetulnya tidak terlalu sulit, tetapi tidak mudah juga. Minimal kita tahu apa itu arti kode script -nya, bagaimana memakainya dan apa fungsinya.

Cara membuat kotak catatan dengan efek bayangan di postingan blog, kita hanya perlu menambahkan kode script CSS (Cascading Style Sheet) pada tag <div> di HTML-nya, yaitu "box-shadow".

Apa itu box-shadow?

Box shadow (box-shadow) adalah salah satu properti bahasa program CSS3, dan box-shadow fungsinya untuk membuat efek bayangan pada sebuah element HTML.

Shorthand untuk box-shadow ini adalah

“box-shadow : [value] ;” atau  box-shadow : [h-shadow v-shadow blur spread color] ; 

Contoh penulisannya : box-shadow : 10px 10px 5px 7px red ;

Ket :

h-shadow : posisi dan besar bayangan horizontal

v-shadow : posisi dan besar bayangan vertikal

blur : besaran dan jarak blur (opsional)

spread : ukuran bayangan (opsional)

color : warna bayangan (opsional)

Oke daripada tambah puyeng. Langsung saja kita meluncur ke TKP.

Berikut ini cara membuat kotak catatan dengan efek bayangan di postingan blog, lihat kode script dan wujudnya di bawah ini. Check it out :

#. Mengatur posisi efek bayangan

Misalnya :  box-shadow : 10px 10px ; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kanan dan 10 pixel ke bawah.

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px, rgba(0, 0, 0, 0.118) 10px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Selanjutnya...

Kalau sobat ingin membuat bayangan ke arah kiri dan atas, kita tinggal menggunakan angka negatif (-) saja pada value -nya.

Misalnya :  box-shadow : -10px -10px ; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kiri dan 10 pixel ke atas. 

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) -10px -10px, rgba(0, 0, 0, 0.118) 10px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Next..

#. Mengatur efek blur bayangan

Selain posisi bayangan, kita juga bisa mengatur seberapa ‘samar’ bayangan yang ditampilkan. Dalam istilah design, ini dikenal dengan istilah blur.

Sebagai catatan "semakin tinggi nilai blur, semakin samar-samar bayangan yang ditampilkan".

Misalnya :  box-shadow : 10px 10px 15px; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kanan dan 10 pixel ke bawah dengan blur sebesar 15 pixel.

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px 15px, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Next..

#. Mengatur besar bayangan

Value berikutnya yang bisa di-input ke dalam properti box-shadow yaitu spread. Spread akan menentukan seberapa besar bayangan yang dibentuk.

Misalnya :  box-shadow : 10px 10px 0px 7px ; 

Maka akan menghasilkan efek bayangan akan terlihat lebih besar dari sebelumnya. Ini karena kita memberi spread dengan value sebesar 7 pixel.

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px 0px 7px, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Next..

#. Mengganti warna bayangan

Secara default bawaan web browser bayangan akan tampil dengan warna hitam. Namun untuk mengganti warna bayangan ini, kita bisa menambahkan input value untuk warna ke dalam properti box-shadow.

Misalnya :  box-shadow : -10px -10px 5px 7px red ; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kiri, 10 pixel ke atas, blur sebesar 5 pixel, spread sebesar 7 pixel, dan bayangan berwarna merah.

Lihat hasilnya :

<div style="background-color: khaki; border-radius: 7px; box-shadow: -10px -10px 5px 7px red, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Selanjutnya! Bisa kita modifikasi dengan mengganti warna bayangan, tanpa efek blur dan tanpa spread.

Misalnya,  box-shadow : 10px 10px red; 

Maka akan menghasilkan efek bayangan di posisi 10 pixel ke kanan dan 10 pixel ke bawah, dengan bayangan warna merah

Lihat hasilnya :

<div style="background-color: lemonchiffon; border-radius: 7px; box-shadow: 10px 10px red, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; padding: 20px; text-align: center;">Tulis catatan penting di sini..!</div>

Kesimpulan : untuk properti box-shadow setidaknya perlu memiliki 2 value utama, yaitu h-shadow & v-shadow yang menentukan seberapa jauh jarak bayangan yang akan ditampilkan.

Baca juga :

● Cara Membuat Kotak Script Minimalis

---

● Cara Membuat Kotak Script Sudut Melengkung

---

● Cara Membuat Kotak Scroll di Blog

---

● Cara Membuat Tulisan berjalan (Marquee)

---

Kira-kira seperti itu cara membuat kotak catatan dengan efek bayangan di postingan blog.

Silahkan  sobat bereksperimen dengan nilai vertikal, horizontal, blur, warna dan efek jatuhnya bayangan. Misalnya coba menggunakan fitur solid single-border, double-border, inset, outset, ridge, groove, etc. Dicari-cari saja di bagian widget blog ini (gratis kok!).

Yaps! dikondisikan saja sob sesuka hati, agar postingannya tambah sipp! Kalau kata para mastah nih yee, biar tampilan blog jadi "eye-catching" gitu.. 😄

Atau siapa tahu ada yang mau nyoba bagaimana cara membuat gambar dengan efek bayangan (box-shadow) seperti punya miminho di bawah ini.

Next..

Bagaimana cara memasang kotak catatan dengan efek bayangan di postingan blog/website?

Berikut cara membuat kotak catatan dengan efek bayangan di postingan blog. Silahkan ikuti step by step- nya :

• Masuk ke Dashboard
• Buat Posting/New Entry
• Tulis konten seperti biasa sampai selesai
• Ganti mode penulisan dari "Compose" menjadi "HTML"
• Copy script yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau
• Kembali ganti mode penulisan dari "HTML" menjadi "Compose", lalu edit “Tulis catatan penting di sini..!” dan ganti dengan tulisan sobat yang mau dimasukan dalam kotak catatan
• Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
• Terakhir, kalau sudah berjalan dan posisinya sudah pas. Jangan lupa di simpan dulu dan silahkan dipublish.
• DONE.

Sekian pembahasan tentang cara membuat kotak catatan dengan efek bayangan di postingan blog/website, yang bisa saya sharing-kan di sini. Semoga bermanfaat bagi yang membutuhkan, dan sukses dalam segala urusan. Eimen!

Kalau ada yang kurang jelas, silahkan berikan komentar atau sekedar menambah informasi. Terima kasih!

See you on top..

Nite & GBU more. Bye..!!