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 |
 MIRING GAMBAR DENGAN CSS3 TRANSFORM SKEW |
| October 21, 2010 Posted by: Fauzie |
Pada tutorial ini saya akan berbicara tentang "skew", salah satu "CSS3 transform properties" yang diperkenalkan oleh webkit (Safari) dan moz (Mozilla).
Fungsi "skew transform" ialah membuat sesuatu objek atau element menjadi miring (skew) ke kiri, kanan, atas atau ke bawah.
Kod mark-up dan CSSnya adalah mudah, dan kod utama yang membina "skewness" ini ialah seperti berikut:
-webkit-transform: skew (0deg, 0deg);
-moz-transform: skew (0deg, 0deg);
-moz-transform: skew (0deg, 0deg);
Perhatikan kod-kod berwarna merah dan biru di atas. Kod-kod ini mewakili apa yang dipanggil "SkewX" dan "SkewY"
"SkewX" berfungsi untuk menjadikan gambar, image, objek atau element miring ke kanan dan ke kiri secara "horizontally" apabila kod berwarna merah diberi nilai (value).
Nilai positif (contoh: 31deg) membuat image miring ke kiri, dan
Nilai negatif (contoh: -31deg) membuat image miring ke kanan
"Live Demo" gambar miring ke kiri
Merdeka, Merdeka
"SkewY" pula berfungsi untuk menjadikan gambar atau image miring ke atas dan ke bawah "diagonally".
Sila lihat kod CSS berwarna biru di atas. Berikan nilai atau value seperti berikut:
Nilai negatif (contoh: -31deg) membuat image miring ke atas, dan
Nilai positif (contoh: 31deg) membuat image miring ke bawah
"Live Demo" gambar skew atau miring ke atas (sebelah kanan)
Merdeka, Merdeka
Kod HTML dan CSS3 untuk membuat "skew transform" di atas adalah seperti berikut. Kod-kod ini hanya untuk membuat gambar miring ke kiri sahaja. Untuk mendapatkan miring ke kanan, anda hanya perlu tukarkan sahaja nilai positif kepada negatif.
<html>
<head>
<style type="text/css">
#skewimage {
padding:10px;
font-family: Verdana;
color:red;
font-size:15px;
text-align: center;
}
#skewimage2 {
background:url(http://rgumaa.files.wordpress.com/2007/07/merdeka_1957_tunku_abdul_rahman.jpg);
-webkit-transform:skew(31deg, 0deg);
-moz-transform:skew(31deg, 0deg);
margin-bottom:10px;
margin-top:10px;
width: 250px;
height:250px;
margin-left:20%;
-webkit-box-shadow: 7px 7px 10px #818181;
-moz-box-shadow: 7px 7px 10px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
</head>
<body>
<div id="skewimage">
<div id="skewimage2">
<h3>Merdeka, Merdeka</h3>
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
#skewimage {
padding:10px;
font-family: Verdana;
color:red;
font-size:15px;
text-align: center;
}
#skewimage2 {
background:url(http://rgumaa.files.wordpress.com/2007/07/merdeka_1957_tunku_abdul_rahman.jpg);
-webkit-transform:skew(31deg, 0deg);
-moz-transform:skew(31deg, 0deg);
margin-bottom:10px;
margin-top:10px;
width: 250px;
height:250px;
margin-left:20%;
-webkit-box-shadow: 7px 7px 10px #818181;
-moz-box-shadow: 7px 7px 10px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
</head>
<body>
<div id="skewimage">
<div id="skewimage2">
<h3>Merdeka, Merdeka</h3>
</div>
</div>
</body>
</html>
Gambar atau image boleh juga dimiringkan dengan cara meng"hover" mouse ke atas gambar tersebut dengan memperkenalkan kod "hover".
"Live Demo". Sila hover mouse ke atas gambar.
Merdeka, Merdeka
Kod HTML dan CSS3 untuk mendapatkan effect ini adalah seperti berikut:
<html>
<head>
<style type="text/css">
#skewgambar {
padding:50px;
font-family: Verdana;
color:red;
font-size:15px;
text-align: center;
}
#skewgambar2 {
background:url(http://rgumaa.files.wordpress.com/2007/07/merdeka_1957_tunku_abdul_rahman.jpg);
margin-bottom:10px;
margin-top:10px;
width: 250px;
height:250px;
margin-left:20%;
-webkit-box-shadow: 7px 7px 10px #818181;
-moz-box-shadow: 7px 7px 10px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
#skewgambar2:hover {
-webkit-transform:skew(0deg, 31deg);
-moz-transform:skew(0deg, 21deg);
}
</style>
</head>
<body>
<div id="skewgambar">
<div id="skewgambar2">
<h3>Merdeka, Merdeka</h3>
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
#skewgambar {
padding:50px;
font-family: Verdana;
color:red;
font-size:15px;
text-align: center;
}
#skewgambar2 {
background:url(http://rgumaa.files.wordpress.com/2007/07/merdeka_1957_tunku_abdul_rahman.jpg);
margin-bottom:10px;
margin-top:10px;
width: 250px;
height:250px;
margin-left:20%;
-webkit-box-shadow: 7px 7px 10px #818181;
-moz-box-shadow: 7px 7px 10px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
#skewgambar2:hover {
-webkit-transform:skew(0deg, 31deg);
-moz-transform:skew(0deg, 21deg);
}
</style>
</head>
<body>
<div id="skewgambar">
<div id="skewgambar2">
<h3>Merdeka, Merdeka</h3>
</div>
</div>
</body>
</html>
Nota: Kod CSS yang ditebalkan ialah kod baru yang telah ditambah untuk mendapatkan effect miring bila dihover
Contoh yang ditunjukkan ini hanya sesuai untuk browser Safari, Firefox dan Chrome
Kembali kepada | Archives →
Sebarang komen dan pertanyaan, sila klik butang di bawah ini:
