Set Opacity and Transparency in a Webpage with HTML or CSS
November 17, 2009
Lumayan dapat ilmu baru, tentang HTML and CSS. Trik ini gw temuin waktu lagi ngerjain proyek design website dari salah satu perusahaan. Alasan kenapa gw pake transparency adalah karena gw terinspirasi sama OS Windows 7, hampir semua serba transparent.
Kali ini gw kasih contoh kasus edit salah satu template joomla 1.5, nama template nya adalah transparent-bliss (buatan joomlabear). Sebenarnya template ini udah lumayan transparan, tapi kayaknya gw masih kurang sreg sama template ini. So, gw kurangin lagi deh opacity nya biar lebih transparan.
HTML code nya seperti ini (default):
<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?>
<?php echo ‘<?xml version=”1.0″ encoding=”utf-8″?’.’>’; ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xml:lang=”<?php echo $this->language; ?>”
lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
<link href=”<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/css/template.css” rel=”stylesheet” type=”text/css” />
<?php
if ($this->params->get(‘showselector’) == “show”) {
echo “<link href=\””.$this->baseurl.”/templates/transparent_bliss_1.5/css/img”.$this->params->get(‘defaultimage’).”.css\” rel=\”stylesheet\” type=\”text/css\” /> \n”;
foreach (range(1, 6) as $bgimage) {
if ($this->params->get(‘defaultimage’) != $bgimage) {
echo “<link href=\””.$this->baseurl.”/templates/transparent_bliss_1.5/css/img”.$bgimage.”.css\” title=\”img”.$bgimage.”\” rel=\”alternate stylesheet\” type=\”text/css\” /> \n”;
}
}
include (“imageswapper.php”);
} else if ($this->params->get(‘showselector’) == “random” || $this->params->get(‘showselector’) == “modRand”) {
$randomImage = “img”;
$randomImage .= rand(1, 6);
echo “<link href=\””.$this->baseurl.”/templates/transparent_bliss_1.5/css/”.$randomImage.”.css\” rel=\”stylesheet\” type=\”text/css\” /> \n”;
} else if ($this->params->get(‘showselector’) == “hide” || $this->params->get(‘showselector’) == “module”) {
echo “<link href=\””.$this->baseurl.”/templates/transparent_bliss_1.5/css/img”.$this->params->get(‘defaultimage’).”.css\” rel=\”stylesheet\” type=\”text/css\” /> \n”;
}
?>
<!–[if IE 6]>
<style type=”text/css”>
img, div, td { behavior: url(<?php echo $this->
baseurl ?>/templates/transparent_bliss_1.5/js/iepngfix.htc); }
</style>
<link href=”<?php echo $this->baseurl.”/templates/transparent_bliss_1.5/css/template-ie6.css”;?>” rel=”stylesheet” type=”text/css” media=”all” />
<![endif]–>
<body>
<div id=”wrapper”>
<div id=”headwrap”>
<div id=”logo”></div>
<div id=”topbannerad”><jdoc:include type=”modules” name=”user5″ style=”xhtml” /></div>
</div>
<div id=”leftwrap”>
<div><img src=”<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/left-top.png” alt=”top-slice” width=”180″ height=”10″ border=”0″ /></div>
<div id=”left”>
<div id=”leftinner2″>
<jdoc:include type=”modules” name=”left” style=”xhtml” />
<jdoc:include type=”modules” name=”user1″ style=”xhtml” />
</div>
</div>
<div><img src=”<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/left-bottom.png” alt=”” width=”180″ height=”10″ border=”0″ /></div>
</div>
<div id=”right”>
<div><img src=”<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/right-top.png” border=”0″ alt=”” width=”600″ height=”10″ border=”0″ /></div>
<div id=”rightinner”>
<div id=”rightinner2″>
<?php
if ($this->params->get(‘showselector’) == “module” || $this->params->get(‘showselector’) == “modRand”) {
?>
<div id=”TopModule”>
<jdoc:include type=”modules” name=”top” style=”xhtml” />
</div>
<?php
} else if ($this->params->get(‘showselector’) == “show”) {
?>
<center>
<h1 style=”text-align: center;”>Select background</h1>
<br />
<?php
echo “<a href=\”javascript:chooseStyle(‘none’, 60)\” checked=\”checked\” /><img src=\””.$this->baseurl.”/templates/transparent_bliss_1.5/background_images/thumb”.$this->params->get(‘defaultimage’).”.jpg\” alt=\”background image “.$this->params->get(‘defaultimage’).”\” border=\”0\” class=\”bgthumbs\” /></a> \n”;
foreach (range(1, 6) as $bgimage) {
if ($this->params->get(‘defaultimage’) != $bgimage) {
echo “<a href=\”javascript:chooseStyle(‘img”.$bgimage.”‘, 60)\” /><img src=\””.$this->baseurl.”/templates/transparent_bliss_1.5/background_images/thumb”.$bgimage.”.jpg\” alt=\”background image “.$bgimage.”\” border=\”0\” class=\”bgthumbs\” /></a> \n”;
}
}
?>
</center>
<?php } ?>
<jdoc:include type=”component” />
<div id=”BottomModule”>
<jdoc:include type=”modules” name=”user3″ style=”xhtml” />
</div>
</div>
</div>
<div><img src=”<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/right-bottom.png” alt=”” width=”600″ height=”10″ border=”0″ /></div>
<div id=”joomlabear”><a href=”http://joomlabear.com/”><img src=”<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/website-design-by-joomlabear.png” alt=”JoomlaBear – Website Design” width=”200″ height=”50″ border=”0″ /></a></div>
</div>
<div id=”farrightwrap”>
<div><img src=”<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/left-top.png” alt=”” width=”180″ height=”10″ border=”0″ /></div>
<div id=”farright”>
<div id=”farrightinner2″>
<jdoc:include type=”modules” name=”user4″ style=”xhtml” />
<jdoc:include type=”modules” name=”right” style=”xhtml” />
</div>
</div>
<div><img src=”<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/left-bottom.png” alt=”” width=”180″ height=”10″ border=”0″ /></div>
</div>
</div>
</div>
</body>
</html>
Oke, jadi untuk script html tersebut kita cari dulu bagian mana sih yang ingin kita tambah transparency nya, misal pada kolom kiri dan kanan. Nah, gimana caranya? gw tambahin deh script sebagai berikut:
(ini untuk script html-nya)
<div style=”opacity: 0.9;”> …”ini bagian yang akan di tambah tingkat transparansi nya”… </div>
(ini untuk script css-nya) tinggal di selipin aja di salah satu bagian, misal gw pengen set opacity inputbox jadi 0.4
.inputbox {
………..
filter: alpha(opacity=40); –> ini khusus buat IE 6
opacity: 0.4; –> script standar CSS
}
meskipun transparansi menjanjikan tampilan web yang lebih menarik, tapi tetap diingat bahwa jangan sampai isi content jadi tidak terbaca dengan baik oleh pengakses. wassalam.
andriepasca.wordpress.com 