Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



CSS IMAGE REFLECTION
November 26, 2010
Posted by: Fauzie


Seperti yang telah dinyatakan sebelum ini, "-webkit-box-reflect property" juga berupaya membina reflection atau bayang untuk sesuatu image atau gambar.

Di bawah ini ialah "Live Demo" untuk contoh "CSS image reflection". Pada dasarnya, kod CSSnya adalah mudah dan pendek, apa yang penting ialah kod -webkit-box-reflect hendaklah dimasukkan.

"Live Demo" contoh bagi image reflection. Hanya sesuai dilihat dalam browser Safari atau Chrome.



Kod-kod CSS dan HTMLnya adalah seperti di bawah ini:

<html>
<head>
<style type="text/css">
.imagereflection{
-webkit-box-reflect:below -10px -webkit-gradient(linear, left top, left
bottom, from(transparent), color-stop(0.1, transparent), to(white));
padding-bottom:50px;
margin-bottom:50px;
margin-left: 200px;
}
</style>
</head>
<body>
<img src="http://cdn.iconfinder.net/data/icons/20_icons/128_128/yahoo.png "
class="imagereflection"/>
</div>
</body>
</html>

Seperti biasa kod berwarna maroon ialah kod CSS dan kod yang berwarna biru pula ialah kod HTML.

Jika anda lihat kod CSS di atas terdapat tiga baris kod yang telah saya tambah. Kod-kod tersebut adalah seperti berikut:

padding-bottom:50px;
margin-bottom:50px;
margin-left: 200px;

Kod-kod ini hanyalah untuk membolehkan anda membuat "adjustment" kepada jarak kedudukan image tersebut dalam ruang blog jika anda ingin mencubanya dalam blogger. Jumlah pixel di atas adalah untuk contoh yang saya gunakan dalam blog ini.

Jika anda ingin mencubanya melalui Notepad, sila buang kod-kod ini kerana ia tidak sesuai jika membina image reflection ini dalam Notepad.

Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: