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.

Setidaknya dari hal-hal kecil. Seperti judul di atas, yaitu membuat kotak catatan dengan efek bayangan di postingan blog. Ya, agar tulisan pada postingan kita lebih ada feel-nya kurang lebih begitu.

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

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

Gimana? Keren kan?? 😃

Ane kasih tau nih script nya ya, untuk kota di atas..

<div style="background-color: #ff5c5c; border-radius: 100px; box-shadow: rgba(0, 0, 0, 0.157) 10px 10px 0px, rgba(0, 0, 0, 0.118) 0px 2px 10px 0px; color: black; font-size: 18px; font-weight: bold; margin: 0.5rem 0px 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition-delay: initial; transition-duration: 0.25s; transition-property: initial; transition-timing-function: initial;">&#8220;Ini contoh kotak catatan dengan efek bayangan di postingan blog/website&#8221; &#8211; Rico Sihaloho<br /></div>\

Selanjutnya ..

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

Scripnya nih...

<div style="background-color: turquoise; box-shadow: 0px 0px 30px; line-height: 1.5em; padding: 20px; text-align: center;">&#8220;Jikalaupun saya akan mati esok hari, <br />saya akan tetap bahagia hari ini&#8221; <br />- Ngopi sadayana! 😎</div>

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 ;

Keterangan (bukan kecerahan ya... 😋):

• 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)

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

1. 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>

2. 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>

3. 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>

4. 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.

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.

Subscribe to receive free email updates: