html - CSS3 + Webkit Effekt - virker ikke :-( - Udvikleren.dk

Tags: html css

Bruger #15228 @ 28.02.11 13:09

Hej..

Jeg har et problem, at jeg ikke kan få noget CSS3 og Webkit til at virke. Jeg er overhovedet ikke erfaren med Webkit/CSS3 og ved ikke rigtigt hvad Webkit gør/er faktisk.

Derfor spørger jeg jer.

http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/

Jeg skal ha' den der hedder:
FADE IN DESCRIPTION BOX EFFECT
til at virke. Men jeg har lavet den CSS +
HTML ? så forstår ikke hvorfor det ikke virker, men det har vel noget med det webkit at gøre?

Hvad gør jeg !!!! Tak!

8 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #15754 @ 28.02.11 13:15

989

Hvilken browser + version kører du med?

Bruger #15228 @ 28.02.11 13:19

Lige nu. Firefox den nyeste version.
Har testet i chrome, safari osv..
men det virker ikke. ser det ud til.

Bruger #15754 @ 28.02.11 13:20

989

Virker hans demo site for dig?
http://dinolatoga.com/demo/webkit-image-hover-effects/

Kan du skrive det kode du har prøvet?

Bruger #15228 @ 28.02.11 13:25

Ja demo-siden virker ganske glimrende.

HTML :

Kode

 <div id="box-blue">

                                                                        <div>
                                                                            <img src="images/dev7logo.png">
                                                                            <h3>Transformers</h3>
                                                                            <p>More than meets the eye</p>
                                                                        </div>


                                                                    </div><br />

CSS:

Kode

#box-blue{position:relative;}
#box-blue img{
opacity:1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#box-blue .details{
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

#box-blue .details:hover{
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Bruger #15754 @ 28.02.11 13:37

989

Der er nogle fejl i hans kode eksempel - det her virker kun i chrome - ved ikke helt hvad han har gjort så det virker i FF

Kode

 <style type="text/css">
#box-blue{position:relative;}
#box-blue img{
opacity:1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#box-blue .details{
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
width:360px;
height:327px;
}

#box-blue .details:hover{
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
 </style>
 
 <div id="box-blue">
	<img src="http://www.krymmel.dk/dev/media/.jkforum/test-pilot.png">
	<div class="details">
		<h3>Transformers</h3>
		<p>More than meets the eye</p>
	</div>
</div>
<br />

Indlæg senest redigeret d. 28.02.2011 13:38 af Bruger #15754

Bruger #3275 @ 28.02.11 14:58

1.736

-webkit-transition osv.. er til webkit-baserede browsere. Hvis de findes i firefox hedder de -moz-transition osv.

Bruger #2126 @ 28.02.11 15:11

215

Mangler du ikke at angive din .details class i html'en?
Pt er det kun id'et box-blue du anvender så vidt jeg kan se.. ( ? )

Bruger #10647 @ 28.02.11 20:05

233

Webkit er en renderengine som browsere kan benytte sig af så de ikke skal skrive helt fra bunden hvordan CSS og HTML skal fortolkes og printes pixel for pixel. De to mest populære browsere der bruger Webkit er Apple's Safari og Google Chrome. En række Adobe produkter bruger også Webkit.

Her er den kode jeg hurtigt skrev:

HTML kode

 <!doctype html>
 <!--[if IE]> <html lang="en" class="ie"> <![endif]-->
 <!--[if !(IE)]><!--> <html lang="en"> <!--<![endif]-->
 <head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         .fadeBoxWrapper {
             border: 2px solid #999;
             
             position:relative; /*Will nest any absolute elements inside*/
             
             line-height: 0; /*Zero line-height to avoid white gap*/
             
             /*Cross-browser inline-block*/
             display:-moz-inline-stack;
             display:inline-block;
             zoom:1;
             *display:inline;
         }
         
         .fadeBoxWrapper .description {
             width: 100%;
             height: 100%;
             
             line-height: 1.29; /*reset line-height*/
             
             position:absolute;
             top:0;
             left:0;
             
             color:#ffffff;
             text-align: center;
             font-family: Tahoma, sans-serif;
             
             background:rgba(0,0,0,.6);
             
             /*Cross-browser opacity*/
             opacity:.0;
             filter:alpha(opacity=0);
             -ms-filter:"alpha(opacity=0)";
             -moz-opacity:.0;
             _background:transparent;
             filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00000000', EndColorStr='#00000000');
         
             /*Cross-browser Animation*/
             -moz-transition: opacity 0.5s ease-out;  
             -o-transition: opacity 0.5s ease-out;  
             -webkit-transition: opacity 0.5s ease-out;  
             transition: opacity 0.5s ease-out;
         }
         
         .fadeBoxWrapper:hover .description
         {
             opacity:1;
             filter:alpha(opacity=100);
             -ms-filter:"alpha(opacity=100)";
             -moz-opacity:1;
             _background:transparent;
             filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#99000000', EndColorStr='#99000000');
         
             /*Cross-browser Animation*/
             -moz-transition: opacity 0.5s ease-out;  
             -o-transition: opacity 0.5s ease-out;  
             -webkit-transition: opacity 0.5s ease-out;  
             transition: opacity 0.5s ease-out;
         }
         
         /*Support for IE*/
         .ie .fadeBoxWrapper .description {
             display:none;
             visibility:none;
         }
         .ie .fadeBoxWrapper:hover .description {
             display:block;
             visibility:visible;
         }
     </style>
 </head>
 <body>
     <div class="fadeBoxWrapper">
         <img src="img.jpg" alt="" />
         <div class="description">
             <h3>Description Title</h3>
             <p>
                 Here's the description
             </p>
         </div>
     </div>
 </body>
 </html>

Håber den er lettere at følge med i end den på sitet. Jeg har kommenteret hvor jeg har brugt nogle af de cross-browser løsninger jeg har i mit bibliotek. Husk at lægge mærke til HTML tagget i starten som tager højde for IE.

Du kan se resultatet på: http://labs.tixz.dk/Fade-in%20Description%20Effect/

Når du vil lave cross-browser CSS3 er denne side rigtig god at kigge på: http://css3please.com/

CSS3 + Webkit Effekt - virker ikke :-(

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler