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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMOYTjwTPFDXmzoRf-R2UZ4U7YzNjRUIEijviojtW1wakcJMPGwrAF9fMmoQnOIm2AqC9GAyHpES1bntwmtQ9hacGBvfev4jR-HLrD8DQ1vV0QmDNW_St7LadgWr9ET5jl6nY9KkKDmC6/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

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!!

Awonapa - Website dan Blogging

Belajar CSS - Gradient Keren Dengan CSS

Pembahasan

1. Hero Overlay

2. Gradient Pada Text

Belajar Gradient Keren

3. Gradient Border

Posting Komentar untuk "Belajar CSS - Gradient Keren Dengan CSS"

Menu Halaman Statis