Minggu, 04 Juni 2017

Belajar Membuat Box Shadow Pada css3

     Assalamualaikum Wr Wb. Hallo selamat pagi sahabat lupacode semuanya dimanapun saat ini kalia berada, selamat datang kembali saya ucapan di blog Lupa Code ini yang masih membahas mengenai seri css3 pada materi kali ini. Masih bersama saya sebabai admin dari blog lupacode ini, alhamdulilah saya masih diberi kesempatan untuk berbagi tutorial mengenai seputar pemrograman kepada sahabat semua.
     Pada kesempatan kali ini kita masih dalam seri css3 dimana pada pembahasan kemarin kita telah membahas mengenai Opacity RGBa & HSLa pada materi pembahasan yang sebelumnya. Nah bagi sahabat web desain yang ketinggalan materi pembahasan yang sebelumnya sahabat semua dapat langsung masuk kedalam halaman daftar isi atau sitemap pada blog ini untuk melihat seluruh materi yang telah saya bahas pada artikel sebelumnya

Cara membuat box shadow pada css


Belajar Box Shadow Pada CSS3

       Pada kesempatan kali ini saya ingin membahas mengenai property css3 yaitu yang namanya BOX SHADOW jadi property box shadow ini adalah property css3 yang gunanya adalah untuk memberikan bayangan pada elemen yang kita buat. Kalian bisa lihat dari namanya juga sudah Box Shadow.
     Seperti biasa sebelumnya saya sudah mempersiapkan file latihan pada materi kali ini, dimana saya membuat sebuah kotak dan saya ingin memberi box-shadow pada kotak itu, syntax nya adalah sebagai berikut
<!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;
  }

 </style>
</head>
<body>

 <div></div>

</html>

Sekarang kita lihat hasil dari syntax diatas adalah seperti ini

Mengenal dan belajar box shadow pada css
      Sekarang saya sudah punya kotak nya dan kita tinggal kasih bayangan atau shadow. Bagaimana kita ngasih banyangan nya ? sekrang kita lihat dulu urutan property Box-shadow berikut ini

    Pada saat kalian ingin menambahkan bayangan pada elemen kalian itu property nya adalah box-shadow lalu value yang bisa kalian kasih itu ada empat parameter dan ini harus kalian ingat yah, kita bahas dulu satu persatu property box shadow diatas

<x-offset>
     x-offset ini adalah untuk mengatur jarak bayangan pada sumbu horizontal. Ini nilainya numerik, jadi kalau misalkan saya kasih 10px maka dia akan bergerka ke kanan sebanyak 10px. Kalau saya kasih minus maka akan bergerak ke sebelah kiri elemen nya sebanyak 10px

<y-offset>
y-offset ini adalah jarak dari bayangan terhadap elemen tapi secara vertikal

<blur>
Blur ini adalah misalkan seberapa besar blur yang ingin kita kasih ke bayangan nya

<color>
Kemudian untuk color tentu saja mau memberi warna apa pada bayangannya

      Jadi ini harus di ingat ke empat value wajib yang harus ada, dan sebetulnya kita bisa tambah lagi dua value opsional yaitu <inset> dan <spread>  tapi ini nanri kita akan bahas belakangan.
      Baiklah sekarang kita akan coba menggunakan proeprty box shadow pada css3 ini, untuk mengasih bayangan pada elemen nya pertama kita tambahkan dulu property nya Box-Shadow : lalu kita kasih x-offsetnya yaitu jarak bayangan terhadap sumbu x ke kanan atau ke kiri, misalnya saya kasih 5px ini artinya bayangan nya akan bergerak ke kanan 5px, kemudian untuk y-offsetnya saya kasih juga 5px yang ketiga adalah blur nya, seberapa blur kita akan kasih bayangan kita misalnya saya kasih 5px dan yang terakhir kita kasih warna bayangannya apa misalkan Black jadi seperti ini untuk property box-shadow nya
box-shadow: 5px 5px 5px black;
Sekarang kita lihat dulu hasilnya adalah seperti ini
Belajar Membuat Box Shadow Pada css3
     Kalian sudah bisa lihat sekarang ada bayangannya ada disebelah kanan 5px dan ada dibawah 5px jadi sekarang gampang banget yah ngasih bayangan kepada sebuah elemen dengan menggunakan css3
      Sekarang sebetulnya kalian tinggal main-main saja dengan nilai dari property box-shadw diatas, kalau misalkan bayangannya ingin disebelah kiri maka tinggal kasih minus seperti ini -5px maka bayangannya ada di sebelah kiri. Kalau bayanganya ingin disebelah atas maka y-offsetnya juga tinggal kita kasih minus -5px maka bayangannya akan pindah ke sebelah atas sekarang.
   Kalau misalkan kalian ingin kasih opacity atau transparansi untuk bayangannya atau untuk shadow nya, maka kita tinggal tambahkan rgba untuk warnanya, seperti yang telah kita bahas pada materi RGBa & HSLa pada materi sebelumnya. Jadi seperti ini kalau kita ingin tambahkan opacity untuk shadow nya, misalkan saya kasih seperti ini
box-shadow: 5px 5px 5px rgba(0,0,0,0.75);
maka kita bisa lihat sekarang warna shadownya sudah transparan
Belajar Membuat Box Shadow Pada css3
        Nah sekarang tergantung kreatifitas kalian mau mebuat bayangannya seperti apa karna kita sudah tau property yang kita gunakan untuk memberi bayangan atau shadow pada sebuah elemen
      Baiklah mungkin itu saja dulu untuk penggunaan property box-shadow yang utama didalam css3, kita akan lanjut kedalam pembahasan Box-shadow Part2 yaitu kita akan membahas mengenai value opsional pada property Box-shadow ini seperti yang sudah saya bahas diatas bahwa sebetulnya kita juga bisa menambahkan value opsional kedalam property Box-shadow ini. Maka dari itu jangan sampai ketinggalan yah untuk selalu update materi-materi dari web desain ini
     Oke langsung saja kita menuju pembahasan materi selanjutnya yaitu Belajar Box ShadowPada CSS3 (Part 2)


Admin – 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