Senin, 05 Juni 2017

Belajar Membuat Box Shadow Pada css Bagian 2

      Assalamualaikum wr Wb. Masih bersama saya admin dari blog lupacode ini hallo apa kabar sahabat lupacode semuanya yang selalu rajin belajar pemrograman bersama lupacode. Alhamdulilah pada pembahasan materi kemarin kita telah selesai membahas mengenai Property BoxShadow pada materi bagian pertama
   Pada kesempatan kali ini saya ingin melanjutkan pembahasan materi berikutnya yang masih membahas mengenai box shadow ini, dimana pada materi box shadow yang pertama kita telah mencoba menggunkan property yang utama dari box shadow ini, seperti yang saya bahas pada materi bagian pertama bahwa ada value opsional didalam property box shadow ini

Belajar Box Shadow Pada CSS3 (Part 2)


Belajar Box Shadow Pada CSS3
(Part 2)

Nah sekarang kita akan pelajari bagaimana penggunaan dari box-shadow yang opsional yaitu <spread>
spread Box Shadow - web desain

     Jadi kalau nanti kita menulis untuk value nya 5px 5px 5px 5px maka angka yang ke empat itu untuk spread atau saya lebih suka anggap itu sebagai size yaitu untuk menentukan ukuran dari bayangannya
    Baiklah sekarang kita akan coba langsung buka lagi syntax yang sudah kita buat kemarin seperti ini 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Belajar Box-Shadow</title>
 <style>

  div{
   width: 300px;
   height: 300px;
   background-color: #39b54a;
   margin: 50px auto;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.75);
  }

 </style>
</head>
<body>

 <div></div>

</html>

Sekarang kita coba lihat dulu hasil dari syntax yang kemarin adalah seperti ini

Box Shadow part1 - web desain
Nah sekarang kita akan coba tambahkan satu lagi spread, yaitu ada di parameter ke empat sebelum warna. Misalkan kita kasih 5px seperti ini
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.75);
sekarang kita lihat bayangannya akan bertambah menjadi 5px seperti ini
Box Shadow part2 - web desain
Supaya lebih jelas lagi mengenai spread saya kasih contoh seperti ini, misalkan saya kasih x-offsetnya 0 dan y-offsetnya juga 0 kemudian blur nya 0 lalu spread nya 5px seperti ini
box-shadow: 0 0 0 5px rgba(0,0,0,0.75);
maka seolah – olah kotak ini punya border, padahal ini bukan border. Ini adalah bayangan yang tidak ada blurnya kelihatannya solid seperti ini
Box Shadow part3 - web desain
     Ada satu hal keren mengenai penggunaan spread ini, dan tadi kenapa saya lebih suka menganggap ini size bukan spread itu karena begini, misalkan saya kasih x-offsetnya 0 dan y-offsetnya 30px lalu blurnya 10px kemudian untuk spreadnya saya kasih -20px seperti ini
box-shadow: 0 30px 10px -20px rgba(0,0,0,0.75);
maka sekarang kita lihat hasilnya
Box Shadow part4 - web desain
     Sekarang lihat bayangannya jadi seperti itu, sekarang-sekarang ini juga lagi trend nih bayangan-bayangan seperti itu, jadi ini silahkan gunakan kreatifitas kalian saja untuk memodifikasi
   Saya tambahkan lagi seperti ini, misalkan kursornya jika saya arahkan kedalam elemen nya, maka elemennya akan bergerak seperti itu yah, saya tambahkan syntax nya jadi seperti ini
div{
   width: 300px;
   height: 300px;
   background-color: #39b54a;
   margin: 50px auto;
   box-shadow: 0 30px 10px -20px rgba(0,0,0,0.75);
   transition: .3s;
  }

  div:hover {
   box-shadow: 0 80px 10px -40px rgba(0,0,0,0.15);
   margin-top: 40px;
  }

