Rabu, 07 Juni 2017

Cara Membuat Gradient Pada css3

       Assalamualaikum Wr. Wb. Selamat pagi sahabat lupacode semuanya, masih bersama saya admin dari blog lupacode ini yang masih akan membahas mengenai materi tutorial pemrograman khusunya bagi temen – temen yang sedang ingin belajar menjadi seorang web desainer. Alhamdulilah saya masih diberi kesempatan untuk dapat berbagi materi baru kepada sahabat semuanya, dan untuk materi yang akan saya bahas kali ini adalah masih mengenai seri css3 pada web desain ini
      Pada materi sebelumnya saya telah membahas mengenai Text-Shadow yang dapat temen – temen gunakan untuk memberikan senuah efek tulisan menjadi lebih menarik lagi, bagi sahabat web desain yang ketinggalan atau belum mempelajari materi yang telah saya share sebelumnya, silahkan alangkah lebih baiknya jika sahabat semua mempelajari terlebih dahulu materi yang telah saya berikan dari mulai materi pertama yang telah saya bahas sebelumnya. Agar temen-temen tidak bingung mengenai materi yang akan saya bahas kali ini, karna pada setiap materi materi yang telah saya share itu saling berkaitan mengenai materi yang saya bahas pada blog ini.

Cara Membuat Gradients pada css3 - Web Desain

Cara membuat gradients pada css3

     Pada kesempatan kali ini saya akan membahas mengenai Gradients pada css3, jadi Gradients itu adalah teknik untuk memberikan warna gradasi pada elemen yang kita punya, ada dua type gradients yang dapat kita gunakan yaitu sebagai berikut
Linear gradient adalah untuk memberikan gradasi warna secara garis lurus.
Radiant-gradient adalah untuk memberikan gradasi warna secara melingkar

     Pada pembahasan materi kali ini kita akan membahas yang pertama yaitu Linear-gradient, sebelum kita masuk kedalam css3 sekarang kita lihat dulu contoh pernggunaan linear-gradient ini. Kalau kita membuka aplikasi photoshop kita lihat contoh gradients itu adalah seperti ini

Gradient Pada Photoshop - Web Desain

     Dimana kita dapat memberikan efek gradasi warna dengan dua warna, tiga warna, bahkan sampai empat warna sekalipun. Nah didalam css3 itu kita juga dapat memberikan efek gradient pada elemen yang kita buat seperti pada photoshop diatas.
Selanjutnya yang perlu kalian pahami tentang linear gradient pada css3 adalah linear gradient bukan lah property dari css3, melainkan ia adalah value dari background-image.
    Jadi biasanya kita kalau mau ngasih gambar pada elemen kita biasanya kita pakai nya Background-image: lalu url dan kita arahkan ke dalam file image nya. Nah sekarang value nya bisa saja bukan url tapi linear-gradient jadi ini bukan prpoperty css3 tapi value baru yang bisa kita berikan kepada property Background-image. Terus kena kenapa background image yah bukan background color ? nah itu dikarenakan supaya kita bisa menggunakan Background-color dan Background-image secara bersamaan. Baik itulah penjelasan singkatnya sekarang kita coba implementasikan kepada website kita.
Baiklah disini saya contohkan seperti ini, saya sudah menyiapkan sebuah buah file html sederhana dan sintaks nya adalah seperti ini

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Gradients</title>
 <style>
  div{
   width: 600px;
   height: 300px;
   margin: 50px auto;
   background-color: salmon;
  }
 </style>
</head>
<body>
<div></div>
</body>
</html>

     Nah sekarang kita akan mencoba memberi warna gradasi pada kotak diatas, caranya adalah kita ganti tinggal mengganti property Background-color pada sintaks diatas dengan Background-image dan value nya kita kasih Linear-gradient() dan kita berikan kurung buka dan tutup, lalu didalam nya kita kasih beberapa value, dan value yang paling sederhana adalah warna awal koma dan warna akhir. Misalnya saya kasih warna awalnya red dan warna akhir nya yellow, seperti ini background-image: linear-gradient(red,yellow); sekarang kita lihat hasilnya...

Cara Membuat Gradient - Web Desain

Maka hasilnya akan menjadi seperti itu, setengah nya akan berwarna merah dan setengah nya akan berwarna kuning, simpel aja seperti itu yah. Jadi sekali lagi sintaks sederhananya adalah seperti ini

Cara Membuat Gradient - Web Desain
       Background image, linear-gradient warna awal lalu warna akhir, dan kalian ga perlu pake kurung lebih kecil dan besar tinggal tulis nama warna nya saja, bisa pake nama, bisa pake RGB, dan bisa pake hexa. Lalu sebetulnya kalian juga sebetulnya bisa simpan di property Background saja tidak perlu pada Background-image juga
      Sekarang bagaiamana kalau saya ingin memberikan dia gradasi lebih dari dua warna ? gampang saja kita tinggal tambahkan koma saja dibelakang value yang kedua misalnya seperti ini background-image: linear-gradient(red,yellow,green); sekarang kita lihat hasilnya
Cara Membuat Gradient pada css3 - Web Desain
Maka akan menjadi seperti itu yah hasilnya, atau saya mau kasihkan satu warna lagi, misalkan saya mau pake RGBa seperti ini background-image: linear-gradient(red,yellow,rgba(200,100,0,1),green); sekarang kita lihat hasilnya lagi
Cara Membuat Gradient pada css3 - Web Desain
   Seperti itu yah hasilnya, jadi kalian bisa tambahkan warna-warna sesuai denga keinginan kalian yah, dengan cara tinggal tambahkan koma saja setelah nama warna tersebut. jadi kalian bisa kasih multiple color yah . ..
      Jadi kalian bisa kasih warna satu, warna dua, sampai ke N yah terserah kalian mau kasih warnanya berapa. Nah selanjutnya kita akan coba untuk mengatur arah dari gradient nya, default nya adalah dari atas kebawah yah, dan sekarang gimana kalau misalkan saya ingin kasih warna dari kiri ke kanan.
