30.8.14
5
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.

Curva effect box picture


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 >>
= TERIMA KASIH =

5 komentar

  1. ayaknya keren kalau dicoba

    BalasHapus
  2. bagus nih kalau diterapin, bisa dicoba... :D

    BalasHapus
    Balasan
    1. silahkan mas, karena efek seperti ini biasanya banyak digunakan untuk tampilan laman widget sidebar maupun kolom header, sehingga terkesan blog lebih indah dan cantik,

      Hapus
  3. izin nyimak iya mbak devy cantik.. :)

    BalasHapus
  4. Mantap gan buat benerin seo.. Oiya monggo mampir gan : http//infobisnisindonesia.blogspot.com

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK