Cara Membuat Efek Bayangan Teks Pada Postingan Blog

Ketika sobat blogger menulis postingan di blogger.com, sobat blogger harus menulis postingan dalam mode HTML.

• Kemudian tambahkan kode berikut sebelum dan setelah teks.

<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 2px yellow }</style><font color="green"><b class="drop-shadow"><b>TEKS DISINI</b></font></b>

• 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>

Hasilnya terlihat seperti ini :

TEKS DISINI

• 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>

Hasilnya terlihat seperti ini :

TEKS DISINI

• 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>

Hasilnya terlihat seperti ini :

TEKS DISINI

• 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/AVvXsEgmUexDkDV5zP0O4Q3rORlUeR6rmACo0_mkSJWGwqobOBVMpFPd3birJ9HeqdC61hMG1frkHZTG11ugsamepKmmC4z__CKPxHrEuW_9TOWjAPE6Ulc2NElz_DmYDg_kWZfg6kdLrxAZO10-/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>

Hasilnya terlihat seperti ini :

TEKS DISINI

• Menambahkan teks pada box shadow :

<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>

Hasilnya terlihat seperti ini :

Cara membuat efek shadow pada kotak dan gambar

Sekian semoga bermanfaat,

Sumber : http://kdablog-tutor.blogspot.com/2012/09/membuat-efek-bayangan-pada-teks.html
http://pathullapil.blogspot.com/2012/11/cara-membuat-efek-shadow-pada-kotak-dan.html 

Author : coxelgokil | ACI BUDAYA

Anda telah membaca artikel tentang : Cara Membuat Efek Bayangan Teks Pada Postingan Blog. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih... <a href="http://acibudaya.blogspot.com/2013/12/b.html" target="_blank">Cara Membuat Efek Bayangan Teks Pada Postingan Blog</a>

Author : Aci Budaya - [Blog Lain]