Anda tentu sering melihat di berbagai website terdapat gambar - gambar transparan / tembus pandang? Itu adalah bukan dari gambarnya, tetapi adalah permainan di dalam kode CSS.
- Buka Adobe Dreamweaver
- File - New - HTML
- Ketikkan kode berikut di antara tag <body> dan </body>
<div class="latar">
<div class="transbox">
</div>
</div>
- Ketikkan tag <p> dan </p> diantara div "transbox"
- Ketikkan kalimat atau paragraf yang anda inginkan, contoh yang saya gunakan adalah :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
- Buat File CSS, File - New - CSS
- Masukkan kode - kode berikut di dalam file CSS tersebut
div.latar
{
width:500px;
height:250px;
background:url(URL_IMAGE_ANDA) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
- Save kedua dokumen, tapi jangan lupa menghubungkan kedua dokumen. Jika tidak CSS tidak akan tampil didalam halaman HTML anda.
- Ketikkan "<link href="URL_FILE_CSS_ANDA" rel="stylesheet" type="text/css" media="screen" />"
- Save
- Selesai, maka tampilan akan seperti ini
No comments:
Post a Comment