Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Efek Gelombang Pada Website Kita

 


Cara Membuat Efek Gelombang Pada Website Kita - Bagi kamu yang saat ini sedang mendesain halaman website tepatnya disisi interface / frontend, lalu kamu bingung dalam membuat efek gelombang pada halaman website ( landing page ) kamu agar terlihat makin menarik dan cantik pastinya ')

Pada tutorial kali ini saya ingin memberikan solusi kepada kamu sebuah tutorial bagaimana cara mudah membuat efek gelombang SVG tanpa config CSS alias tanpa mengotak atik CSS ( Cascading Style Sheet ).

Okee, tanpa kita berbasa basi lama lagi, langsung saja kita menuju ke TKP, Yukk kita menuju ke langkah - langkah dalam membuat efek gelombang SVG tanpa config CSS, mari simak berikut ini :

  • Buka web browser ( google chrome, microsoft edge, mozilla firefox, dsb )
  • Lalu kamu ketikan url ini : Getwaves.io
  • Selanjutnya, kamu akan masuk ke tampilan halaman websitegetwaves seperti ini.

  • Lalu kamu bisa sesuaikan desain gelombangnya mau seperti apa. Jika sudah kamu bisa klik icon awan yang berada ditengah - tengah, seperti gambar dibawah ini.
  • Selanjutnya kamu bisa copy code SVG dengan mengklik pada button copy svg code, sampai ada notif copied !
  • Lalu jika sudah dicopy code SVG nya, kamu bisa buka project website kamu dengan teks editor kamu, entah itu visual studio code, sublime text, dsb ( bebas ya ).
  • Kemudian jika kamu ingin memberikan efek gelombang pada halaman website kamu tepatnya dibagian footer, kamu bisa ikutin seperti gambar dibawah ini.

  • Nahh, apabila kamu ingin memberikan efek gelombang pada halaman website kamu tepatnya dibagian header, kamu bisa ikutin seperti gambar dibawah ini.
  • Jika kamu copy code SVGnya, sekarang kamu bisa save, dan bisa liat output website kamu pada web browser.
  • Selesai.
Nah bagaimana? Cukup mudah pastinya bukan dalam cara membuat efek gelombang pada halaman website kamu? Dan apabila kamu ingin mengubah desain gelombang, tinggal diulik - ulik aja toolsnya ya sesuai selera :D

Ohh yaa, kalau kamu masih bingung sama tutorial ini, kamu bisa juga loh berkunjung ke channel youtube saya, untuk melihat video tutorial dalam artikel ini yakni "Cara Membuat Efek Gelombang Pada Website Kita", siapa tau video dichannel youtube saya dapat lebih ampuhh kepada teman - teman untuk mengobati rasa bingung dan kesulitan dalam membuat efek gelombang pada website.

Berikut ini video saya "Cara Membuat Efek Gelombang Pada Website Kita" pada channel youtube saya ini bisa diklik untuk berkunjung ;) "Tutorial Psikomter".

Dan okee itu saja tutorial yang bisa kami share kepada teman - teman yang sudah mampir ke artikel situs web saya ini terkait Cara Membuat Efek Gelombang Pada Website Kita. Semoga informasi tutorial ini bermanfaat dan membantu ;) !!
*I hope helps you..