Makna Mendalam Dari Lagu Ripped Pants Yang Dinyanyikan Oleh Spongebob

     Dalam melakukan Blog Walking, mungkin anda pernah melihat tampilan blog yang warnanya indah bercampur-campur. Entah itu dibagian menubar, background atau yang lainnya. Warnanya sangat beragam dan juga indah. Karena merupakan perpaduan dari berbagai warna.
      Di sini, MyBlog19 akan menjelaskan tentang Linear-Gradient dan CSS3 serta tutorial membuatnya.

Membuat Gradasi Warna dengan Linear Gradient
      
     Pertama kali yang kita bahas adalah hiasan gradasi warna. Linear gradient bisa dibilang adalah perpaduan beberapa warna yang disambungkan dari kiri ke kanan atau sebaliknya. Biasanya dari warna gelap ke cerah, atau warna cerah ke gelap. Tak perlu basa-basi lagi, langsung saja ke cara membuatnya di blogger.
       
» Pertama-tama, buka situs Blogger
» Lalu Login ke akun anda
» Jika sudah, pilih submenu "Tema"
» Klik "Edit Template"
» Lalu salinlah kode berikut ini. Tapi perlu anda ketahui, anda juga dapat mengkreasikannya sesuai apa yang ingin anda inginkan. Tapi salinlah dulu kode di bawah ini.
         

background:#0F466E;
background:-webkit-linear-gradient(right,#3498db 50%,#3dd4af 50%);
background:-moz-linear-gradient(right,#3498db 50%,#3dd4af 50%);
background:-o-linear-gradient(right,#3498dbE 50%,#3dd4af 50%);
background:-ms-linear-gradient(right,#3498db 50%,#3dd4af 50%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3dd4af',endColorstr='#3498db',GradientType=1);
color: #fff;
-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);

         
Catatan:
~ Kode #3498db dan #3dd4af adalah kode warna hijau dan biru. Anda dapat mengganti warnanya dengan warna yang anda sukai. Dengan cara mengganti semua kode #3498db dan #3dd4af dengan kode warna anda.
     
Cari Linear-Gradient lainnya di https://webgradients.com/ untuk menghiasi blogmu.
           
» Lalu tempelkan ke bagian yang ingin kamu pasangkan Linear Gradient dengan cara mengganti kode css backgroundnya. Misalnya saya ingin memasangkannya di Menubar.
     
Kode awalnya :
       

.vienna-menulite li li a:hover {background:#0ebffe;color:#fff;}

      
Kurang lebih hasilnya akan menjadi seperti ini:
   

.vienna-menulite li li a:hover {background:#0F466E;
background:-webkit-linear-gradient(right,#3dd4af 0%,#3498db 75%);
background:-moz-linear-gradient(right,#3dd4af 0%,#3498db 75%);
background:-o-linear-gradient(right,#3dd4afE 0%,#3498db 75%);
background:-ms-linear-gradient(right,#3dd4af 0%,#3498db 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3dd4af',endColorstr='#3498db',GradientType=1);
color: #fff;
-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);color:#fff;}

         
Membuat Background Keren Dengan CSS3
       
     Perlu anda ketahui, CSS3 berbeda dengan Linear-Gradient. Yang mana CSS3 lebih bagus dan keren daripada Linear-Gradient. CSS3 lebih lengkap dalam menyuguhkan pola warna dan gambar. Tak terbatas hanya campuran warna-warni saja (seperti yang ada di kotak Subscribe MyBlog19), namun juga bisa seluruh gambar, baik itu pola bunga hingga pola batik sekalipun. Namun CSS3 mempunyai kelemahan tersendiri, CSS3 akan blank (putih) atau tidak tampil jika diakses dengan browser yang tidak mendukung CSS3. Biasanya yang mendukung CSS3 hanya browser keren fiturnya dan sudah terkenal di kalangan penggunanya. Seperti Firefox, Google Chrome, dan Puffin Browser.
          
Baca Juga: Kumpulan Web Browser Terbaik, Canggih, Ringan, dan Fastest-Load.
          
Jadi, jika anda tetap ingin mencoba CSS3, saya beritahu sebenarnya pemasangannya sama saja. Hanya mengutak-atik kode CSS. Caranya seperti memasang linear gradient. Anda cukup menyalin kode dan menempelkannya di bagian background.
          
Silahkan salin kode di bawah ini dan tempelkan di CSS mana saja. Utamakan di bagian yang luas, seperti di footer, samping kiri-kanan, atau seperti saya yaitu di kotak subscribe.
         
Pilih salah satu saja lalu salin dan tempelkan ke cssmu.
      
Background Warna-Warni
      

background:
    linear-gradient(
        limegreen,
        transparent
    ),
    linear-gradient(
        90deg,
        skyblue,
        transparent
    ),
    linear-gradient(
        -90deg,
        coral,
        transparent
    );
  
background-blend-mode: screen

   
Background Ombak Awan Warna-warni
     

background:
    radial-gradient(
            at bottom right,
            dodgerblue 0,
            dodgerblue 1em,
            lightskyblue 1em,
            lightskyblue 2em,
            deepskyblue 2em,
            deepskyblue 3em,
            gainsboro 3em,
            gainsboro 4em,
            lightsteelblue 4em,
            lightsteelblue 5em,
            deepskyblue 5em,
            deepskyblue 6em,
            lightskyblue 6em,
            lightskyblue 7em,
            transparent 7em,
            transparent 8em
        ),
        radial-gradient(
            at top left,
            transparent 0,
            transparent 1em,
            lightskyblue 1em,
            lightskyblue 2em,
            deepskyblue 2em,
            deepskyblue 3em,
            lightsteelblue 3em,
            lightsteelblue 4em,
            gainsboro 4em,
            gainsboro 5em,
            deepskyblue 5em,
            deepskyblue 6em,
            skyblue 6em,
            skyblue 7em,
            dodgerblue 7em,
            dodgerblue 8em,
            transparent 8em,
            transparent 20em
        ),
        radial-gradient(
            circle at center bottom,
            coral, darkslateblue
        );
    
    background-blend-mode: overlay;
    background-size:
        8em 8em, 8em 8em, cover;

   
Cari background lainnya di https://bennettfeely.com/gradients/

Dan selalu ingat ! Anda hanya perlu mengutak-atik kode CSS saja, bukan kode lain.  Jika ada sesuatu yang ingin ditanyakan, tanyakanlah di kotak komentar !
See you again! Salam !

Related Posts