-webkit-box-reflect in Firefox und IE - CSS

Ich bin immer noch neu zu Reflexionen in CSS und so weiter, so dass einige Probleme damit haben. Für die Startseite wurde mir gesagt, dass ich Text und dann ein Bild reflektieren muss (sowie einen komplizierten Schatten dahinter, aber das steht auf meiner To-Do-Liste).-webkit-box-reflect in Firefox und IE - CSS

Für Chrom/Safari (webkit) I

-webkit-box-reflektieren bekommen haben: unter 0px -webkit-Gradienten (linear, links oben, links unten, von (transparent), Farb-stop (70%, transparent), bis (rgba (255, 255, 255, 2, 2))));

Sieht sehr schön ... aber ... offensichtlich funktioniert es nur mit Chrom/Safari. Wie würde ich im Internet Explorer (7/8/9, wenn möglich) und Firefox den gleichen Effekt erzielen?

Danke, Nicholas Carter

Quelle

2012-09-22 Nicholas-c

Vielleicht können Sie ein jQuery mit this plugin Rückfall zur Verfügung stellen. Dieses Tutorial spricht auch über cross-browser reflection.

Browser zielen nicht auf Reflexionen unterstützen Sie Modernizr verwenden können.

Dieser Build: http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes fügt eine no-cssreflections Klasse zu Ihrer Seite <html> Tag hinzu.

Dann können Sie eine bestimmte CSS-Regel hinzufügen:

.no-cssreflections #element-id { 
    /* custom CSS rule */ 
}

oder via JavaScript:

if(!Modernizr.cssreflections){ 
    /* run plugin or whatever */ 
}

Quelle

2012-09-22 16:31:30 Giona

Sie sollten das -moz-element Attribut für Firefox verwenden ..

Für Reflexion wird es be:

#reflection { 
    /* It's a copy of the original element... */ 
    background: -moz-element(#reflected-element) 
       bottom left no-repeat; 

    /* ... turned upside down ... */ 
    -moz-transform: scaleY(-1); 

    /* ... with a gradual fade-out effect towards the bottom. */ 
    mask: url(#reflection-mask); 
}

What is -moz-element?

Reference

Quelle

2012-09-22 16:34:21

-webkit-box-reflect in Firefox und IE - CSS

Antwort

Verwandte Themen