Tutorial Pemrograman

Cara Menampilkan Background Gradient dengan CSS

CSS singkatan dari Cascading Style Sheets. CSS adalah salah satu bahasa markup yang berfungsi khusus untuk merancang tampilan pada website agar hasil tampilan website lebih maksimal dan sesuai kebutuhan klien atau perusahaan.

Penulis akan memberikan tutorial cara menampilkan background gradient dengan menggunakan CSS. Ini juga bisa digunakan untuk button, textbox, textarea, dan lain-lain.

Berikut cara menampilkan background gradient dengan CSS.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “background-gradient.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Lihat hasilnya.

Selesai.

Catatan:

Pada bagian kode script di bawah ini.

Disitu, ada kode perintah yakni background: linear-gradient(to top right, #003399 0%, #660066 100%)Itu adalah cara mengatur warna latar belakang melalui sistem gradasi yang mengikuti garis lurus baik vertikal, horizontal, maupun diagonal.

Sintaks :

background : linear-gradient([tipe arah gradasi] , [kode warna solid] [nilai tingkat solid], [kode warna gradasi] [nilai tingkat gradasi]);

Ada pilihan tipe arah gradasi yakni :

  • to right, warna gradasi yang mengarah ke kanan.
  • to left, warna gradasi yang mengarah ke kiri.
  • to top, warna gradasi yang mengarah ke atas.
  • to top left, warna gradasi yang mengarah ke diagonal kiri-atas.
  • to top right, warna gradasi yang mengarah ke diagonal kanan-atas.
  • top bottom, warna gradasi yang mengarah ke bawah.
  • top bottom left, warna gradasi yang mengarah kiri-bawah.
  • top bottom right, warna gradasi yang mengarah kanan-bawah.

Nilai tingkat solid dan nilai tingkat gradasi dalam satuan persen (%), yang bisa dinilai antara 0% – 100%.

Usahakan nilai tingkat solid lebih kecil dari nilai tingkat gradasi agar mendapat hasil background atau warna gradient (gradasi) secara maksimal.

Demikian tutorial cara menampilkan background gradient dengan CSS.









Click to comment

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top