ugrás a tartalomhoz

Mozilla és az opacity tulajdonság

Bártházi András · 2004. Május. 8. (Szo), 11.33
A Mozilla böngészőcsalád szinte naponta fejlődik, egyre jobb a szabvány támogatása, egyre több funkciót valósít meg. Ilyen az Mozilla 1.7 RC1-es változattól, illetve a Firefox frissebb nightly buildjeiben elérhető CSS 3 opacity tulajdonság is a CSS 3 szín moduljából. Ez a tulajdonság egy elem áttetszőségét szabályozza, egyik alkalmazási módja egy a :hover-el összekötött megoldás - mely feleslegessé teszi több kép készítését. Lássunk egy példát a használatára!

Elsőnek készítsünk helyezzünk ki oldalunkra pár képet:

<p class="pelda">
  <img src="/kep1.jpg" width="100" height="100" />
  <img src="/kep2.jpg" width="100" height="100" />
  <img src="/kep3.jpg" width="100" height="100" />
</p>
Majd ehhez rendeljük hozzá a következő stílust:

.pelda {
  text-align: center;
}
.pelda img {
  opacity: 0.7;
  border: 2px solid transparent;
  margin: 10px;
}
.pelda img:hover {
  opacity: 1;
  border: 2px solid #000;
}
A lényeg nyilván az opacity tulajdonságon van, a képnek egy 0.7-as áttetszőséget állítottunk be, amitől egy kicsit elhalványodik. A :hover hatására, ha felé visszük az egérkurzort, akkor visszanyeri eredeti megjelenését, az áttetszősége megszűnik. A végeredmény megtekinthető az említett böngészőkben (és például Safariban).
 ■
1

Opacity - mindenhol

js · 2004. Május. 10. (H), 15.59
Az opacity-t már régóta használom a hnt.hu-n, de ott az a cél, hogy minden böngészőben (tehát az olvasók minimum 90%-ánál) működjön... Ezt úgy oldottam meg, hogy az opacity: 0.8; mellé beírtam ezt a sort is: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);.
---jul
2

Re: Opacity - mindenhol

Bártházi András · 2004. Május. 10. (H), 18.11
Itt egy jó összefoglaló a cross-browser megoldásra:

http://www.domedia.org/oveklykken/css-transparency.php

-boogie-
6

:-(

kgyt · 2004. Május. 13. (Cs), 11.08
Bezzeg az Operát hanyagolják a fejlesztők... :-(
(Egyik sem megy benne...)

--
Szeretettel: Károly György Tamás
kgyt##kukac##kgyt.hu - http://kgyt.hu
8

Re: :-(

Bártházi András · 2004. Május. 13. (Cs), 12.07
Szerintem az Opera fejlesztők hanyagolják ezt a lehetőséget. Opera alatt hogy lehet megoldani?

-boogie-
3

Opacity alkalmazás

sly · 2004. Május. 11. (K), 16.48
Még 1 oldal ami müködik IE és Mozzila alat is:

http://cuki.try.hu

-sly-
4

Re: Opacity alkalmazás

Anonymous · 2004. Május. 12. (Sze), 07.22
Mozilla alatt viszont nem...
5

Re: Opacity alkalmazás

sly · 2004. Május. 12. (Sze), 22.37
Bocs, de othon 35 db böngésző van feltelepítve windows-omra. Úgy csiáltam meg az oldalt hogy kiírja hogy melyik böngészőkkel müködik. Sajnos a mozzila első verziói annyira kaotikussak voltoak, hogy nem csináltam meg hozzájuk az oldalt. Én is arra töreketek hogy minnél platform föggetlenebb legyen, de ezen az oldalon XML-be kellet a tartalmat letölteni, és ezt nem minden böngésző tudja.

-sly-
9

Re: Opacity alkalmazás

Anonymous · 2004. Május. 14. (P), 06.11
Oké, akkor pontosítok, Mozilla 1.6 alatt, ami a legfrissebb stabil kiadás nem működik az oldal menüje.
7

Opera??

kgyt · 2004. Május. 13. (Cs), 11.10
--
Szeretettel: Károly György Tamás
kgyt##kukac##kgyt.hu - http://kgyt.hu