Belajar Kode CSS & Desain Blog: Opacity Property

Belajar CSS, tutorial css, javascript, demo online, html editor online, html, xHTML, tutorial desain blog, tutorial css3

Opacity effect atau efek transparansi (sering juga disebut blur efect) diciptakan melalui opacity property. Penyebutan sebagai efek transparansi atau blur effect disebabkan transparansi yang tercipta ketika opacity property digunakan. Anda bisa menggunakan efek opacity pada box, image atau obyek lain seperti teks. Meskipun opacity effect dapat digunakan tanpa melibatkan hover effect, namun pada kenyataannya lebih banyak desain blog/web yang menggabungkan fungsi css opacity property dan hover effect secara bersamaan. Dalam perkembangan terakhir, setelah css3 mendapat dukungan penuh dari beberapa browser besar, bahkan efek transparansi (transparency effect) ini bisa dibuat lebih atraktif dengan menambahkan css3 transition property, css3 animation property dan css3 transform property. Yang sangat perlu diperhatikan ketika menggunakan opacity property adalah "penggunaan kode (deklarasi css) yang berbeda untuk Internet Explorer (IE).

Nilai opacity dan penulisan kode css opacity property

Internet Explorer (IE) » Nilai/value opacity property antara 0 s/d 100.

filter:alpha(opacity=xx);

filter:alpha(opacity=0);
filter:alpha(opacity=40);
filter:alpha(opacity=100);

Browser selain IE seperti Opera, Mozilla Firefox dll » menggunakan nilai opacity property 0 s/d 1
```
opacity:xx;

opacity:0;
opacity:0.4;
opacity:1.0;
```
Semakin kecil opacity efek transparansi semakin kuat dan sebaliknya bila nilai opacity semakin besar maka efek transparansi semakin lemah.

Contoh:

<style type="text/css">
.mybox{
        width:200px;
        height:200px;
        background:red;
        opacity:0.6;
        filter:alpha(opacity=60);
}
.mybox:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
}
</style>

<div class="mybox"></div>

Beberapa contoh dibawah ini merupakan contoh penggunaan opacity property untuk menciptakan efek transparansi pada box, image dan teks. Disertakan juga css opacity property yang dipadukan dengan css3 transform property dan css3 transition property.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>css opacity property</title>
<head>
<style type="text/css">
body{font:normal 90% Sans-serif;background:#eee;}
</style>
<style type="text/css">
div.black-opa{
      width:400px;
      padding:10px;
      border:1px solid #888;
      color:#fff;
      background:black; 
      text-align:center;
      font:bold 16px verdana;
      margin:10px auto;
      opacity:0.5;
      filter:alpha(opacity=50);
}
.red-opa{
      position:relative;
      width:400px;
      padding:10px 10px;
      border:1px solid #888;
      color:#fff;
      background:red; 
      text-align:center;
      font:bold 16px verdana;
      margin:10px auto;
}
.red-opa img{
      position:absolute;
      left:150px;
      top:10px;
      opacity:0.6;
      filter:alpha(opacity=60);
      border:none;
}
.red-opa:hover img{
      opacity:1;
      filter:alpha(opacity=100);
}
div.black-opa:hover{
      opacity:1.0;
      filter:alpha(opacity=100);
}
h1{
      font:bold 50px Times New Roman;
      color:red;
      opacity:1.0;
      filter:alpha(opacity=100);
      padding:10px 50px;
      background:#000;
      text-align:center;
}
h1:hover{
      font:bold 50px Times New Roman;
      color:red;
      opacity:0.2;
      filter:alpha(opacity=20);
}

/* opacity effect plus css3 transition property- ss3 transform property*/

h1.opa-trans{
      font:bold 40px Times New Roman;
      color:red;
      opacity:0.3;
      filter:alpha(opacity=30);
      padding:10px 50px;
      background:#000;
      text-align:center;
      transition:1s;
      -o-transition:1s;
      -ms-transition:1s;
      -moz-transition:1s;
      -webkit-transition:1s;

}
h1.opa-trans:hover{
      transform:scale(1.2);
      -o-transform:scale(1.2);
      -ms-transform:scale(1.2);
      -moz-transform:scale(1.2);
      -webkit-transform:scale(1.2);
      color:red;
      background:blue; 
      opacity:1.0;
      filter:alpha(opacity=100);
}

.red-opa2{
      position:relative;
      width:400px;
      padding:10px 10px;
      border:1px solid #888;
      color:#fff;
      background:red; 
      text-align:center;
      font:bold 16px verdana;
      margin:10px auto;
}
.red-opa2 img{
      position:absolute;
      left:150px;     
      top:10px;
      opacity:0.6;
      filter:alpha(opacity=60);
      border:none;
      transition:2s;
      -o-transition:2s;
      -ms-transition:2s;
      -moz-transition:2s;
      -webkit-transition:2s;
}
.red-opa2:hover img{
      opacity:1;
      filter:alpha(opacity=100);
}
</style>
</head>
<body>

<div class="black-opa"><p>opacity:50;<br/>filter:alpha(opacity=50);</p>
<p>hover<br/>
opacity:100;<br/>filter:alpha(opacity=100);</p>
</div>

<div class="red-opa"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSexnOgwXocF4Ufjio4_Yyodc2D8vjJNx618Lu8EbnKVGOGlwaaowAxC8CgTnkuePufq0coNCoLAtiSRpyuUHbDdQq5SgWRk0I_JmBLaYZXyIqiUnVYzf8AbiaEdV3stCW26T8hj8NaOqK/s220/jo-sementara.jpg" width="130" height="130" />
<p>opacity:50;<br/>filter:alpha(opacity=50);</p>
<p>hover<br/>
opacity:100;<br/>filter:alpha(opacity=100);</p>
</div>

<h1>Opacity effect</h1>

<h1 class="opa-trans">Opacity Effect plus css3</h1>

<div class="red-opa2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSexnOgwXocF4Ufjio4_Yyodc2D8vjJNx618Lu8EbnKVGOGlwaaowAxC8CgTnkuePufq0coNCoLAtiSRpyuUHbDdQq5SgWRk0I_JmBLaYZXyIqiUnVYzf8AbiaEdV3stCW26T8hj8NaOqK/s220/jo-sementara.jpg" width="130" height="130" />
<p>opacity:50;<br/>filter:alpha(opacity=50);</p>
<p>hover<br/>
opacity:100;<br/>filter:alpha(opacity=100);</p>
</div>
</body>
</html>

Belajar Kode CSS & Desain Blog

Halaman

Opacity Property

Nilai opacity dan penulisan kode css opacity property

Contoh:

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('9.01.2012');

Opacity Property

Nilai opacity dan penulisan kode css opacity property

Contoh:

Tidak ada komentar:

Posting Komentar

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e