Css3 faded image i firefox!

Her kan du dele tips og tricks til computeren eller internettet med andre brugere i forummet.

Css3 faded image i firefox!

Indlægaf Gæst » tors nov 25, 2010 17:28

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!!
Gæst
 

Re: Css3 faded image i firefox!

Indlægaf Kim Ludvigsen » tors nov 25, 2010 17:50

Tjek denne side:
http://clagnut.com/sandbox/imagefades/

Deres kode skulle virke i alle browsere, og det virker i hvert fald i min Firefox.
Mvh.
Kim Ludvigsen
Kim Ludvigsen
Site Admin
 
Indlæg: 7140
Tilmeldt: tors jun 08, 2006 0:49

Re: Css3 faded image i firefox!

Indlægaf Alodia » tors nov 25, 2010 18:06

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.
Alodia
 
Indlæg: 6
Tilmeldt: tors nov 25, 2010 17:18

Re: Css3 faded image i firefox!

Indlægaf Alodia » tors nov 25, 2010 18:10

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
Alodia
 
Indlæg: 6
Tilmeldt: tors nov 25, 2010 17:18

Re: Css3 faded image i firefox!

Indlægaf Kim Ludvigsen » tors nov 25, 2010 19:11

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.
Mvh.
Kim Ludvigsen
Kim Ludvigsen
Site Admin
 
Indlæg: 7140
Tilmeldt: tors jun 08, 2006 0:49

Re: Css3 faded image i firefox!

Indlægaf Alodia » tors nov 25, 2010 20:30

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
Alodia
 
Indlæg: 6
Tilmeldt: tors nov 25, 2010 17:18

Re: Css3 faded image i firefox!

Indlægaf Kim Ludvigsen » tors nov 25, 2010 20:53

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.
Mvh.
Kim Ludvigsen
Kim Ludvigsen
Site Admin
 
Indlæg: 7140
Tilmeldt: tors jun 08, 2006 0:49

Re: Css3 faded image i firefox!

Indlægaf Alodia » fre nov 26, 2010 10:35

nåhhhh ja. Det kunne da være en mulighed! det vil jeg prøve! takker! Vender tilbage med feed-back hvis det virker!
Alodia
 
Indlæg: 6
Tilmeldt: tors nov 25, 2010 17:18

Re: Css3 faded image i firefox!

Indlægaf Alodia » fre nov 26, 2010 12:49

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;
}
Alodia
 
Indlæg: 6
Tilmeldt: tors nov 25, 2010 17:18

Re: Css3 faded image i firefox!

Indlægaf Alodia » fre nov 26, 2010 12:51

Maske-metoden virker i både IE og FF.....
Alodia
 
Indlæg: 6
Tilmeldt: tors nov 25, 2010 17:18

Re: Css3 faded image i firefox!

Indlægaf Kim Ludvigsen » ons dec 07, 2011 17:34

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.


Senest placeret øverst af Anonymous ons dec 07, 2011 17:34.
Mvh.
Kim Ludvigsen
Kim Ludvigsen
Site Admin
 
Indlæg: 7140
Tilmeldt: tors jun 08, 2006 0:49


Tilbage til Tips & Tricks - bruger til bruger

Hvem er online

Brugere der læser dette forum: Ingen og 3 gæster