Tutorial Belajar CSS Bagian 30 : Cara Menggunakan Gradient di CSS

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar CSS Bagian 29 : Cara Menggunakan Filter di CSS, selanjutnya kita akan belajar cara menggunakan gradient di CSS.

Fitur gradien CSS3 memberikan solusi fleksibel untuk menghasilkan transisi yang mulus antara dua warna atau lebih.

Sebelumnya, untuk membuat efek seperti itu, kita harus menggunakan gambar. Dengan menggunakan gradien CSS3, Anda dapat mengurangi waktu download dan menghemat penggunaan bandwidth.

Elemen dengan gradien dapat dinaikan atau diturunkan skalanya tanpa kehilangan kualitas, juga keluarannya akan ditampilkan lebih cepat karena dihasilkan oleh browser.

Gradien tersedia dalam dua style: linier dan radial.

Membuat Gradien Linear CSS3

Untuk membuat gradien linier, Anda harus menentukan setidaknya dua warna berhenti. Namun, untuk membuat efek gradien yang lebih kompleks, Anda dapat menentukan lebih banyak penghentian warna.

Penghentian warna adalah warna yang Anda inginkan untuk membuat transisi yang mulus. Anda juga dapat mengatur titik awal dan arah (atau sudut) di mana efek gradien diterapkan. Sintaks dasar untuk membuat gradien linier dapat dibuat dengan kode sebagai berikut :

linear-gradient(direction, color-stop1, color-stop2, …)

Linear Gradient – Atas ke Bawah

Contoh berikut akan membuat gradien linier dari atas ke bawah. Ini adalah nilai default.

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: red;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-linear-gradient(red, yellow);
		/* Untuk Internet Explorer 10 */
		background: -ms-linear-gradient(red, yellow);
		/* Standard syntax */
		background: linear-gradient(red, yellow);
	}
</style>

Linear Gradient – Kiri ke Kanan

Contoh berikut akan membuat gradien linier dari kiri ke kanan.

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: red;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-linear-gradient(left, red, yellow);
		/* Untuk Internet Explorer 10 */
		background: -ms-linear-gradient(left, red, yellow);
		/* Standard syntax */
		background: linear-gradient(to right, red, yellow);
	}
</style>

Linear Gradient – Diagonal

Anda juga dapat membuat gradien di sepanjang arah diagonal. Contoh berikut akan membuat gradien linier dari sudut kiri bawah ke sudut kanan atas kotak elemen.

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: red;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-linear-gradient(bottom left, red, yellow);
		/* Untuk Internet Explorer 10 */
		background: -ms-linear-gradient(bottom left, red, yellow);
		/* Standard syntax */
		background: linear-gradient(to top right, red, yellow);
	}
</style>

Pengaturan Arah Gradien Linear Menggunakan Sudut

Jika Anda ingin lebih mengontrol arah gradien, Anda dapat mengatur sudut, daripada kata kunci yang telah ditentukan sebelumnya.

Sudut 0deg menciptakan gradien bawah ke atas, dan sudut positif mewakili rotasi searah jarum jam, itu berarti sudut 90deg menciptakan gradien kiri ke kanan.

Sintaks dasar untuk membuat gradien linier menggunakan sudut dapat ditulis seperti berikut ini:

linear-gradient(angle, color-stop1, color-stop2, …)

Contoh berikut akan membuat gradien linier dari kiri ke kanan menggunakan sudut.

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: red;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-linear-gradient(0deg, red, yellow);
		/* Untuk Internet Explorer 10 */
		background: -ms-linear-gradient(0deg, red, yellow);
		/* Standard syntax */
		background: linear-gradient(90deg, red, yellow);
	}
</style>

Membuat Gradien Linear Menggunakan Beberapa Warna

Anda juga dapat membuat gradien untuk lebih dari dua warna.

Contoh berikut akan menunjukkan kepada Anda cara membuat gradien linier menggunakan beberapa warna. Semua warna memiliki jarak yang sama.

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: red;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-linear-gradient(red, yellow, lime);
		/* Untuk Internet Explorer 10 */
		background: -ms-linear-gradient(red, yellow, lime);
		/* Standard syntax */
		background: linear-gradient(red, yellow, lime);
	}
</style>

Mengatur Lokasi Penghentian Warna

Penghentian warna adalah titik di sepanjang garis gradien yang akan memiliki warna tertentu di lokasi itu. Lokasi penghentian warna dapat ditentukan sebagai persentase, atau sebagai panjang absolut.