Jadi caranya adalah kalian bisa kasih value baru didepannya seperti pada sintaks lengkap nya sebagai berikut
Cara Membuat Gradient pada css3 - Web Desain

Nah sekarang kita coba dulu untuk yang sudut yah, misalnya kan saya kasih sudut 90deg atau sama dengan 90 derajat yah, seperti ini background-image: linear-gradient(90deg,red,yellow); sekarang kita lihat hasilnya
Cara Membuat Gradient pada css3 - Web Desain
Sekarang warna nya sudah berubah menjadi dari kiri ke kanan, atau misalkan kita ingin dari kanan ke kiri, maka kita tinggal kasih saja -90deg seperti ini background-image: linear-gradient(-90deg,red,yellow);

Cara Membuat Gradient pada css3 - Web Desain
Jadi sekarang merahnya mulai dari kanan ke kiri seperti itu yah, nah sekarang bagaimana kalau ingin diagonal ? gampang saja kita tinggal ganti menjadi 45 derajat seperti ini background-image: linear-gradient(45deg,red,yellow);
Cara Membuat Gradient pada css3 - Web Desain
      Maka dia sekarang akan menjadi diagonal seperti itu yah, jadi itu untuk kita menggunakan sudut yah, jadi kalian tinggal pake mau berapa sudut yang akan diberikan.
Sekarang kita akan coba menggunakan arah dalam menentukan gradasi nya, jadi ini adalah arah yang bisa kita berikan kepada bayangan kita
      Jadi kalau to buttom itu dari atas kebawah, dan to top itu dari bawah ke atas, lalu to left dari kanan kiri dan sebaliknya to right dari kiri ke kanan, atau untuk diagonalnya to left top itu adalah tujuannya, berarti mulai nya adalah dari bawah kiri ke atas dan begitu seterusnya. Sekarang saya akan coba yang to left dari kanan ke kiri yah, seperti ini background-image: linear-gradient(to left,red,yellow);
Cara Membuat Gradient pada css3 - Web Desain
Sekarang kita bisa lihat, jadi ini to left dari mulai kanan ke kiri atau dari merah ke kuning. Kalau kita mau ke kanan bawah, jadi ini to bottom rigt jadi merah nya diatas dan kuningnya dibawah seperti ini background-image: linear-gradient(to bottom right,red,yellow);
Cara Membuat Gradient pada css3 - Web Desain
Nah sekarang yang merahnya diatas dan yang kuningnya di kanan bawah, oke jadi gampang itu yah, tinggal menggunakan keyword atau sudut dari arah gradient nya saja.

Color Stop
     Sekarang yang akan kita bahas selanjutnya adalah Color Stop jadi tadi kita telah mencoba memberikan gradasi warna misalkan kita kasih gradasai dua warna, gradasi warnanya itu seimbang, jadi misalkan kalau merah dan kuning itu seimbang, merahnya setengahnya dan kuningnya setengahnya jadi seimbang yah. Nah dengan menggunakan color stop ini kita bisa memberikan bobot warna yang berbeda misalkan saya ingin lebih banyak merahnya daripada kuningnya itu nanti kita gunakan color stop
       Misalkan seperti ini, pertama kita kasih dia to rigth saja dulu biar merahnya dari kiri kenan seperti ini background-image: linear-gradient(to right,red,yellow);
Nah sekarang kita bisa kasih color stop setelah warnanya, misalkan saya ingin warna merah nya 63% dan kuningnya 80%  seperti ini background-image: linear-gradient(to right,red 63%,yellow 80%); sekarang kita lihat hasil dari color stop nya
Cara Membuat Gradient pada css3 - Web Desain
       Sekarang kita lihat merahnya bergeser 63% dan kuningnya juga bergeser 80% jadi kita bisa atur-atur bobot dari gradasi warnanya. Oke jadi itu untuk penggunaan dari color stop silahkan kalian berkreasi menggunakan gradient ini
     Oke baiklah mungkin itu yah yang bisa saya jelaskan mengenai Linear gradient ini, sebetulnya kalau bicara mengenai css3 itu sintaks nya sebetulnya gampang, dan kalian ngingetnya juga gampang, yang susah adalah idenya untuk berkreasi menggabungkan property nya, berkreasi dengan valuenya, nah mungkin itu yang perlu kalian latih terus karna kalau sintaks gampang dihafal kalau ide kalian harus sering-sering membuat website kalian harus sering-sering lihat website orang lain yang bagus-bagus mungkin seperti itu yah.
     Oke mungkin sampai sini dulu untuk  pembahasaan materi kali ini yaitu mengenai Gradients selanjutnya saya akan masih membahas pada seri css3 yaitu kita akan membahas mengenai Font Face pada css3. Jadi jangan sampai ketinggalan untuk update materi terbaru dari web desain ini yah, jangan lupa sharer materi ini jika kaian rasa bermanfaat agar temen-temen yang lain yang mau belajar dapat bersama sama belajara bersama dengan kita pada web desain ini.
      Baiklah saya admin dari web lupacode undur diri, sampai berjumpa kembali pada pembahasan materi selanjutnya.

Terimakasih
Wassalamualaikum Wr. Wb

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon