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 |
 BUAT KOTAK BERBAYANG DENGAN CSS3 |
| July 29, 2009 Posted by: Fauzie |
Satu "feature" baru yang saya kira sangat menarik dengan CSS3 ini ialah apa yang dipanggil "box-shadow", iaitu kebolehan kod CSS3 membina bayang-bayang pada sesuatu kotak.
CSS3 shadow ini boleh digunakan pada border, image dan juga teks. Penggunaan bayang-bayang ini sebenarnya telah lama dipraktikkan. Kaedah yang digunakan ialah dengan upload image bayang-bayang. Tetapi, dengan CSS3 bayang-bayang dapat dibuat hanya dengan menggunakan kod sahaja.
Contoh Box-Shadow Untuk Border
Dalam CSS3, kod untuk box-shadow dan text-shadow ditulis sebagai berikut:
box-shadow: apx bpx cpx #xxx;
Dimana,
apx-merujuk kepada bayang bawah/horizontal offset iaitu posisi x-axis
bpx-merujuk kepada bayang tepivertical offset iaitu posisi y-axis
cpx-merujuk kepada "cast length and feathering" (panjang bayang-bayang)
#xxx-merujuk kepada kod warna iaitu HTML color code
Jika apx positif (contoh 10px), ini akan meletakkan bayang-bayang di sebelah kanan kotak. Jika apx negatif (contoh -10px), ini akan membuat bayang-bayang berada di sebelah kiri kotak.
Untuk vertical offset pula, jika bpx ditulis sebagai positif ini akan meletakkan bayang-bayang di sebelah bawah kotak. bpx negatif akan membuat bayang-bayang berada di sebelah atas kotak.
Dua contoh di bawah ini dibuat dengan menggunakan kod CSS3 yang sama. Kotak di bahagian atas ialah screen shot yang dilihat melalui browser Safari. Dan yang di bahagian bawah ialah box-shadow yang dilihat melalui browser Mozilla Firefox. Bayang-bayang tidak kelihatan untuk browser Firefox
Contoh 1: Kotak Berbayang
Sesuai untuk browser Firefox dan juga Safari.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
Di bawah ini adalah kod-kod CSS dan HTML untuk kotak berbayang di atas. Untuk mencuba dalam browser, copy & paste kod-kod ini dari <html> hingga </html>.
Untuk digunakan dalam blog, sila copy & paste kod-kod berwarna maroon di bahagian atas </head> dan kod-kod berwarna biru di masukkan atas paste dalam blog post atau page element.
<html>
<head>
<style type="text/css">
body{
margin: 10px;
font-family: arial;
}
.border_radius_test3{
padding: 10px;
text-align: left;
width: 400px;
margin: px;
}
#boxshadow {
background-color: #F4F4F4;
border: 1px solid #CCC;
padding: 10px;
-moz-box-shadow: 7px 7px 7px #666;
-webkit-box-shadow: 7px 7px 7px #666;
box-shadow: 7px 7px 7px #666;
}
</style>
</head>
<body>
<div id="boxshadow" class="border_radius_test3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
<br /><br />
</div>
</body>
</html>
<head>
<style type="text/css">
body{
margin: 10px;
font-family: arial;
}
.border_radius_test3{
padding: 10px;
text-align: left;
width: 400px;
margin: px;
}
#boxshadow {
background-color: #F4F4F4;
border: 1px solid #CCC;
padding: 10px;
-moz-box-shadow: 7px 7px 7px #666;
-webkit-box-shadow: 7px 7px 7px #666;
box-shadow: 7px 7px 7px #666;
}
</style>
</head>
<body>
<div id="boxshadow" class="border_radius_test3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.
<br /><br />
</div>
</body>
</html>
Contoh 2: Kotak Berbayang
Sesuai untuk browser Firefox dan juga Safari.
Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.
Di bawah ini adalah kod-kod CSS dan HTML kotak berbayang tersebut. Untuk mencubanya sila lakukan seperti atas.
<html>
<head>
<style type="text/css">
.shadowbox{
box-shadow: 7px 7px 8px #818181;
font-family: Verdana;
color:#000;
font-size:1.0em;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
</head>
<body>
<div class="shadowbox" style="border: 1px solid black; padding: 5px;background: orange none repeat scroll 0% 0%;width: 450px;-moz-background-clip: border;-moz-background-origin: padding;-moz-background-inline-policy: continuous;">Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</div>
</body>
</html>
<head>
<style type="text/css">
.shadowbox{
box-shadow: 7px 7px 8px #818181;
font-family: Verdana;
color:#000;
font-size:1.0em;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
</head>
<body>
<div class="shadowbox" style="border: 1px solid black; padding: 5px;background: orange none repeat scroll 0% 0%;width: 450px;-moz-background-clip: border;-moz-background-origin: padding;-moz-background-inline-policy: continuous;">Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</div>
</body>
</html>