Anda dapat menentukan penghentian warna sebanyak yang Anda inginkan untuk mendapatkan efek yang diinginkan.

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: red;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
		/* Untuk Internet Explorer 10 */
		background: -ms-linear-gradient(red, yellow 30%, lime 60%);
		/* Standard syntax */
		background: linear-gradient(red, yellow 30%, lime 60%);
	}
</style>
Catatan: Saat menyetel lokasi penghentian warna dalam nilai persentase, 0% mewakili titik awal, sedangkan 100% mewakili titik akhir.

Namun, Anda dapat menggunakan nilai di luar rentang itu, yaitu sebelum 0% atau setelah 100% untuk mendapatkan efek yang Anda inginkan.

Mengulangi Gradien Linear

Anda bisa mengulangi gradien linier menggunakan fungsi repeating-linier-gradient ().

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: white;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
		/* Untuk Internet Explorer 10 */
		background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
		/* Standard syntax */
		background: repeating-linear-gradient(black, white 10%, lime 20%);
	}
</style>

Membuat Gradien Radial CSS3

Dalam warna gradien radial muncul dari satu titik dan dengan mulus menyebar ke luar dalam bentuk melingkar atau elips daripada memudar dari satu warna ke warna lain dalam satu arah seperti pada gradien linier.

Sintaks dasar untuk membuat gradien radial dapat dibuat seperti kode berikut:

radial-gradient(shape size at position, color-stop1, color-stop2, …);

Argumen dari fungsi radial-gradient () memiliki arti sebagai berikut:

  • position – Menentukan titik awal gradien, yang dapat ditentukan dalam satuan (px, em, atau persentase) atau kata kunci (left, bottom, dll).
  • shape – Menentukan bentuk dari bentuk akhir gradien. Ini bisa berupa lingkaran atau elips.
  • size – Menentukan ukuran bentuk akhir gradien. Standarnya adalah sisi terjauh.

Contoh berikut akan menunjukkan Anda membuat gradien radial dengan spasi merata.

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: red;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-radial-gradient(red, yellow, lime);
		/* Untuk Internet Explorer 10 */
		background: -ms-radial-gradient(red, yellow, lime);
		/* Standard syntax */
		background: radial-gradient(red, yellow, lime);
	}
</style>

Mengatur Bentuk Gradien Radial

Argumen bentuk dari fungsi radial-gradient () digunakan untuk menentukan bentuk akhir dari gradien radial. Bisa menggunakan nilai circle atau ellipse. Berikut ini contohnya:

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: red;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-radial-gradient(circle, red, yellow, lime);
		/* Untuk Internet Explorer 10 */
		background: -ms-radial-gradient(circle, red, yellow, lime);
		/* Standard syntax */
		background: radial-gradient(circle, red, yellow, lime);
	}
</style>

Mengatur Ukuran Radial Gradien

Argumen ukuran dari fungsi radial-gradient () digunakan untuk menentukan ukuran bentuk akhir gradien. Ukuran dapat diatur menggunakan satuan atau kata kunci: closest-side, farthest-side, closest-corner, farthest-corner.

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: red;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
		/* Untuk Internet Explorer 10 */
		background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
		/* Standard syntax */
		background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
	}
</style>

Mengulangi Gradien Radial

Anda juga bisa mengulang gradien radial menggunakan fungsi repeatting-radial-gradient ().

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: white;
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
		/* Untuk Internet Explorer 10 */
		background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
		/* Standard syntax */
		background: repeating-radial-gradient(black, white 10%, lime 20%);
	}
</style>

Transparansi dan Gradien CSS3

Gradien CSS3 juga mendukung transparansi. Anda dapat menggunakan ini untuk membuat efek memudar pada gambar latar belakang saat menumpuk beberapa latar belakang.

<style>      
	.gradient {
		width: 400px;
		height: 300px;
		/* Kode pangganti untuk browser yang tidak mendukung gradien*/
		background: url("https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg");
		/* Untuk Safari 5.1 to 6.0 */
		background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg");
		/* Untuk Internet Explorer 10 */
		background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg");
		/* Standard syntax */
		background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("https://mbahwp.com/wp-content/uploads/2021/04/sky.jpg");
	}
</style>

Semoga tutorial ini bisa membantu Anda untuk belajar cara menggunakan gradient di CSS.

Artikel Lainnya

Tags:

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0