www.romver.ru / Полный список статей / CSS прозрачность

CSS opacity (CSS prozra4nost')

W3C v svoey rekomendacii CSS3 opredelaet svoystvo opacity dla primenenia effekta prozra4nosti k elementam stranici. Zna4eniem dannogo svoystva avlaetsa 4islo v diapazone ot 0.0 do 1.0. Pri zna4enii ravnom nulu element stanovitsa polnost'u prozra4nim, a pri zna4enii ravnom edinice, sootvetstvenno, sovsem ne prozra4nim. Svoystvo mojno primenat' k lubim elementam stranici.

Primer (zadana prozra4nost' 0.2, 0.5 i 1.0):

.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; } /* Poslednee pravilo mojno ne ukazivat', t.k. po umol4aniu element i tak polnost'u viden. */

Nravitsa? Da? Tak 4to samoe vrema podportit' nastroenie. Ponatnoe delo, 4to raznie brauzeri po-raznomu realizuut dannoe svoystvo: kto voob6e ne realizuet, kto realizuet, ispol'zua svoe sobstvennoe nazvanie dla dannogo svoystva, a kto fil'tri ispol'zuet.

Brauzeri podderjivau6ie CSS3 opacity

Ponimaut CSS3 svoystvo opacity sleduu6ie brauzeri: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

Dla ustanovki prozra4nosti 4erez skript ispol'zuem: object.style.opacity

Mozilla 1.6 i nije, Firefox 0.8

Starie Mozilla i Firefox 0.8 ispol'zuut svoё nazvanie dannogo svoystva: -moz-opacity

Dla ustanovki prozra4nosti 4erez skript ispol'zuem: object.style.MozOpacity

Safari 1.1, Konqueror 3.1

Dannie tovari6i, postroennie na dvijke KHTML, ispol'zuut dla upravlenia prozra4nost'u svoystvo: -khtml-opacity

Dla ustanovki prozra4nosti 4erez skript ispol'zuem: object.style.KhtmlOpacity

Odnako, imeyte vvidu, 4to dannoe svoystvo dostupno li6' v dannix versiax etix brauzerov. Safari s versii 1.2 ispol'zuet CSS3 opacity, no pri etom Konqueror star6e versii 3.1, perestav podderjivat' -khtml-opacity, ne vvel podderjku CSS3 opacity.

V anvare 2003 goda korporacia Apple predstavila noviy brauzer dla Mac OS X, osnovanniy na dvijke KHTML, Safari. Blagodara licenzii, na usloviax kotoroy rasprostranaetsa KHTML, vse izmenenia, vnosimie v nego razrabot4ikami Apple, publikuutsa v vide pat4ey, kotorie, posle peresmotra, dobavlautsa v osnovnuu vetku KHTML.

Pri4inoy po kotoroy Konqueror utratil vozmojnost' realizacii effekta prozra4nosti kak raz i zaklu4aetsa vo vnesenie v adro KHTML pat4ey ot Safari, t.k. Safari ispol'zuet vozmojnosti prisutstvuu6ie v Mac OS X, no kotorix net v KDE.

Kone4no rano ili pozdno eta situacia budet ispravlena, no na danniy moment v posledney versii 3.5 situacia ostaetsa prejney.

Internet Explorer 5.5+

Danniy brauzer, na4inaa s versii 5.5 i vklu4aa poslednuu na segodna6niy den' versiu Internet Explorer 7, realizuet prozra4nost' 4erez Alpha DirectX fil'tr. Stoit otmetit', 4to danniy fil'tr ispol'zuet zna4enie prozra4nosti v diapazone ot 0 do 100 (a ne ot 0.0 do 1.0). Tak je otme4u, 4to fil'tr mojno primenat' li6' k elementu s ustanovlennim svoystvom height, ili width, ili position so zna4eniem absolute, ili writingMode so zna4eniem tb-rl, ili s contentEditable ustanovlennim v true.

Primer (ustanavlivaem prozra4nost' na polovinu):

.img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }/* sintaksis IE5.5+ (avlaetsa predpo4titel'nim) */
.img2 { filter: alpha(opacity=50); } /* sintaksis IE4 */

Dla ustanovki prozra4nosti 4erez skript ispol'zuem: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(stroka parametrov)". Dla polu4enia prozra4nosti analogi4noy prozra4nosti W3C ispol'zuem v ka4estve stroki parametrov zna4enie "opacity=4islo ot 0 do 100". Opisanie vsex parametrov smotrite na stranice opisania fil'tra. Tak je o4en' vajno znat' sleduu6ee: s vixodom Windows XP poavilos' sglajivanie ekrannix 6riftov metodom ClearType, a vmeste s nim i pobo4nie effekti v IE pri ispol'zovanii etogo metoda sglajivania; v na6em slu4ae, esli primenaetsa prozra4nost' k elementu s tekstom pri vklu4ennom metode sglajivania ClearType, to tekst perestaet normal'no otobrajat'sa (polujirniy tekst - bold, naprimer, dvoitsa, mogut tak je poavlat'sa razli4nie artefakti, naprimer v vide 4ёrto4ek). Dla togo 4tobi ispravit' polojenie, dla IE nujno zadat' fonoviy cvet, CSS svoystvo background-color, elementu k kotoromu primenaetsa prozra4nost'. K s4ast'u v IE7 bag ustranen.

CSS opacity simbioz

Pod simbiozom a podrazumevau ob&edinenie raznix stiley dla raznix brauzerov v odnom CSS pravile dla polu4enia nujnogo effekta, t.e. dla realizacii kross-brauzernosti.

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 i nije */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

Po suti, nujnimi avlautsa pervoe i poslednee pravila, dla IE5.5+ i brauzerov ponimau6ix CSS3 opacity, a dva pravila po seredine avno pogodi ne delaut, no i ne o4en' to i me6aut (sami re6ayte, nujni li oni vam).

Javascript opacity simbioz

Teper' poprobuem ustanovit' prozra4nost' 4erez skript s u4etom osobennostey raznix brauzerov opisannix vi6e.

function setElementOpacity(sElemId, nOpacity)
{
var opacityProp = getOpacityProperty();
var elem = document.getElementById(sElemId);

if (!elem || !opacityProp) return; // Esli ne su6estvuet element s ukazannim id ili brauzer ne podderjivaet ni odin iz izvestnix funkcii sposobov upravlenia prozra4nost'u

if (opacityProp=="filter") // Internet Exploder 5.5+
{
nOpacity *= 100;

// Esli uje ustanovlena prozra4nost', to menaem eё 4erez kollekciu filters, ina4e dobavlaem prozra4nost' 4erez style.filter
var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;
if (oAlpha) oAlpha.opacity = nOpacity;
else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Dla togo 4tobi ne zateret' drugie fil'tri ispol'zuem "+="
}
else // Drugie brauzeri
elem.style[opacityProp] = nOpacity;
}

function getOpacityProperty()
{
if (typeof document.body.style.opacity == 'string') // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9)
return 'opacity';
else if (typeof document.body.style.MozOpacity == 'string') // Mozilla 1.6 i mlad6e, Firefox 0.8 
return 'MozOpacity';
else if (typeof document.body.style.KhtmlOpacity == 'string') // Konqueror 3.1, Safari 1.1
return 'KhtmlOpacity';
else if (document.body.filters && navigator.appVersion.match(/MSIE ([d.]+);/)[1]>=5.5) // Internet Exploder 5.5+
return 'filter';

return false; //net prozra4nosti
}

Funkcia prinimaet dva argumenta: sElemId - id elementa, nOpacity - ve6estvennoe 4islo ot 0.0 do 1.0 zadau6ee prozra4nost' v stile CSS3 opacity.

Dumau, 4to stoit poasnit' 4ast' koda funkcii setElementOpacity otnosa6uusa k IE.

var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;

if (oAlpha) oAlpha.opacity = nOpacity;
else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";

Mojet vozniknut' vopros, a po4emu bi ni ustanavlivat' prozra4nost' putem prisvaivania (=) svoystvu elem.style.filter = '...';? Za4em ispol'zuetsa "+=" dla dobavlenia v konec stroki svoystva filter? Otvet prost, dla togo 4tobi ne "zateret'" drugie fil'tri. No pri etom, esli dobavit' fil'tr takim obrazom vtoroy raz, to on ne izmenit ranee ustanovlennie zna4enia etogo fil'tra, a budet prosto dobavlen v konec stroki svoystva, 4to ne korrektno. Poetomu, esli fil'tr uje ustanovlen, to nujno im manipulirovat' 4erez kollekciu primenennix k elementu fil'trov: elem.filters (no u4tite, esli fil'tr e6ё ne bil nazna4en elementu, to upravlat' im 4erez dannuu kollekciu nevozmojno). Dostup k elementam kollekcii vozmojen libo po imeni fil'tra, libo po indeksu. Odnako fil'tr mojet bit' zadan v dvux stilax, v korotkom stile IE4, ili v stile IE5.5+, 4to i u4teno v kode.

Plavnoe izmenenie prozra4nosti elementa

Gotovoe re6enie. Ispol'zuem biblioteku opacity.js

<html>
<head>
<!-- Ustanavlivaem izna4al'nuu prozra4nost' kartinok -->
<style type="text/css">
img {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>

<!-- Podklu4aem biblioteku -->
<script type="text/javascript" src="/js/opacity.js"></script>

<script type="text/javascript">
// Sozdaem pravilo izmenenia prozra4nosti: zadaem ima pravila, na4al'nuu i kone4nuu prozra4nost', a takje neobazatel'niy parametr zaderjki vliau6iy na skorost' smeni prozra4nosti
 fadeOpacity.addRule('oR1', .3, 1, 30);
</script>

</head>
<body>

<img id="fImg1" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/strawberry.jpg" width="100" height="80" />
<img id="fImg2" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/tomato.jpg" width="82" height="100" />
<img id="fImg3" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/sweet_cherry.jpg" width="98" height="97" />

</body>
</html>

Osnovnie 6agi:

1. Podklu4aem biblioteku funkciy;
2. Opredelaem pravila;
3. Vizivaem metod fadeOpacity() dla peretekania cveta ot na4al'nogo k kone4nomu, ili fadeOpacity.back() dla vozvrata k na4al'nomu cvetu.

Razjevivaem

Kak podklu4at' biblioteku, dumau, vidno iz primera vi6e. Teper' stoit poasnit' opredelenie pravil. Do togo kak vizivat' metodi plavnogo izmenenia prozra4nosti, nujno opredelit' pravila, po kotorim budet vipolnat'sa process: nujno opredelit' na4al'nuu i kone4nuu prozra4nost', a takje, pri jelanii, ukazat' parametr zaderjki, kotoriy vliaet na skorost' processa smeni prozra4nosti.

Pravila opredelautsa s pomo6'u metoda fadeOpacity.addRule

Sintaksis: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Argumenti:

• sRuleName - ima pravila, zadaёtsa proizvol'no;
• nStartOpacity i nFinishOpacity - na4al'naa i kone4naa prozra4nost', 4isla v diapazone ot 0.0 do 1.0 ;
• nDelay - zaderjka v millisekundax (neobazatel'niy argument, po umol4aniu raven 30).

Sam vizov feydinga prozra4nosti delaem 4erez metodi fadeOpacity(sElemId, sRuleName), gde sElemId eto id elementa, a sRuleName ima pravila. Dla vozvrata prozra4nosti v isxodnoe sostoanie ispol'zuetsa metod fadeOpacity.back(sElemId).

:hover dla prostoy smeni prozra4nosti

E6ё otme4u, 4to dla prostoy smeni prozra4nosti (no ne postepennogo eё izmenenia) v samiy raz podxodit psevdo-selektor :hover, kotoriy pozvolaet opredelit' stili dla elementa, v moment navedenia na nego mi6i.

<style type="text/css">
a:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>

<a href="javascript:void(0)"> <img src="/images/articles/strawberry.jpg" width="100" height="80" /> </a>

Obratite vnimanie, 4to kartinka razme6ena vnutri elementa A. Delo v tom, 4to Internet Explorer vplot' do versii 6, ponimaet psevdo-selektor :hover, tol'ko primenitel'no k ssilkam, a ne k lubim elementam, kak polojeno v CSS (v IE7 polojenie ispravleno).

Prozra4nost' i zazubrenniy tekst v IE

Naposledok xo4u skazat', primenaa prozra4nost' k tekstu bol'6ogo razmera v Internet Explorer, vi stolknetes' s tem, 4to etot tekst budet zazubrennim. Dla ustranenia etogo nepriatnogo "speceffekta" sleduet zadat' fon tekstovomu elementu, k kotoromu primenaetsa prozra4nost', ustanoviv CSS cvoystvo background-color.

Avtor: Cigirla6 Igor' tigir.com/opacity.htm