Belajar CSS - Membuat Warna Gradient Dengan CSS - Awonapa

Assalamualaikum Teman-teman, Selamat Datang Kembali di Blog Tutorial Website Awonapa Jr. Pada tutorial sebelumnya kita membahas tentang Font Pada CSS , yaitu tentang property @font-face dan font-family, teman-teman bisa melihat nya kembali dibawah ini..

Belajar CSS - Cara Merubah Font Dengan CSS (font-family)

Belajar CSS - Cara Menggunakan Font External dengan CSS (@font-face)

Warna Gradient Dengan CSS

Jika pada tutorial sebelumnya kita membahas Tentang Font pada CSS, maka pada saat ini kita akan Mempelajari Warna Gradient dengan CSS.

Seperti biasa , beberapa hal yang akan kita bahas dibawah ini yaitu..

Pembahasan

1. Pengertian Gradient dan Manfaat

2. Latihan Dasar Dasar Gradient

Baik teman-teman langsung saja kita masuk ke pembahasan pertama..

Pengertian Gradient

Jika teman-teman sebelumnya sudah pernah menggunakan sebuah Software Editor, seperti Photoshop, Gimp dan lain lain maka sudah di pastikan kalau teman teman mengerti..

Jadi setelah ana baca dari berbagai referensi ana simpulkan bahwa Gradient atau Gradasi itu adalah sebuah konsep penggabungan dua warna atau lebih..

Manfaat Gradient

Manfaat gradient atau gradasi warna itu sendiri yaitu, Membuat Tampilan Sebuah Website menjadi lebih cantik, Gradient ini bisa hanya dengan warna, maupun digabung dengan gambar.

Seperti pada Header Awonapa, itu menggunakan Gradient..

Cara Membuat Warna Gradient Dengan CSS

Baik teman-teman, setelah kita mengetahui pengertian gradient atau gradasi maka setelah ini kita akan membuat Gradient itu dengan CSS.

Perlu dipahami terlebih dahulu, bahwa Ada 2 tipe warna gradient atau gradasi yang dapat di buat pada CSS, yaitu Linear Gradient dan Radial Gradient...

Linear Gradient adalah Gradient yang berbentuk warna yang berdampingan tapi efeknya sangat Lembut dan Indah,, Jadi kedua warna itu menyatu baik keatas dan bawah, ataupun kanan dan kiri.

Radial Gradient adalah warna Gradient yang memiliki pusat tengah, jadi membentuk sebuah lingkaran di tengah-tengah. Namun tidak hanya itu kita bisa memberikan bumbu sedikit nanti nya.

Linear Gradient

Linear Gradient Atas dan Bawah

Baik teman-teman kita akan mencoba untuk berlatih, dan yang pertama ini adalah tentang Linear Gradient.

Secara Default Linear Gradient berjalan ke atas dan bawah. Contoh seperti ini

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Gradient</title>
 </head>
 <body>
  <h1>Belajar Font External Di CSS</h1>
  <div >
   <p class="box">Linear-Gradient</p>
  </div>
 </body>
</html>

CSS

.box {
  background: linear-gradient(#f44242, #1cb5e0);  
  color: white;
  padding: 10rem 3rem;
  margin: 4rem;
  font-size: 20px;
}

Dan Akan menghasilkan seperti ini teman-teman

Linear-Gradient

Linear Gradient Kanan dan Kiri

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Gradient</title>
 </head>
 <body>
  <h1>Belajar Font External Di CSS</h1>
  <div>
   <p class="box1">Linear-Gradient To Right</p>
  </div>
 </body>
</html>

CSS

.box1 {
  background: linear-gradient(to right, #f44242, #1cb5e0);
  color: white;
  padding: 10rem 3rem;
  margin: 4rem;
  font-size: 20px;
  text-align: center;
}

Linear-Gradient to Right

Selain dengan Kombinasi 2 warna, teman-teman juga bisa mengkombinasikan lebih dari 2 warna, mari yuk kita coba..

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Gradient</title>
 </head>
 <body>
  <h1>Belajar Font External Di CSS</h1>
  <div>
   <p class="box2">Linear-Gradient To Right</p>
  </div>
 </body>
</html>

CSS

.box2 {
  background: linear-gradient(to right, orange, #ec38bc, #f44242, cyan);
  color: white;
  padding: 10rem 3rem;
  margin: 4rem;
  font-size: 20px;
  text-align: center;
}

Linear-Gradient > 2 Colour

Dalam kasus ini masing-masing dari empat warna akan menduduki jumlah yang sama dari ruang yang tersedia, memberikan kita gradien yang halus, dan seimbang.

Radial Gradient

Jika tadi kita sudah membuat dengan Linear Gradient, maka pada saat ini kita akan melanjutkan ke Radial Gradient, mari langsung kita coba teman-teman..

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Gradient</title>
 </head>
 <body>
  <h1>Belajar Font External Di CSS</h1>
  <div>
   <p class="box3">Radial-Gradient</p>
  </div>
 </body>
</html>

CSS

.box3 {
  background: radial-gradient(#ff00d0, #22c1c3);
  color: white;
  padding: 10rem 3rem;
  margin: 4rem;
  font-size: 20px;
  text-align: center;
}

Radial-Gradient

Nah itu adalah hasil dari Radial Gradient.. Mari kita coba dengan Contoh Berbeda lainnya..

Radial Gradient Circle

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Gradient</title>
 </head>
 <body>
  <h1>Belajar Font External Di CSS</h1>
  <div>
   <p class="box4">Radial-Gradient Circle</p>
  </div>
 </body>
</html>

CSS

.box4 {
  background: radial-gradient(circle, #ff00d0, #00ffe9);
  color: white;
  padding: 10rem 3rem;
  margin: 4rem;
  font-size: 20px;
  text-align: center;
}

Radial-Gradient Circle

Jika teman-teman perhatikan, apakah terdapat perbedaan diatas? Kalau menurut saya sih agak lebih Bulat di tengah nya hehe..

Nah teman teman, ini yang terkahir nih..

Radial Gradient Circle Top at Right / Left

HTML

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Gradient</title>
 </head>
 <body>
  <h1>Belajar Font External Di CSS</h1>
  <div>
   <p class="box5">Radial-Gradient Circle top at right / left</p>
  </div>
 </body>
</html>

CSS

.box5 {
  background: radial-gradient(circle at top right, #ff00d0, #22c1c3);
  color: white;
  padding: 10rem 3rem;
  margin: 4rem;
  font-size: 20px;
  text-align: center;
}

Radial-Gradient Circle top at right / left

Kalau ini sih menurut saya jadi seperti bagian yang inti itu berada di atas kanan, dan teman-teman juga bisa mengatur nya kebagian bawah kiri dan sebagainya..

Oh iya jika teman teman ingin melihat full nya bisa disini nih

See the Pen
Membuat Warna Gradient dengan CSS Awonapa by Wahyu Pambudi (@wahyup)
on CodePen.

Baik teman-teman, kurang lebih nya seperti itu tentang Belajar CSS - Membuat Warna Gradient Dengan CSS, Silahkan teman-teman mencoba nya dengan kode editor teman teman masing masing :)

Terimakasih Sudah Berkunjung.
Salam Semangat!!

Awonapa - Website dan Blogging

Belajar CSS - Membuat Warna Gradient Dengan CSS