Belajar CSS - Gradient Keren Dengan CSS

Assalamualaikum , Halo Teman-teman selamat datang kembali di Halaman Blog Awonapa Jr. Pada Artikel sebelumnya kita membahas mengenai Warna Gradient di CSS, Jika teman-teman ingin membaca nya kembali, boleh silahkan menuju link ini..

Belajar CSS - Membuat Warna Gradient Dengan CSS
Jika kemarin kita sudah mempelajari Kombinasi warna dengan Gradient CSS, maka saat ini kita akan mencoba hal yang agak cukup berbeda Teman-teman.

Gradient Keren CSS
Gradient Keren CSS
Pada kesempatan ini kita akan Mencoba untuk membuat Gradient Keren Dengan CSS..

Pembahasan

1. Hero Overlay
2. Gradient Pada Text
3. Gradient Border

1. Hero Overlay

Untuk yang pertama ini, kita akan Menggunakan Hero Overlay, dimana gradient akan terlihat sedikit transparan dengan menggunakan nilai rgba. Dan berada diatas Foto.

Properti background dapat menerima beberapa nilai yang membentuk tumpukan, 
yang pertama adalah yang paling atas dan yang terakhir menemukan dirinya di bagian bawah tumpukan. Jika kita mendefinisikan gradien terlebih dahulu, itu akan berada di atas apa pun yang kita definisikan sesudahnya. Lihatlah snippet ini dan lihat apakah Anda dapat mengetahui apa yang terjadi.

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 class="hero"></div>
 </body>
</html>


CSS
body {
  background: #f2f2f2;
  text-align: center;
}

.hero {
    background: linear-gradient(to right, rgba(255, 9, 0, 1), rgba(22, 215, 177, 0.3)),    
    url(https://1.bp.blogspot.com/-lp3hX7VFDYU/XQ-T1FqxoqI/AAAAAAAAAj0/0zyyVRjtWLIdO8Ach3646q5la74P1gYUACKgBGAs/s320/52591430_2534009083492697_2988941790817550336_o.jpg%253F_nc_cat%253D111%2526_nc_eui2%253DAeFQEDa2kYq02c65cdbspufZNBrF06IW3g3PW9q1Op6mrkJMBiaM0qOqGQzAay1tR6Ws_atCel2Mgp8DsJ9QR-6m_ek74eN79gf0q8ZB2CsgUu7wQUjfrl9po7WcK-yiz9E%2526_nc_ht%253Dscontent.fcgk7-1.fna%2526oh%253Df51aa7e7a456a44e18f6c5a32e1d4000%2526oe%253D5D3B71A6);
    width: 60vw;
    height: 70vh;
    background-size: cover;
    margin: 0 auto;
}

Dan yang akan dihasilkan adalah seperti ini

Hero Overlay CSS

2. Gradient Pada Text

Memiliki Gradient Text itu Membuat sebuah web sangat indah, karena terdapat beberapa kombinasi warna yang bagus.
Pada syntak dibawah ini kita akan menggunakan sebuah property

    -webkit-background-clip: text;
dan juga kita menggunakan property
    color: transparent;
Yang berguna agar gradasi warna dapat berjalan.

Nah untuk yang ini, kita akan membuat sebuah gradient pada Text nih, mari langsung kita coba Syntak nya berikut ini

HTML
<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Gradient</title>
 </head>
 <body>
  <h1>Belajar Gradient Keren Di CSS</h1>
 </body>
</html>


CSS
body {
  background: #f2f2f2;
  text-align: center;
}

h1 {
    background: linear-gradient(to right, orange, #ec38bc, #f44242);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    font-size: 5rem;
}

Dan Hasil yang akan ditampilkan adalah seperti ini

Belajar Gradient Keren


3. Gradient Border

Selanjutnya kita akan mencoba untuk membua sebuah Gradient CSS pada Sebuah Border Image, mari kita coba teman-teman.
Pada Syntak dibawah ini kita menggunakan
    border-image-slice: 1;
Berguna sebagai Menentukan offset ke dalam gambar-perbatasan

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 class="border">🌻</div>
 </body>
</html>


CSS
body {
  background: #f2f2f2;
  text-align: center;
}

.border {
    border: 5px solid transparent;
    border-image: linear-gradient(to bottom, #f44242, #1cb5e0);
    border-image-slice: 1;
    width: 8rem;
    padding: 5rem 1rem;
    margin: 5rem auto;
  font-size: 50px;
}

Jika kita jalankan di browser kita, dan akan menghasilkan seperti ini
🌻
Nah hasilnya adalah seperti itu..

Teman-teman masih bisa mengkombinasi kan warna serta property keren lainnya yang sudah ada pada CSS3.

Baik teman-teman, Mungkin cukup sekian untuk bagian ini. Terimakasih Sudah Berkunjung.

Salam Semangat!!

Tambah Skill Kamu, dengan Mengisi Email untuk Update!!

Belum ada Komentar untuk "Belajar CSS - Gradient Keren Dengan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel