Filtry v IE – CSS – Fórum – Programujte.com

Zdravím všechny, 

mám problém s css filtry v IE. Pokud nastavím otočení textu na vertikální zobrazení v IE 7, 8, filtr nefunguje. 

Teď jsem zjistil, že nefungují filtry žádné, ani do detailu zkopírované z internetu, typu:

<h1>Lorem <span style="zoom: 1; filter: fliph">ipsum dolor sit</span> amet</h1>
<h1>Lorem <span style="display:inline-block; filter: flipv">ipsum dolor sit</span> amet</h1>
<h1>Lorem <span contentEditable style="filter: shadow(color=red, direction=45);">ipsum dolor sit</span> amet</h1>

Nevíte náhodou někdo, v čem dělám chybu? Musím ještě nastavit prohlížeč, aby filtry akceptoval nebo něco podobného? 

Děkuji za jakoukoliv pomoc

Ondra

http://www.jakpsatweb.cz/css/filter.html
http://www.jakpsatweb.cz/…-filtry.html
http://msdn.microsoft.com/…s.85%29.aspx
Kdyz si kliknes v seznamu filtru na msdn, tak je tam obvykle i priklad.

http://msdn.microsoft.com/en-us/library/ms533086%28v=vs.85%29.aspx

Ten example mi funguje v IE9. Funguje to i pri prepnuti IE na rezim 7 a 8 (nastroj shift+f12). Vyzaduje to povoleni javascriptu. Pri spousteni jako localhost to dole vypise zadost, zda ma spustit zakazany obsah.

<STYLE>
   DIV.aFilter {filter:
    progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
    width: 150px; color: #FF0000;}
</STYLE>

<DIV CLASS="aFilter">
This red text is displayed with a 45-degree blue shadow.
</DIV>

#2 peter
Předně díky za reakci. Tento příklad mi tedy taky funguje, ale pokud nastavím otoční textu, filtr nejde. Viz.

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/*IE8 a IE7*/

V čem tedy dělám chybu?

BasicImage

http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx

http://jsfiddle.net/qSdch/

Mi se to otoci po kliknuti.
Jestli treba nekombinujes 2 filtry do 1 tagu, tim se ten prvni prepise a vykona se jen ten, ktery zustane, druhy. Tez je mozne, ze IE 2 filtry naraz i kdyby byli ve dvou tazich nezvlada. Ja filtry nepouzivam. Jen jsem to kdysi zkousel, ale kdyz to nebylo cross browser, tak v mem oblibenem ff je to na nic.

<!-- This DIV is the target container for an image.  -->        
<br><br><br>
<DIV ID="oDiv" STYLE="position:absolute; left:270px;" >
        An Image - >    
        <IMG SRC='http://www.google.cz/images/icons/product/chrome-48.png' />
    </DIV>
<BUTTON onclick="oDiv.style.filter=
        'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'">
    Rotate 270 degrees</BUTTON><BR/>
<BUTTON onclick="oDiv.style.filter=''">Clear Filter</BUTTON><BR/>

#4 peter
 Mně se ani jeden z příkladů nehne, jak zkopírovaný kód spuštěný na localhostu, tak odkaz http://jsfiddle.net/qSdch/ 

Opravdu už nevím, je to teda asi mým prohlížečem..

Co si ze svejch mladejch let pamatuju, tak v hodně starejch IEčkách fungovala rotace jen na obrázky... tj. ne na divy.

To ano. Ale, kdyz mi to v IE9 pri prepnuti na IE7 jede (a zakazani stylu, protoze se jsfidle zobrazilo tak, ze obsahovou cast prekryl obrazek na pozadi :) ), tak predpokladam, ze s nejakym updatem pro IE7 to pujde i v IE7. Bez nej nejspis ne.

Ondřej Škvor: Co treba sem dat cely kod, ktery ti nejede? Treba to zpusobuje chybny doctype. Pak to muze byt treba ten update. Vic mne nenapada, nemam tu ani stroj, na kterem bych to mohl testovat. Ale muzu ti to doma otestovat na IE11, chces? :)

