Memberi Bayangan Dengan Efek Curva Pada Box

Memberi Bayangan Dengan Efek Curva Pada Box - Cara memberi efek bayangan pada sebuah objek dengan mudah kita lakukan hanya dengan penggunaan CSS box-shadow. Yang terpenting adalah bagian sisi objek sebelah mana yang akan kita berikan efek bayangan, pertemuan sebelumnya sudah pernah saya rincikan bagaimana cara penerapan kode CSS-shadow untuk memberi efek bayangan pada sebuah objek yang rangkumannya dapat Anda baca pada tutorial tentang Mengenal CSS Dasar Box Shadow. Sama halnya dengan tutorial kali ini tentang Cara Memberi Bayangan Pada Sebuah Box Dengan Efek CURVA.

Curva hanyalah sebuah istilah yang berasal dari ITALIA, yang berarti kata "Melengkung", sehingga untuk memberi efek seperti ini pada sebuah box, maka tentukan dahulu nilai centralnya (titik tengah antara jarak sisi kiri dan kanan) seperti ini:

(-x)-[p]+(+y)=N (?)

Jika nilai x=250 dan y=250, maka nilai N=500. Untuk memberi nilai pada (p)=10, maka nilai masing-masing ke dua sisi kita kurangi 5, jadi nilai x dan y akan menjadi seperti ini:
nilai x=245 dan y=245, dengan begitu kita sudah menentukan nilai pada titik tengah, selanjutnya tinggal memberi efek bayangan pada kedua bagian sisi.

Sebagai percobaan, kita ilustrasikan dengan tampilan box sebagai target objek, selanjutnya kita buat box-nya dengan kode CSS seperti ini:

.box-text {
  background: #666;
  text-align:center;
  font:bold 16px/normal Helvetia,Sans Serif;
  color:#fff;
  padding: 30px;
  border-radius:3px;
  border:1px solid #333;
  margin:2em 0 0 0;
}

Bentuk box sudah kita dapatkan, namun belum memiliki efek banyangan curva, tahap selanjutnya memberi efek bayangan melengkung (curva) pada tampilan box Anda dengan pangaturan CSS seperti ini:

.span:before, .span:after {
  content: "";
  position: absolute;
  z-index: -2;
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  bottom: 36px;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.75);
  height: 20%;
  left: 10px;
  max-height: 100px;
  //lebar kedua sisi (kiri dan kanan)
  width:350px;}

.span:after {
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  left: auto;
  right: 10px;}

Maka hasilnya akan tampil menarik seperti ini:




DEMO SHOW


Bagaimana, cukup mudah dan sederhana bukan?. Untuk penerapan contoh bagaimana memberi bayangan pada sebuah box dengan efek curva seperti diatas hanyalah sebuah ilusi, karena yang barusan Anda lakukan hanyalah menggandakan posisi box dengan nilai tertentu, sehingga sisi box kiri dan kanan terkesan tidak menempel karena adanya efek bayangan. Sama halnya dengan penggunaan CSS box-shadow, dengan memberi nilai yang berbeda pada target sisi box, maka tampilan box terlihat banyak dan terkesan layaknya tumpukan kertas, padahal sebenarnya itu hanya sebuah efek banyangan yang Anda ciptakan.

Agar memudahkan Anda dalam berkreasi, cukup COPY seluruh kode dibawah ini sebagai percobaan, lalu tempatkan pada postingan Anda di mode tulis HTML (bukan Compose) seperti ini:

<style type="text/css">
.box-text {
  background: #666;
  text-align:center;
  font:bold 16px/normal Helvetia,Sans Serif;
  color:#fff;
  padding: 30px;
  border-radius:3px;
  border:1px solid #333;
  margin:2em 0 0 0;}

.box-text:before, .box-text:after {
  content: "";
  position: absolute;
  z-index: -2;
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  bottom: 36px;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.75);
  height: 20%;
  left: 10px;
  max-height: 100px;
  width:350px;}

.box-text:after {
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  left: auto;
  right: 10px;}
</style>
<div class="box-text">
SAHABAT BLOGGER 77
</div>

Sebagai sahabat yang baik hati dan tidak sombong, hehe..!! dibawah ini sudah saya sajikan beberapa pilihan tutorial tentang efek-efek yang berhubungan dengan penampilan blog Anda, semuanya terspesial untuk sahabat pecinta SAHABAT BLOGGER 77, dibaca ya..!!

➟ Cara Membuat Border Judul Artikel Blog
➟ Efek Tumpukan Kertas Pada Laman Posting
➟ Membuat Text Box Keren Dengan Warna
➟ Efek Gambar 3D Dengan CSS Box Shadow

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Memberi Bayangan Dengan Efek Curva Pada Box
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/08/memberi-banyangan-dengan-efek-curva-pada-box.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77