Antara Text shadow dengan box shadow memiliki fungsi yang berbeda. Dimana text shadow digunakan untuk membuat efek bayangan pada teks. Sedangkan box shadow digunakan untuk membuat efek bayangan pada kotak / widget header, posting, dan sidebar dalam sebuah web atau blogger.
Dalam dunia pemprograman tidak lepas kaitannya dengan text-shadow maupun box-shadow. Dua macam css tersebut sangat dibutuhkan sekali, terutama bagi sahabat yang memiliki hobby mengotak-atik tampilan web / blog.
Tetapi bagaimana cara mudah membuat efek bayangan agar web/blog memiliki tampilan menarik?
Nah.... mungkin pertanyaan semacam itu yang muncul dalam benak sahabat blogger pemula. Blogger pemula pasti mengalami sebuah kesulitan saat ingin membuat tampilan blog terlihat menarik. Tidak perlu khawatir dalam artikel ini akan membantu cara membuat efek bayangan serta cara penggunaannya.
Cara Membuat Text-Shadow Dan Box-Shadow
Contoh Tex-shadow untuk membuat bayangan teks. Dengan menggunakan style css pada elemen <div>.
CSS TEXT-SHADOW / BAYANGAN TEKS.
1. CONTOH TEKS DENGAN EFEK BAYANGAN
Penulisan kode CSS nya seperti dibawah ini :<div style=" text-shadow:3px 3px 3px;">CONTOH TEKS DENGAN EFEK BAYANGAN</div>
2. CONTOH TEKS DENGAN EFEK BAYANGAN WARNA BIRU
Penulisan kode CSS nya seperti dibawah ini :
<div style=" text-shadow: 3px 3px 3px blue;">CONTOH TEKS DENGAN EFEK BAYANGAN WARNA BIRU</div>
3. CONTOH TEKS DENGAN EFEK BAYANGAN WARNA BIRU BLUR
Penulisan kode CSS nya seperti dibawah ini :
<div style=" text-shadow: 3px 3px 6px blue;">CONTOH TEKS DENGAN EFEK BAYANGAN WARNA BIRU BLUR</div>
4. CONTOH TEKS WARNA MERAH DENGAN EFEK BAYANGAN WARNA BIRU BLUR
Penulisan kode CSS nya seperti dibawah ini :
<div style=" text-shadow: 3px 3px 5px blue; color:red;">CONTOH TEKS WARNA MERAH DENGAN EFEK BAYANGAN WARNA BIRU BLUR</div>
5. CONTOH TEKS DENGAN EFEK BAYANGAN WARNA HIJAU NEON
Penulisan kode CSS nya seperti dibawah ini :
<div style=" text-shadow: 0 0 6px green;">CONTOH TEKS DENGAN EFEK BAYANGAN WARNA HIJAU NEON</div>
6. CONTOH TEKS DENGAN EFEK BAYANGAN WARNA MERAH DAN BIRU NEON GLOW
Penulisan kode CSS nya seperti dibawah ini :
<div style=" text-shadow: 0 0 4px red, 0 0 6px blue;">CONTOH TEKS DENGAN EFEK BAYANGAN WARNA MERAH DAN BIRU NEON GLOW</div>
7. CONTOH TEKS WARNA BIRU DENGAN EFEK BAYANGAN WARNA MERAH, BIRU DAN KUNING
Penulisan kode CSS nya seperti dibawah ini :
<div style=" text-shadow: 2px 2px 3px red, 0 0 10px blue, 0 0 4px yellow; color:blue;">CONTOH TEKS DENGAN EFEK BAYANGAN WARNA MERAH, BIRU DAN KUNING</div>
INGAT!! : Untuk menulis kode css agar lebih praktis dan cepat dapat menggunakan Selector CLASS ATAU ID.
BACA [ CARA MEMBUAT SELECTOR ID DAN CLASS BESERTA CARA PENGGUNAANNYA. ]
CSS BOX-SHADOW / BAYANGAN KOTAK.
- Kode CSS untuk membuat kotak dengan efek bayangan warna biru.
- Kode CSS untuk membuat kotak dengan efek bayangan sebelah kanan dan bawah warna biru.
- Kode CSS untuk membuat kotak dengan efek bayangan sebelah kanan, kiri dan bawah warna kuning.
<div style="box-shadow: 0 4px 8px grey; border: 1px solid brown;">Contoh Kotak Dengan Efek Bayangan Warna Biru</div>
Hasil tampilannya seperti dibawah ini.
Contoh Kotak Dengan Efek Bayangan Warna Biru.
<div style="box-shadow: 2px 4px 8px blue; border: 1px solid brown;">Contoh Kotak Dengan Efek Bayangan Warna Biru</div>
Contoh Kotak Dengan Efek Bayangan Bagian Bawah dan Kanan Warna Biru
<div style="box-shadow: 8px 4px 1px blue; border: 1px solid brown;">Contoh Kotak Dengan Efek Bayangan Warna Kuning.</div>
Hasil tampilannya seperti dibawah ini.
Contoh Kotak Dengan Efek Bayangan Warna Kuning.
Jika menginginkan membuat efek shadow dalam postingan blogger harus menggunakan format html. Cara membuatnya cukup mudah yaitu masuk terlebih dahulu ke dashboard BLOGGER > ENTRI BARU > HTML.
Untuk melihat tampilan sementara hasil dari kode html yang telah dibuat klik COMPOSE yang terletak disebelah kiri menu HTML. Selamat mencoba semoga berhasil.
No comments:
Post a Comment