Na te strance s basicImage filtrem je tez priklad s pouzitim 3 filtru. Takze to jde do jednoho css. Obvykle takhle nejde jine veci resit, totiz, tak sory za mystifikaci.

<DIV STYLE="width:100%; filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);">
        Blurry text with smudge of gray.</div>     

Jo, a cetl sis vubec tu stranku na msdn? Jsou tam takove zajimave poznamky, ze treba rotovany blok musi mit layout, coz u nich znamena definovanou sirku a vysku. Tez tam pisi, ze by to melo jet od IE4. Cili ta rotace textu mohla selhavat prave na tom, ze nenadefinoval rozmery.

Na jakpsatweb ale basic image neni vypsany, tak to by zas bylo proti te poznamce o IE4. jpw maji stary obsah a mozna takovy filtr jeste neexistoval pro IE4.

http://www.jakpsatweb.cz/css/css-filtry.html
http://www.jakpsatweb.cz/…riklady.html
http://www.jakpsatweb.cz/…try_mix.html
http://www.satzansatz.de/…parency.html - tady treba pisi o problemech s png v IE6/7 a pruhlednosti. Tez tam je poznamka, ze nektere problemy vyresi position: relative; + z-index. Opet poznamka o width, height + zoom. Zminuji problem s podtrzenim u odkazu. Tez zminuji jako mozne crossbrowser reseni s podminkovymi komentari [if lt IE 7]. Pak tam pisi o selhani htc javascriptu. Ruzne hacky pro IE5. Problem s pruhlednosti gifu v IE5. Atd.

Nevim, vic ti asi neporadim. Co jsem ti poslal, tak mi funguje, bohuzel. Takze, pokud mas neco, co nefunguje a to i na jinem pc, pak mas neco, co nemam. Pri spousteni lokalne (file:///c:\...), mimo online web, je treba povolit jakesi nastaveni, na ktere upozorni zlutou hlaskou nahore nebo dole, jinak ti javascript filtru nebude spoustet.

Pro FF a novejsi IE by mohl fungovat js canvas. Pripadne svg filtr.

<style>
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale2 {
filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale2'><feColorMatrix type='matrix' values='0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0 0 0 1 0'/></filter></svg>#grayscale2"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

</style>
<img src="butt-spinavemodra.png" class="grayscale"><br>
<img src="butt-spinavemodra.png" class="grayscale2"><br>
<img src="butt-spinavemodra.png">

Jo, to je samozrejme priklad na cernobily filtr ne otaceni. A ten xml kod se da ulozit do souboru a uvest do url jeho nazev podobne jako u background-image (tam se zase pouziva base64 zapis misto souboru).

#7 peter
No nefunguje mi ale ani ten kód, kterej je nahoře jako první příspěvek. Pokud zprovozním tento kód, odrotuju to klidně pomocí flipů. Ať nastavím doctype jakkoliv, nefunguje to.

No, snad poradi nekdo jiny. v IE9 mi to bez problemu funguje v rezimu zobrazeni IE9 i IE7. Ta hlaska, kterou to pise je, ze chce povolit aktivni obsah, activex. Treba je to defaultne v IE7 zakazane (tusim, ze tam vyvojari zakazali nejake veci, ktere v pozdejsich verzich zas povolili). Zkus prepnout zabezpeceni na nejnizsi uroven na chvili.

<h1>Lorem <span contentEditable style="color:#ff0000; filter: shadow(color=#FF8800, direction=45) flipv fliph;">ipsum dolor sit</span> amet</h1>

#10 peter
Je to divné, protože pro IE9 mi normálně funguje třeba 

-ms-transform: rotate(-90deg);

ale ať ty filtry zkouším jak chci, nic se neděje. Přestože jsem kód od Vás přímo zkopíroval, vypnul všechna zabezpečení prohlížeče a nastavil režim prohlížeče i režim dokumentu, nic s tím nehne. Fakt je to zvláštní. Asi to teda bude mým prohlížečem. Zkusím reinstal