Belajar CSS #06 : Mengubah Background di CSS

Anak Males – Setelah mempelajari tentang properti warna di CSS dan berbagai nilai yang dapat digunakan, sekarang kita akan membahas tentang properti background.

Seperti namanya, properti ini digunakan untuk memberikan latar belakang pada elemen yang ditentukan. Jika Anda mencoba mengetik “background” di Inspect Element di kode CSS, maka Anda akan melihat beberapa saran properti yang terkait dengan latar belakang.

Setiap properti background memiliki fungsi yang berbeda-beda. Ada dua cara menambahkan latar belakang di CSS, yaitu dengan warna atau gambar.

Jika menggunakan gambar, maka diperlukan beberapa properti tambahan untuk mengatur gambar tersebut. Hal ini menyebabkan adanya banyak properti background-* di CSS.

Pada tutorial ini, kita akan membahas beberapa properti penting yang sering digunakan dalam membuat latar belakang.

Mari kita bahas.

Cara Mengubah Background Warna Dengan CSS

Untuk mengubah background warna pada sebuah elemen HTML menggunakan CSS, Anda dapat menggunakan properti background-color. Anda dapat menentukan warna dengan menggunakan nama warna, warna hexadecimal, atau warna RGB.

Untuk menggunakan nama warna, gunakan nama warna yang sesuai seperti “red”, “yellow”, atau “blue”.

.element {
  background-color: red;
}

Untuk menggunakan warna hexadecimal, gunakan kode warna hexadecimal yang sesuai. Contoh:

.element {
  background-color: #FF0000;
}

Untuk menggunakan warna RGB, gunakan tiga nilai integer yang mewakili jumlah merah, hijau, dan biru. Nilai-nilai ini harus berada di antara 0 dan 255. Contoh:

.element {
  background-color: rgb(255, 0, 0);
}

Anda juga dapat menggunakan notasi rgba yang sama, dengan tambahan parameter alpha yang menentukan transparansi warna. Nilai alpha harus berada di antara 0.0 (transparan) dan 1.0 (tidak transparan). Contoh:

.element {
  background-color: rgba(255, 0, 0, 0.5);
}

Anda dapat menggunakan properti background-color pada elemen HTML yang sesuai dengan menambahkan atribut style dan menentukan warna yang diinginkan. Contoh:

<div style="background-color: red;">Ini adalah elemen dengan background merah.</div>

Bagaimana Caranya Mengubah Background Warna Gradien CSS

Untuk mengubah background warna menjadi gradien, Anda dapat menggunakan properti background-image dan menentukan gradien sebagai nilai. Ada beberapa cara untuk menentukan gradien, yaitu dengan menggunakan linear-gradient atau radial-gradient.

Untuk menggunakan linear-gradient, gunakan sintaks seperti ini:

.element {
  background-image: linear-gradient(warna_awal, warna_akhir);
}

Contoh:

.element {
  background-image: linear-gradient(red, yellow);
}

Anda juga dapat menentukan arah gradien dengan menambahkan parameter tambahan yang menunjukkan arah gradien. Contoh:

.element {
  background-image: linear-gradient(to right, red, yellow);
}

Untuk menggunakan radial-gradient, gunakan sintaks seperti ini:

.element {
  background-image: radial-gradient(warna_awal, warna_akhir);
}

Contoh :

.element {
  background-image: radial-gradient(red, yellow);
}

Anda juga dapat menentukan lokasi sumber gradien dengan menambahkan parameter tambahan yang menunjukkan posisi sumber gradien. Contoh:

.element {
  background-image: radial-gradient(at top left, red, yellow);
}

Anda dapat menambahkan lebih dari dua warna pada gradien dengan menambahkan warna tambahan setelah warna awal dan sebelum warna akhir. Contoh:

.element {
  background-image: linear-gradient(red, orange, yellow);
}

Ingat bahwa gradien hanya dapat digunakan sebagai nilai untuk properti background-image, jadi Anda harus menggunakan sintaks background yang lebih luas jika ingin menentukan lebih dari satu properti background. Contoh:

.element {
  background: linear-gradient(red, yellow) no-repeat;
}

Cara Mengubah Background Menjadi Gambar

Untuk mengubah background menjadi gambar, Anda dapat menggunakan properti background-image dan menentukan URL gambar yang diinginkan sebagai nilai. Contoh:

.element {
  background-image: url('http://example.com/image.jpg');
}

Anda juga dapat menentukan posisi gambar dengan menggunakan properti background-position. Nilai default adalah “top left”, yang berarti bahwa gambar akan diposisikan di sudut kiri atas elemen.

Anda dapat menentukan posisi lain dengan menggunakan kata kunci seperti “center”, “bottom”, atau “right”, atau dengan menentukan nilai pixel.

Contoh:

.element {
  background-image: url('http://example.com/image.jpg');
  background-position: center;
}

Anda juga dapat mengulangi gambar dengan menggunakan properti background-repeat. Nilai default adalah “repeat”, yang berarti bahwa gambar akan diulang ke kanan dan ke bawah untuk mengisi elemen.

Anda dapat menggunakan kata kunci seperti “no-repeat” untuk menonaktifkan pengulangan, atau “repeat-x” atau “repeat-y” untuk hanya mengulangi gambar ke arah yang diinginkan.

Contoh:

.element {
  background-image: url('http://example.com/image.jpg');
  background-repeat: no-repeat;
}

Ingat bahwa Anda harus menggunakan sintaks background yang lebih luas jika ingin menentukan lebih dari satu properti background. Contoh:

