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
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Posting Komentar