Tutorial CSS3 Part 4 – Membuat Efek Bayangan Dengan CSS3

CSS3

Malas Ngoding

membuat efek bayangan dengan css3

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.

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




Write a Comment

Your email address will not be published. Required fields are marked *