.element {
  background: url('http://example.com/image.jpg') no-repeat center;
}

Cara Menentukan Ukuran Background CSS

Untuk menentukan ukuran background, Anda dapat menggunakan properti background-size. Ada beberapa cara untuk menentukan ukuran, yaitu dengan menggunakan kata kunci, persentase, atau pixel.

Untuk menggunakan kata kunci, Anda dapat menggunakan “auto” untuk menentukan ukuran default gambar (yaitu ukuran aslinya), atau “cover” untuk mengubah ukuran gambar sehingga menutupi seluruh elemen, atau “contain” untuk mengubah ukuran gambar sehingga sesuai dengan ukuran elemen. Contoh:

.element {
  background-size: cover;
}

Untuk menggunakan persentase, tentukan persentase lebar dan tinggi gambar terhadap elemen. Contoh:

.element {
  background-size: 50% 75%;
}

Untuk menggunakan pixel, tentukan lebar dan tinggi gambar dalam pixel. Contoh:

.element {
  background-size: 100px 200px;
}

Cara Membuat Background Menjadi Blur

Untuk membuat background menjadi blur, Anda dapat menggunakan efek blur pada gambar atau warna background menggunakan properti filter. Nilai blur dapat ditentukan dengan menggunakan pixel. Contoh:

.element {
  filter: blur(5px);
}

Perhatikan bahwa efek blur dapat memperlambat loading halaman web jika digunakan pada gambar yang sangat besar atau jika digunakan pada elemen yang sangat besar.

Oleh karena itu, sebaiknya gunakan efek blur dengan hati-hati dan hanya pada elemen yang sesuai.

Macam Macam Efek Pada Properti Filter

Selain blur, masih banyak lagi properti yang bisa membuat efek di background css.

Properti filter pada CSS memungkinkan Anda untuk menambahkan berbagai efek pada elemen HTML, seperti blur, grayscale, brightness, dan sebagainya. Berikut ini adalah beberapa efek yang dapat diterapkan menggunakan properti filter:

• blur: menambahkan efek blur pada elemen
• brightness: mengubah tingkat kecerahan elemen
• contrast: mengubah tingkat kontras elemen
• grayscale: mengubah elemen menjadi skala abu-abu
• hue-rotate: mengubah warna elemen menjadi warna lain dengan menggeser hue warna asli
• invert: membalikkan warna elemen
• opacity: mengubah tingkat transparansi elemen
• saturate: mengubah tingkat saturasi elemen
• sepia: mengubah elemen menjadi warna sepia

Untuk menggunakan efek yang diinginkan, tentukan efek tersebut dan nilai yang diinginkan sebagai nilai dari properti filter. Contoh:

.element {
  filter: brightness(150%);
}

Anda juga dapat menggunakan lebih dari satu efek pada elemen dengan memisahkan efek-efek tersebut dengan tanda koma. Contoh:

.element {
  filter: brightness(150%) contrast(200%) grayscale(100%);
}

Menambahkan Gambar SVG ke Background CSS

GetWaves adalah sebuah situs web yang memungkinkan Anda membuat animasi wave dengan mudah menggunakan SVG. Untuk menggunakan GetWaves, ikuti langkah-langkah berikut:

1. Buka situs web GetWaves di https://getwaves.io/.
2. Tentukan warna wave yang diinginkan dengan mengklik tombol warna yang tersedia atau dengan menggunakan kode warna hexadecimal yang diinginkan.
3. Tentukan tinggi wave dengan menggeser slider atau dengan mengetikkan nilai pixel yang diinginkan.
4. Tentukan lebar wave dengan menggeser slider atau dengan mengetikkan nilai pixel yang diinginkan.
5. Tentukan kecepatan wave dengan menggeser slider atau dengan mengetikkan nilai milidetik yang diinginkan.
6. Tentukan warna latar belakang dengan mengklik tombol warna yang tersedia atau dengan menggunakan kode warna hexadecimal yang diinginkan.
7. Klik tombol “Copy Code” untuk menyalin kode SVG yang dihasilkan.
8. Tempel kode SVG yang disalin tadi ke dalam elemen HTML yang sesuai. Anda dapat menambahkan atribut style untuk mengatur lebih lanjut seperti mengatur ukuran wave atau posisi wave.

Untuk menambahkan animasi wave menggunakan GetWaves ke dalam background elemen HTML, Anda dapat menambahkan kode SVG yang dihasilkan ke dalam properti background-image menggunakan sintaks url(). Berikut adalah contohnya:

/* CSS */
.element {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 150' preserveAspectRatio='none' style='height: 100%; width: 100%;'%3E%3Cpath d='M-10.52,52.49 C149.97,150.00 271.50,-49.98 500.00,52.49 L500.00,150.00 L0.00,150.00 Z' style='stroke: none; fill: #3498db;'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: auto;
}

Di atas adalah contoh penggunaan GetWaves untuk membuat animasi wave dengan warna biru (#3498db) sebagai background elemen dengan class .element.

Anda dapat mengubah warna wave atau mengatur lebih lanjut seperti mengatur posisi wave dengan mengubah nilai atribut fill pada kode SVG yang dihasilkan oleh GetWaves.

Anda juga dapat mengubah ukuran wave dengan mengubah nilai atribut width dan height pada elemen svg pada kode SVG.

Penutup

Baiklah, mungkin untuk membuat background di css kita cukupkan sampai disini dulu, sampai jumpa di tutorial berikutnya.