CSS3 opacity transparent dan filter

opacity adalah salah satu peroperty css, sedangkan fungsi dari opacity adalah untuk mentansparentkan box/tag(bidang) maupun sedikit mentaransparenkan

Perdamaian bukanlah berarti ketidakhadiran peperangan semata; Namun, ia adalah sebuah nilai-setonggak karakter kebaikan, kepercayaan, dan keadilan sejati. Baruch Spinoza

opacity adalah salah satu peroperty css, sedangkan fungsi dari opacity adalah untuk mentansparentkan box/tag(bidang) maupun sedikit mentaransparenkan

Last Modif at July 8th, 2011

opacity adalah salah satu peroperty css, sedangkan fungsi dari opacity adalah untuk mentansparentkan box(bidang) maupun sedikit mentaransparenkan tag/box bidang tadi.

value atau nilai property opacity antara lain

berikut adalah value opacity, semakin rendah nilainya maka semakin transaparent tag/box(bidang)nya

  • 1.0
  • 0.9
  • 0.8
  • 0.7
  • 0.6
  • 0.6
  • 0.5
  • 0.4
  • 0.3
  • 0.2
  • 0.1
  • 0.0
  • dari 0.0 sampai 1.0

apakah property opacity aktif di semua browser?

tidak, property opacity ini tidak aktif di semua breowser. khusus IE(internet exploler) property opacity ini diganti dengan filter.

value dari filter(khusus IE) diantaranya

  • alpha(opacity=0);
  • alpha(opacity=10);
  • alpha(opacity=20);
  • alpha(opacity=30);
  • alpha(opacity=40);
  • alpha(opacity=50);
  • alpha(opacity=60);
  • alpha(opacity=70);
  • alpha(opacity=80);
  • alpha(opacity=90);
  • alpha(opacity=100);
  • dari alpha(opacity=0) sampai alpha(opacity=100)

fungsi dari opacity dan filter ini fungsinya sama, hanya saja filter:alpha(opacity=nilai); khusus untuk ie!

anggap saja

opacity:0.6; /*dan*/ filter:alpha(opacity=60); /*fungsinya sama */

contoh penulisan property opacity dalam inline style

opacity:1.0

contoh code style

<div style="margin:auto;opacity:0.0;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

nggak ngaruh! karena 1.0 sama dengan full

opacity:0.9

contoh code style

<div style="margin:auto;opacity:0.9;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

perhatikan dengan sedikit jelas

opacity:0.8

contoh code style

<div style="margin:auto;opacity:0.8;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

perhatikan dengan sedikit jelas

opacity:0.7

contoh code style

<div style="margin:auto;opacity:0.7;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

perhatikan dengan sedikit jelas

opacity:0.6

contoh code style

<div style="margin:auto;opacity:0.6;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

perhatikan dengan sedikit jelas

opacity:0.5

contoh code style

<div style="margin:auto;opacity:0.5;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

perhatikan dengan sedikit jelas

opacity:0.4

contoh code style

<div style="margin:auto;opacity:0.4;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

perhatikan dengan sedikit jelas

opacity:0.3

contoh code style

<div style="margin:auto;opacity:0.3;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

perhatikan dengan sedikit jelas

opacity:0.2

contoh code style

<div style="margin:auto;opacity:0.2;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

perhatikan dengan sedikit jelas

opacity:0.1

contoh code style

<div style="margin:auto;opacity:0.1;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

perhatikan dengan sedikit jelas

opacity:0.0

contoh code style

<div style="margin:auto;opacity:0.0;background-color:red;width:300px;height:300px;border:4px double lime;-moz-border-radius:20px;"></div>

tampilan/ jadinya seperti ini

enggak kelihatan!

kelihatankan perbedaannya, semakin rendah nilai valuenya maka semakin transparent pula box/tag(bidang) tadi.

contoh property opacity dalam internal style!

untuk belajar, sobat bisa edit value/nilai peoperti dibawah
berikut codenya!

<html>
<head>
<title>property opacity</title>
<style type="text/css">
.ditest-untuk-opacity{
margin:5px;
border:4px double lime;
padding:30px;
background-color:blue;
-moz-border-radius:20px;
width:300px;
height:300px;
font-size:30px;
}
#misal-untuk-opacity1{
opacity:0.1;
}
#misal-untuk-opacity2{
opacity:0.2;
}
#misal-untuk-opacity3{
opacity:0.3;
}
#misal-untuk-opacity4{
opacity:0.4;
}
#misal-untuk-opacity5{
opacity:0.5;
}
#misal-untuk-opacity6{
opacity:0.6;
}
#misal-untuk-opacity7{
opacity:0.7;
}
#misal-untuk-opacity8{
opacity:0.8;
}
#misal-untuk-opacity9{
opacity:0.9;
}
#misal-untuk-opacity10{
opacity:1.0;
}
#misal-untuk-opacity11{
opacity:0.0;
}
#misal-untuk-ie1{
filter:alpha(opacity=40);
}
#misal-untuk-ie2{
filter:alpha(opacity=80);
}/* yang ditatas adalah style css, valuenya ditulisa antara : dan ;. salam www.indaam.net */
</style>
</head>
<body>
<div id="misal-untuk-opacity1"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity2"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity3"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity4"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity5"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity6"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity7"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity8"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity9"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity10"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-opacity11"><p>perhatikan dengan sedikit jelas</p></div>
<div id="misal-untuk-ie1"><p>untuk ie</p></div>
<div id="misal-untuk-ie2"><p>untuk ie</p></div>
<!--// salam
www.indaam.net //-->
</body>
</html>

  • copy code/markup style diatas
  • lalu
  • buka notepad
  • paste
  • sava as dengan nama(all tipes)
  • opacity.htm
  • jalankan file(double click) atau open with (ie, opera, ff)

semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

One thought on “CSS3 opacity transparent dan filter”

  1. Pembuat Web says:

    mantep mas tutorialnya, lanjutkan :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-