MENAMBAH EFEK SHADOW PADA TABEL DAN GAMBAR

Pada hari ini taukahbahwa.blogspot.com akan menyampaikan artikel tentang MENAMBAH EFEK SHADOW PADA TABEL DAN GAMBAR. Semoga dengan artikel MENAMBAH EFEK SHADOW PADA TABEL DAN GAMBAR akan menambah wawasan bagi anda pembaca setia taukahbahwa.blogspot.com

Yang pertama, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, tanpa memberi efek blur:

<style type="text/css">
.box-shadow1{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: 7px 7px #818181;
-webkit-box-shadow: 7px 7px #818181;
-moz-box-shadow: 7px 7px #818181;
}
</style>
<div class="box-shadow1">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang kedua, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">
.box-shadow2{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
}
</style>
<div class="box-shadow2">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang ketiga, menambahkan bayangan kekiri dan bayangan keatas pada sebuah kotak, dengan memberi efek blur:

<style type="text/css">
.box-shadow3{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: -7px -7px 8px #818181;
-webkit-box-shadow: -7px -7px 8px #818181;
-moz-box-shadow: -7px -7px 8px #818181;
}
</style>
<div class="box-shadow3">TEKS DISINI</div>

Berikut hasilnya :

TEKS DISINI

Yang keempat, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah gambar, dengan memberi efek blur :

<style type="text/css">
.box-shadow4{
width:300px;
height:300px;
padding:5px;
margin:0 auto;
color:#ooo;
background:#00378A;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDxwsnJ0MmBwdaj1Qb-dgmC7DC6KOHhauNI3zMTwR9r3BhoNEDhbLo3EYpUrTeJD_pGRWp4EBZmmZJ0KXG010_cOgLBia23PcoADkcLWBhRKNyjloK3UWZaFTr-DNQltca4yYR1oNLB1te/s300/Gardu.jpg) no-repeat 0px 0px;
opacity:0.7;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
}
</style>
<br />
<div class="box-shadow4">TEKS DISINI</div>

Yang kelima, cara menambahkan teks pada box shadow :
Untuk membuat fariasi Teks, silahkan anda bisa lihat artikel  cara membuat fariasi Teks 

<style type="text/css">
.box-shadow5{
width:300px;
height:150px;
padding:5px;
margin:0 auto;
color:#fff;
font-size: 22px;
font-family: Goudy Stout,sans-serif;
background:#00378A;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
}
</style>
<div class="box-shadow5">Cara membuat efek shadow pada kotak dan gambar</div>

Berikut hasilnya :

Cara membuat efek shadow pada kotak dan gambar

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com