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 TEXT REFLECTION |
| November 26, 2010 Posted by: Fauzie |
Kandungan Tutorial
Cara mudah untuk membuat "reflection" atau bayang sesuatu image atau tek tanpa javaScript ialah dengan menggunakan "CSS3 Reflection" iaitu "-webkit-box-reflect property" yang diperkenalkan oleh Apple.
Malangnya penggunaan "property" ini hanya didukong atau supported oleh browser Safari dan Chrome. Kod asas bagi "box-reflect property" ini atau dikenali juga sebagai "CSS identifier" adalah seperti berikut:
-webkit-box-reflect: <direction> <offset> <mask-box-image> di mana:
<direction> merujuk kepada arah sesuatu 'reflection" atau bayang itu iaitu ke atas, ke bawah, ke kiri atau ke kanan.
<offset> pula merujuk kepada jarak "border" image atau kotak itu dengan "border" bayang atau reflection.
<mask-box-image> merujuk kepada sesuatu image yang digunakan untuk "overlay" reflection tersebut. Sebagai contoh, kita gunakan image berbentuk "ring" bagi membolehkan reflection berada dalam ring tersebut. Biasanya parameter ini kurang digunakan.
Dibawah ini ialah "Live Demo" bagi contoh "text reflection" ialah memberi bayang kepada sesuatu tek atau huruf.
"Live Demo" untuk "text reflection"
jom blog
<html>
<head>
<style type="text/css">
#refleksi {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:40px;
color: #398ebe;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from( transparent),
to(rgba(100, 100, 100, 0.4)));
}
</style>
</head>
<body>
<div id="refleksi"><h1>jom blog</h1></div>
</body>
</html>
<head>
<style type="text/css">
#refleksi {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:40px;
color: #398ebe;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from( transparent),
to(rgba(100, 100, 100, 0.4)));
}
</style>
</head>
<body>
<div id="refleksi"><h1>jom blog</h1></div>
</body>
</html>
Nota: Kod warna maroon ialah kod CSS dan kod berwarna biru ialah kod HTML
Peringatan: Demo ini hanya sesuai dengan browser Safari atau Chrome sahaja. Tidak sesuai dengan Firefox dan Internet Explorer.
Jika anda ingin mencuba, sila copy & paste semua kod di atas ke dalam Notepad dan save fail dengan menggunakan extension .html (contoh nama fail: refleksi.html)
Kemudian buka browser Chrome atau Safari. Klik File-> Open File-> klik nama fail di atas.
Jika anda ingin mencuba dalam blog, sila copy & paste kod-kod berwarna maroon ke dalam Design->Edit HTML-> paste di bahagian atas </head> dan copy & paste kod berwarna biru pada bahagian posting (dalam mode "Edit Html", bukan dalam mode "Compose".
Sewaktu mencuba membina demo ini dalam blogger, saya menemui sedikit masaalah. Untuk membolehkan reflection ini "menjadi", kita perlu menambah beberapa baris kod CSS baru seperti di bawah ini di bahagian atas kod font-family:Verdana, Arial, Helvetica, sans-serif; (sila lihat kod CSS di atas):
margin-top: - 60px;
padding-bottom: 150px;
margin-right: 200px;
position: relative;
margin-bottom: 80px;
padding-bottom: 150px;
margin-right: 200px;
position: relative;
margin-bottom: 80px;
Teruskan membaca | CSS Image Reflection →
