CSS3 - Prozirnost (Opacity)


Višestruka vidljivost pretraživača

Prozirnost je sada dio CSS3 specifikacija, ali je bila prisutna dugo vremena. Međutim, stariji pretraživača imaju različite načine kontrole vidljivosti ili transparentnosti.



CSS prozirnost u Firefoxu, Safariju, Chromeu, Operi i IE9

Ovo je najnovija sintaksa vidljivosti CSS-a u svim trenutnim pretraživačima.

p {
    opacity: 0.7;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS Opacity</title>
<style>
  p {
    opacity: 0.7;
    padding: 10px;
    background: #00ff00;
  }
</style>
</head>
<body>
    <p>Ovaj paragraf je 70% neproziran (ili 30% proziran). Igrajte se s 
    vrijednošću <code>opacity</code> da biste vidjeli kako to 
    funkcioniše.</p>
</body>
</html>

Gornje pravilo stila učiniće element paragrafa 70% neprozirnim (ili 30% prozirnim). Svojstvo neprozirnosti uzima vrijednost od 0,0 do 1,0. Postavka neprozirnosti: 1; učinio bi element potpuno neprozirnim (tj. 0% prozirnim), dok neprozirnost: 0; bi element učinio potpuno transparentnim (tj. 100% transparentnim).



CSS neprozirnost u Internet Exploreru 8 i nižim verzijama

Internet Explorer 8 i ranija verzija podržavaju svojstvo "alfa filter" samo za Microsoft da bi se kontrolirala prozirnost elementa.

p {
    filter: alpha(opacity=50);
    zoom: 1;  /* Popravite za IE7 */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS Opacity za IE8 i niže verzije</title>
<style>
  p {
    filter: alpha(opacity=50);
    zoom: 1;  /* Fix for IE7 */
  }
</style>
</head>
<body>
</body>
</html>


CSS neprozirnost za sve pretraživače

Kombinacijom oba gornja koraka dobićete neprozirnost za sve pretraživače.

p {
    opacity: 0.5;  /* Opacity za moderne pretraživače */
    filter: alpha(opacity=50);  /* Opacity za IE8 i niže */
    zoom: 1;  /* Popravite za IE7 */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Opacity That Works in All Browsers</title>
<style>
    p {
        opacity: 0.5;  /* Opacity za moderne pretraživače */
        filter: alpha(opacity=50);  /* Opacity za IE8 i niže */
        zoom: 1;  /* Popravite za IE7 */
    }
</style>
</head>
<body>
</body>
</html>  


CSS neprozirnost slike

Takođe možete napraviti prozirne slike koristeći CSS neprozirnost. Tri slike na sljedećoj ilustraciji su sa iste izvorne slike. Jedine razlike među njima su nivo neprozirnosti (opacity).



Promijenite neprozirnost slike prilikom prelaska mišem

Sljedeći primjer pokazuje uobičajenu upotrebu neprozirnosti CSS slike, gdje se neprozirnost slika mijenja kada korisnik premjesti pokazivač miša preko slike.

Snail Tortoise Octopus

Pomaknite pokazivač miša preko slika da biste vidjeli efekt.


Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Promijena neprozirnost slike prilikom prelaska mišem</title>
<style>
  table.opacity-demo{margin:20px 0 5px}
  table.opacity-demo td{text-align:center;padding:5px 40px 5px 0}
  table.opacity-demo td a,table.opacity-demo td a img{display:block}
  table.opacity-demo td a img{border:none;outline:none;opacity:.5}
  table.opacity-demo td a:hover img{opacity:1}
</style>
</head>
<body>
    <table class="opacity-demo">
      <tbody><tr>
          <td><a href="javascript:void(0);"><img alt="Snail" src="img/snail.png"></a></td>
            <td><a href="javascript:void(0);"><img alt="Tortoise" src="img/tortoise.png"></a></td>
            <td><a href="javascript:void(0);"><img alt="Octopus" src="img/octopus.png"></a></td>
         </tr>
  </tbody></table>
</body>
</html>  


Tekst u prozirnom okviru

Kada koristite neprozirnost na elementu, prozirna postaju ne samo pozadina elementa koji će imati transparentnost, već postaju transparentni i svi njegovi podređeni elementi. Tekst u prozirnom elementu otežava čitanje ako vrijednost neprozirnosti postane veća.

OPACITY OPACITY OPACITY OPACITY

Da biste to spriječili, možete koristiti prozirne PNG slike ili staviti tekstni blok izvan prozirnog okvira i vizualno ga gurnuti unutra koristeći negativnu marginu ili CSS pozicioniranje.

div {
    float: left;
    opacity: 0.7;
    border: 1px solid #949781;
}
p {
    float: left;
    position: relative;
    margin-left: -400px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer neprozirnog teksta u prozirnom okviru</title>
<style>
  div {
    float: left;
    opacity: 0.7;
    border: 1px solid #949781;
  }
  div img {
    display: block;
  }
  p {
    float: left;
    width: 340px;       
    padding: 30px;
    color: #000000;
    font-size: 24px;
    position: relative;
    margin-left: -400px
  }
</style>
</head>
<body>
    <div><img src="/examples/images/leaf.jpg" alt="Leaf"></div>
    <p>Ovaj je paragraf dao negativnu marginu kao da se vizualno 
    pojavljuje u okviru div, iako nije.</p>
</body>
</html>


CSS transparentnost pomoću RGBA

Uz RGB, CSS3 je predstavio novi način na koji RGBA određuje boju koja uključuje alfa prozirnost kao dio vrijednosti boje. RGBA (Red Blue Green Alpha) je skraćenica od Crveno plava zelena alfa. RGBA deklaracija je vrlo jednostavan način za postavljanje prozirnosti za boju.

div {
    background: rgba(200, 54, 54, 0.5);
}
p {
    color: rgba(200, 54, 54, 0.25);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer upotrebe transparentnosti koristeći CSS3 RGBA</title>
<style> 
  div {       
    padding: 20px;
    color: #000000;
    background: rgba(200, 54, 54, 0.5);
  }
  p {
    padding: 20px;        
    background: #dddddd;
    color: rgba(200, 54, 54, 0.25);
  }
</style>
</head>
<body>        
    <p>Boja teksta ovog paragrafa je prozirna, dok nema uticaja na boju pozadine.</p>
    <div>Boja pozadine ovog div elementa je prozirna, dok nema uticaja na boju teksta.</div>
</body>
</html>

Prva tri broja koja predstavljaju boju u RGB vrijednostima, tj. crvena (0-255), zelena (0-255), plava (0-255) i četvrta koja predstavljaju vrijednost alfa prozirnosti između 0 i 1 (0 boju čine potpuno prozirnom, dok ga vrijednost 1 čini potpuno neprozirnim). Jedna važna karakteristika koju treba napomenuti o RGBA prozirnosti je - sposobnost kontrole neprozirnosti pojedinačne boje. Pomoću RGBA boju teksta možemo učiniti prozirnom i ostaviti pozadinu netaknutom.


RGBA RGBA RGBA RGBA

Ili ostavite boju teksta i promijenite samo prozirnost pozadine.

RGBA RGBA RGBA RGBA

Možete vidjeti kako lako možete kontrolisati neprozirnost pojedinih boja umjesto cijelog elementa pomoću RGBA. Međutim, uvijek se preporučuje definisanje rezervne boje za pretraživače koji ne podržavaju RGBA boje.



Deklarisanje rezervne boje

Svi pretraživači ne podržavaju RGBA boje. Međutim, možete pružiti alternativu kao što su pune boje ili prozirne PNG slike za pretraživače koji to ne podržavaju.

p {
    /* Rezervni način za web pretraživače koji ne podržavaju RGBA */
    background: rgb(0, 0, 0);
    /* RGBa sa 0.5 opacity */
    background: rgba(0, 0, 0, 0.5);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer definisanja rezervne boje za RGBA</title>
<style> 
  p {
    padding: 20px;
    /* Fallback for web browsers that doesn't support RGBA */
    background:rgb(0, 0, 0);
    /* RGBa sa 0.5 opacity */
    background:rgba(0, 0, 0, 0.5);        
  }
</style>
</head>
<body>        
</body>
</html>