Filtry v IE – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
8. 7. 2013   #1
-
0
-

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

Nahlásit jako SPAM
IP: 84.244.117.–
Reklama
Reklama
peter
~ Anonymní uživatel
2528 příspěvků
15. 7. 2013   #2
-
0
-

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>
Nahlásit jako SPAM
IP: 193.84.207.–
15. 7. 2013   #3
-
0
-

#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?

Nahlásit jako SPAM
IP: 84.244.117.–
peter
~ Anonymní uživatel
2528 příspěvků
16. 7. 2013   #4
-
0
-

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/>
Nahlásit jako SPAM
IP: 193.84.207.–
16. 7. 2013   #5
-
0
-

#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..

Nahlásit jako SPAM
IP: 84.244.117.–
Anonymní amtatér
~ Anonymní uživatel
1 příspěvek
16. 7. 2013   #6
-
0
-

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

Nahlásit jako SPAM
IP: 213.226.205.–
peter
~ Anonymní uživatel
2528 příspěvků
17. 7. 2013   #7
-
0
-

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">
Nahlásit jako SPAM
IP: 193.84.207.–
peter
~ Anonymní uživatel
2528 příspěvků
17. 7. 2013   #8
-
0
-

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).

Nahlásit jako SPAM
IP: 193.84.207.–
17. 7. 2013   #9
-
0
-

#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.

Nahlásit jako SPAM
IP: 84.244.117.–
peter
~ Anonymní uživatel
2528 příspěvků
18. 7. 2013   #10
-
0
-

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>
Nahlásit jako SPAM
IP: 193.84.207.–
18. 7. 2013   #11
-
0
-

#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

Nahlásit jako SPAM
IP: 84.244.117.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 14 hostů

Podobná vlákna

Filtry — založil simmarek1234

Filtry — založil georginho

Filtry výběru z DB — založil maniakum

Filtry - ošoupaný styl — založil PetrXXXL

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý