Tutorial CSS3 Part 4 – Membuat Efek Bayangan Dengan CSS3


Membuat Efek Bayangan Dengan CSS3

Membuat Efek Bayangan Dengan CSS3 – Sudah sampai di tutorial css3 part 4. di tutorial ini kita akan belajar menggunakan box-shadow untuk membuat efek bayangan dengan css3. jadi box-shadow adalah sebuah perintah yang di sediakan css3 untuk membuat bayangan pada sebuah element. terkadang kita memerlukan efek bayangan pada sebuah element. agar tampilan nya lebih menarik dan tidak monoton.

Membuat Efek Bayangan Dengan CSS3 (Box Shadow)

untuk membuat efek bayangan pada sebuah element html kita bisa menggunakan perintah box-shadow. jadi cara nya sangat mudah. coba teman-teman perhatikan pada contoh penulisannya berikut ini.

langsung saja masuk ke contoh penggunaannya. jadi kita bisa menggunakan box shadow atau efek bayangan css3 ini di element html. dan jika kita ingin membuat efek bayangan pada text atau tulisan kita bisa menggunakan perintah text-shadow. silahkan teman-teman perhatikan pada contoh berikut ini.

  • text-shadow = untuk membuat bayangan pada text
  • box-shadow = untuk membuat bayangan pada element html selain text

index.html

style.css

dan hasilnya

cara membuat efek bayangan dengan css3

cara membuat efek bayangan dengan css3

seperti yang dapat teman-teman perhatikan ada gambar di atas. untuk membuat efek bayangan pada text kita bisa menggunakan perintah text-shadow. dan untuk membuat bayangan pada element html selain text bisa menggunakan box-shadow.

Pada syntax css di atas sudah saya sertakan comment untuk cara penggunaan dan pengisian nilai untuk membuat efek bayangan ada text tulisan dan cara membuat efek bayangan pada element html.

See the Pen membuat efek bayangan dengan css3 by Malas Ngoding (@malasngoding) on CodePen.0

Mungkin sekian dulu tutorial membuat efek bayangan box shadow dengan css3. semoga bermanfaat.


Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Tutorial Menarik Lainnya

jajar genjang css
membuat slidemenu dengan css dan jquery
cara membuat animasi preloader dengan css3

Diskusi

Belum Ada Diskusi

Tulis Komentar / Pertanyaan

Download ebook belajar HTML & CSS dasar untuk pemula gratis

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.

Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.

DOWNLOAD