Side 1 af 1

Css3 faded image i firefox!

Indlæg: tors nov 25, 2010 17:28
af Gæst
Jeg har søgt og ledt, men ingen steder kan jeg finde en forklaring som denne:
<img src="images/pimp-dog.jpeg" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0;"/>
omskrevet til at virke i firefox!!
Har forsøgt mig med diverse javascripts, men de virker HELLER ikke i firefox!
Har forsøgt med -moz-opacity, men det fungerer tilsyneladende heller ikke.
mit billede skal fade ud så kun venstre del af billedet vises.
Jeg skal gerne bruge en løsning for jeg har deadline d.9/12-2010.
Rigtig god weekend!!

Re: Css3 faded image i firefox!

Indlæg: tors nov 25, 2010 17:50
af Kim Ludvigsen
Tjek denne side:
http://clagnut.com/sandbox/imagefades/

Deres kode skulle virke i alle browsere, og det virker i hvert fald i min Firefox.

Re: Css3 faded image i firefox!

Indlæg: tors nov 25, 2010 18:06
af Alodia
Tak Kim, Men jeg ser ikke det jeg gerne ville se....
Måske skal jeg løse det med PS, det er bare h....... til arbejde.

Re: Css3 faded image i firefox!

Indlæg: tors nov 25, 2010 18:10
af Alodia
Måske jeg har spurgt forkert...
Mine billeder i div-tagget skifter for hver ny side. Hvert billede skal være "gennemsigtigt" i ca. 1/3-del (højre side) og det skal det være "stationært" ikke animeret.
Der er MANGE billeder, derfor søger jeg en kode der virker både på IE og firefox!
Tusind tak

Re: Css3 faded image i firefox!

Indlæg: tors nov 25, 2010 19:11
af Kim Ludvigsen
Ok, jeg misforstod spørgsmålet. Prøv at kigge på denne side:
http://stackoverflow.com/questions/2630 ... t-an-image

Der er et eksempel på brug af svg - og en alternativ løsning, som burde virke i alle nyere browsere.

Re: Css3 faded image i firefox!

Indlæg: tors nov 25, 2010 20:30
af Alodia
hmmm.............der stod jeg lige af!!
Mine kodeegenskaber er vist blevet temmelig rustne!!
Kan du hjælpe mig med at sætte det rigtigt ind???

mit doc ser sådan ud:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<link rel="stylesheet" type="text/css" href="css1.css">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body >

</div>

<img src="images/pimp-dog.jpeg" style="filter: Alpha(opacity=0, finishopacity=100, style=1, startx=80, starty=0, finishx=50, finishy=0);"/>


</body>
</html

Re: Css3 faded image i firefox!

Indlæg: tors nov 25, 2010 20:53
af Kim Ludvigsen
Jeg forstår det desværre ikke - jeg håbede, du kunne forstå det.

Det nemmeste er nok at lave en div med linear gradient ved hjælp af css3, som de beskriver på siden, og så placere denne præcist ovenpå det billede, du vil have udtonet. Der står lidt mere om metoden med css3 her:
https://developer.mozilla.org/en/CSS/-m ... r-gradient
Der er et eksempel med gennemsigtighed nederst på siden.

Jeg kan desværre ikke hjælpe dig videre, da jeg intet kender til metoden udover det, som står på de tillinkede sider.

En anden løsning kunne måske være at lave billederne med udtoning i et grafikprogram - hvis der ikke er alt for mange billeder.

Ellers findes der måske et mere grafikorienteret forum et eller andet sted, der kan hjælpe.

Re: Css3 faded image i firefox!

Indlæg: fre nov 26, 2010 10:35
af Alodia
nåhhhh ja. Det kunne da være en mulighed! det vil jeg prøve! takker! Vender tilbage med feed-back hvis det virker!

Re: Css3 faded image i firefox!

Indlæg: fre nov 26, 2010 12:49
af Alodia
Så fandt jeg en løsning!
herunder viser jeg html hvor alpha channel er den der virker i IE
nedenunder har jeg lavet en maske sådan at jeg lægger to billeder oven i hinanden...det ene vha en div class i mit eksterne css og det andet er så en PNG der ligger ovenpå i mit div-tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<link rel="stylesheet" type="text/css" href="css1.css">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css1.css">
<head>

<body>

<div>
<img src="images/pimp-dog.jpeg"
style="filter: Alpha(opacity=0, finishopacity=100, style=1, startx=80, starty=0, finishx=50, finishy=0);"/>
</div>
<div class="bg-pic"><img src="images/maske.png" /></div>
</body>
</html>


css hertil:

@charset "utf-8";
/* CSS Document */

body {
background:#ffffff}

.bg-pic{
background-image:url(images/pimp-dog.jpeg);
background-repeat:no-repeat;
}

Re: Css3 faded image i firefox!

Indlæg: fre nov 26, 2010 12:51
af Alodia
Maske-metoden virker i både IE og FF.....

Re: Css3 faded image i firefox!

Indlæg: ons dec 07, 2011 17:34
af Kim Ludvigsen
Fint, og tak for tilbagemeldingen.

Jeg ved ikke, hvem din side skal henvende sig til, men du skal måske være opmærksom på, at det ikke vil virke i Internet Explorer 6, da den ikke forstår opacity på hverken den ene eller anden måde. Personligt tager jeg ikke længere hensyn til IE6-brugere, men hvis du henvender dig til brugere i virksomheder, der stadig bruger Windows 2000, kan det være et problem.