Membuat Box Shadow dengan Efek Lengkung Tengah dan Efek Lengkung di Kiri-kanan

Pada artikel kali ini saya akan mencoba mengulas tentang cara membuat box shadow dengan efek lengkungan di tengah dan di kiri-kanan. Pada awalnya saya ingin membuatnya dalam bentuk valid css3, namun karena ingin mempertahankan box shadow ini pada perangkat ponsel yang menggunakan peramban lama maka mau tak mau embel-embelnya pun tetap harus ditambahkan.

Sebab jika pure menggunakan css3 maka efek shadow tersebut tidak akan muncul pada peangkat ponsel yang menggunakan peramban lama. Peramban lama untuk perangkat ponsel yang dimaksud seperti safari versi lama, IE versi lama, default browser versi lama, serta peramban lain yang belum mendukung penggunaan validasi css3.

Lalu apakah penggunaan box shadow dengan cara ini berbahaya bagi seo? Tidak, bagi saya entah blog menggunakan full validasi css3 atau tidak, tidak akan berpengaruh terhadap seo. Namun penerapan box shadow seperti ini bisa jadi akan mengusik size template, karena kodenya bisa dibilang banyak, padahal hanya untuk membuat sebuat efek saja, jadi dipikirkan lagi, sampai akhirnya anda memutuskan untuk menggunakan dan tidak menggunakan cara ini.

Membuat Box Shadow dengan Efek Lengkung Tengan dan Efek Lengkung di Kiri-kanan

Nah, bagi yang masih tertarik menggunakan box shadow dengan efek melengkung di tengah dan efek melengkung di pinggir-pinggir box/kotak (kiri-kanan) silahkan memperhatikan penggunaan css dan pemanggilnya berikut ini.

Persiapan

Tentukan bidang mana yang anda ingin buat efek shadow ini, yang perlu di perhatikan adalah pada bidang tersebut menggunakan kode position:relative, contoh:
.box{
    width: 400px;
    background:blue;
    color:#f5f5f5;
    font-size:20px;
    font-family:Calibri,'Segoe UI',Tahoma,Arial,Sans-serif;
    height:80px;
    line-height:80px;
    margin:0 auto 30px;
    position:relative;
    text-align:center;
}

Lalu peanggilannya kurang lebih seperti ini.
<div class="box efek1">Melengkung di tengah</div>
<div class="box efek2">melengkung di kiri-kanan</div>
<div class="box efek3">Lengkung di kiri saja</div>

Box shadow dengan efek melengkung di tengah

Efek shadow ini terlihat pada bagian tengah dari bidang yang dibuat efek terangkat atau melengkung ke atas. Penggunaan cssnya sebagai berikut.
.efek1:after{
    width:80%;
    height:20px;
    -webkit-border-bottom-left-radius:50% 10px;
    -webkit-border-bottom-right-radius:50% 10px;
    -moz-border-radius-bottomleft:50% 10px;
    -moz-border-radius-bottomright:50% 10px;
    border-bottom-left-radius:50% 10px;
    border-bottom-right-radius:50% 10px;
    left:5%;
    bottom:0;
    z-index:-1;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
    -moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
    box-shadow:0 5px 10px rgba(0,0,0,.5);
}

Box shadow dengan efek melengkung di kiri-kanan

Untuk membuat efek ini kita harus menggunakan :after dan :before, dengan kode cssnya seperti di bawah ini.
.efek2:before{
    bottom:5px;
    content:&#39; &#39;;
    height:20px;
    left:10px;
    width:25%;
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
    -moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
    box-shadow:0 5px 10px rgba(0,0,0,.5);
    -webkit-transform:rotate(-2deg);
    -moz-transform:rotate(-2deg);
    transform:rotate(-2deg);
}
.efek2:after{
    bottom:5px;
    content:&#39; &#39;;
    height:20px;
    right:10px;
    width:25%;float:right;
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
    -moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
    box-shadow:0 5px 10px rgba(0,0,0,.5);
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    transform:rotate(2deg);
}

Box shadow dengan efek hanya melengkung di kiri atau kanan saja

Cara ini makin gampang, karena kita tinggal mengambil salah satu css dari efek sebelumnya (melengkung kiri-kanan), misalnya saya mengambil efek yang melengkung di kiri saja, maka penampakan cssnya seperti di bawah ini.
.efek3:after{
    bottom:5px;
    content:&#39; &#39;;
    height:20px;
    left:10px;
    width:25%;
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
    -moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
    box-shadow:0 5px 10px rgba(0,0,0,.5);
    -webkit-transform:rotate(-2deg);
    -moz-transform:rotate(-2deg);
    transform:rotate(-2deg);
}

Bagaimana? Membuat box shadow dengan efek-efek yang telah dijelaskan tadi sungguh mudah bukan? Selamat mencoba.

http://www.ariona.net/bermain-main-dengan-css3-box-shadow

Posting Komentar