Trik Komputer: DROP SHADOW USE WITH CSS

Prikitiiiiwww...aku kembali lagih kawan-kawan dengan tutorial tentunya duong. Tahu CSS!!!, atau bayangan (shadow)!!!...nah bagaimana kalau kedua kode-kode HTML itu digabungkan??? Pastinya tidak akan menjadi pisang goreng ataupun bala-bala dong. Yang pasti itu akan membuahkan hasil trik yang sangat menawan dan anggun dalam menghias gambar dan tulisan kita. Gimana menerangkannya yaa...~_~'

Perhatikan pada gambar tersebut, sisi kanan dan bawah. Ada bayangan yang menyertainya kan? Hmmm...kalau mau lihat demo yang sudah aku praktekan silahkan CSS Shadow. Bagaimana cara membuatnya...

Go to Dashboard--->Layout--->Edit/HTML.
Letakkan kode berikut ini setelah/dibawah tag <head> :
<style type='text/css'>
.img-shadow {
float: left;
background: url(http://URL-LINK-GAMBARNYA/shadowAlpha.png) no-repeat bottom right !important;
background: url(http://URL-LINK-GAMBARNYA/shadow2.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
</style>

<style type='text/css'>
.p-shadow {
width: 90%;
float: left;
background: url(http://URL-LINK-GAMBARNYA/shadowAlpha.png) no-repeat bottom right !important;
background: url(http://URL-LINK-GAMBARNYA/shadow2.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.p-shadow div {
background: none !important;
background: url(http://URL-LINK-GAMBARNYA/shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}

.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
</style>
Kalau mau metode yang lainnya, cari kode ]]></b:skin>, dan letakkan kode berikut diatas/sebelumnya :
.img-shadow {
float: left;
background: url(http://URL-LINK-GAMBARNYA/shadowAlpha.png) no-repeat bottom right !important;
background: url(http://URL-LINK-GAMBARNYA/shadow2.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

.p-shadow {
width: 90%;
float: left;
background: url(http://URL-LINK-GAMBARNYA/shadowAlpha.png) no-repeat bottom right !important;
background: url(http://URL-LINK-GAMBARNYA/shadow2.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.p-shadow div {
background: none !important;
background: url(http://URL-LINK-GAMBARNYA/shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}

.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
Download dolo gambarnya di sini Gambarnya.
SAVE.

Nah kalau semua langkah diatas sudah sobat lakukan, sekarang tinggal bagaimana memanggil kode tersebut supaya bisa hadir didalam postingan kita.

Untuk gambar yang berbayang (Contoh di Ben-Tools) pada gambar perempuan!!! Begini :
<div class="img-shadow"> <img src="http://URL-LINK-GAMBAR.JPG/PNG/GIF" alt="Title"/> </div>

Kalau untuk yang tulisan (Contoh di Ben-Tools, yang bertuliskan "Itu teh susu ( . )( . )kan...!!! Meuni buled kitu nyak...") begini :
<div class="p-shadow"> <div> <p>KATA-KATA YANG MAU DITULIS TERSERAH HATI LA YAW...</p> </div> </div>

Dah ah, sok jangan melongo ajah...semoga berhasil brooo. Prikitiw...

Source : AlistApart.

Trik Komputer

Minggu, 10 Januari 2010

DROP SHADOW USE WITH CSS

Tidak ada komentar:

Posting Komentar