Sekarang kita lihat hasilnya akan menjadi seperti ini
Box Shadow part5 - web desain
     Coba sekarang kalian copy script diatas atau ikuti script diatas maka sekarang jika kita mengarahkan kursor ke elemen tersebut makan akan bergerak seperti itu keren bukan, itu saya tambahkan transition walaupun kita belum belajar transisi yah, nanti kalau kita sudah masuk kedalam materi transisi lebih menyenangkan lagi dan lebih keren lagi pastinya. Jadi silahkan kalian gunakan sendiri kreativitas kalian masing-masing untuk membuat bayangan seperti itu
     Selanjutnya yang akan kita bahas adalah mengenai value <inset> yang bisa kasih ke Box-shadow dan ini opsional boleh ada boleh tidak, tapi begitu kita buat maka bayangannya akan berada didalam kotaknya bukan diluar kotaknya. Misalkan saya kasih contoh seperti ini, saya ubah dulu untuk box-shadow yang tadi telah kita buat menjadi seperti ini
box-shadow: 0 0 15px 5px rgba(0,0,0,0.5);

maka hasilnya akan menjadi seperti ini
Box Shadow part6 - web desain
Lalu sekarang kita tambahkan value inset seperti ini
box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.5);
sekarang kita lihat lagi hasilnya seperti ini
Box Shadow part7 - web desain
     Nah kalian bisa lihat maka bayangannya akan pindah ke dalam, semakin besar blurnya maka bayangannya akan semakin besar blur ke dalam seperti gambar diatas, dan itulah penggunaan dari inset
Oke baiklah sekarang yang terakhir kita akan membahas mengenai penggunaan MultipleShadow nah salah satu kelebihan dari Box-shadow ini adalah kita bisa memberikan lebih dari satu bayangan pada sebuah elemen. Contohnya adalah seperti ini, saya kembalikan lagi box-shadow yang diatas menjadi sebuah box shadow yang sederhana, dan saya ganti warna dari shadow nya seperti ini
box-shadow: 5px 5px 5px rgba(255,0,0,0.5);

Sekarang kita lihat dulu hasilnya adalah seperti gambar dibawah ini
Box Shadow part8 - web desain
     Nah kita bisa menambahkan bayangan yang baru dengan menambahkan di akhir bayangan ini koma, contohnya seperti ini
box-shadow: 5px 5px 5px rgba(255,0,0,0.5),
-5px -5px 5px rgba(0,0,255,0.5);

Sekarang kita lihat hasilnya adalah seperti ini
Box Shadow part9 - web desain
      Sekarang bayangannya ada dua, dengan ini kalian bisa menciptkan efek yang menarik. Kalau kalian sudah tau cara pakai multiplebox-shadow ini. Atau misalkan kaya gini, kalian bisa membuat sebuah kotak yang punya banyak border nya, jadi kita gunakan multiple box-shadow ini, contohnya seperti ini
div{
   width: 300px;
   height: 300px;
   background-color: #39b54a;
   margin: 50px auto;
   box-shadow: 0 0 0 5px red,
      0 0 0 10px salmon,
      0 0 0 15px yellow,
      0 0 0 20px blue;
  }

Kita lihat hasilnya sekarang
Box Shadow part10 - web desain
      Kalian bisa lihat sekarang kita bisa ngasih multiple border, padahal ini bukan border ini adalah shadow yang ga punya blur. Atau kalian bisa kasih lagi untuk property Border radius nya kita tinggal tambahkan saja seperti ini misalnya border-radius: 50%;
Kita lihat lagi hasilnya sekarang seperti ini menjadi sebuah lingkaran sempurna
Box Shadow part11 - web desain
     Oke jadi bisa seperti itu yah, jadi tinggal bagaimana pinter – pinternya kalian untuk mengatur value dari box-shadow ini
Baiklah sampai disini dulu untuk pembahasan materi kali ini, mudah – mudahan kalian ga bingung. Tapi kalau bingung silahkan saja kalian tulis pertanyaan di kolom komentar. Kalau kalian merasa manfaat dari materi ini silahkan share kepada temen – temen yang lainnya supaya kita bareng – bareng saja belajar yah
Oke sampai berjumpa lagi pada materi lupacode yang selanjutnya jangan sampai ketinggalan untuk mendapatkan materi – materi terbaru dari web desain yah
Saya admin dari web lupacode undur diri, terimakasih

#Happy_Coding – Lupacode
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