JMiur [E]

Los filtros y transiciones son una propiedad CSS exclusiva de Internet Explorer y es una pena que no sea posible usarlos en otros navegadores así que, lo que sigue sólo es a título informativo y no recomiendo que se use así como tampoco recomiendo usar propiedades que sólo comprende Firefox.


Este ejemplo sólo es visible en Internet Explorer

La sintaxis de estas propiedades parece simple pero no lo es tanto y puede aplicarse a muchas etiquetas de bloque que tengan definido un layout, es decir, un ancho (width) y un alto (height). A esto le suman una característica interesante: pueden combinarse sin restricciones.

Si quisiéramos aplicarlo a una imagen, escribiríamos:

img {filter: tipo;}

o bien:

<img src="laImagen" style="filter: tipo;" />

¿Y dónde está lo complejo? Pués que la definición del tipo de efecto es un tanto engorrosa. Estos son dos ejemplos:
filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=50)

filter: progid:DXImageTransform.Microsoft.Wave(freq=1,lightStrength=10,phase=10,strength=5);
La que sigue es una lista con los filtros disponibles, sus parámetros y algunos ejemplos.
Alpha ajusta la opacidad
Style 0 | 1 | 2 | 3
Fondo 'skyblue'
Fondo 'red'
Fondo 'green'
Ver/Ocultar parámetros [+]
filter: progid:DXImageTransform.Microsoft.Alpha(parámetros);

Style 0|1|2|3 (tipo uniforme, lineal, radial, rectangular)
Opacity el valor que define la opacidad (0 transparente, 100 opaco)
FinishOpacity es un valor que se usa en Style=0
StartX y StartY es la posición inicial en Style=1
FinishX y FinishY es la posición final en Style=1
BasicImage ajusta el color, la rotación y la opacidad
Rotation 0 | 1 | 2 | 3
Mirror | Reset
Invert | Reset
X-Rray | Reset
Grayscale | Reset
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.BasicImage(parámetros)

Rotation 0 (0 grados) 1 (90º) 2 (180º) 3 (270º)
Opacity nivel de opacidad
Mirror 0 | 1
Invert 0 | 1
X-Ray 0 | 1
Grayscale 0 | 1
Blur desenfoca el objeto
Blur | Reset
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.Blur(parámetros)

PixelRadius radio del área opaca
MakeShadow 0 | 1
ShadowOpacity nivel de opacidad
Chroma define a un color como transparente
skyblue | Reset
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.Chroma(parámetros)

Color valor de color a filtrar
DropShadow silueta sólida que crea una sombra
Shadow | Reset
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.dropShadow(parámetros)

Color color de la sombra
OffX valor para el eje X de la sombra
OffY valor para el eje Yde la sombra
Positive 0 | 1
Emboss textura repujada en tonos de gris
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.Emboss()

No tiene parámetros.
Engrave textura grabada en tonos de gris
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.Engrave()

No tiene parámetros.
Glow agrega brillo alrededor de los bordes
Color 1 | 2 | 3
Strength 5 | 10 | 15
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.Glow(parámetros)

Color valor de color del brillo
Strength tamaño del efecto
Gradient crea un gradiente de colores
Color 1 | 2 | 3 | 4
Horizontal
Vertical
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.Gradient(parámetros)

GradientType 0 horizontal | 1 vertical
StartColorStr color inicial
EndColorStr color final
Light efectos de luces en el objeto
Lights | Reset
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.Light(parámetros)

Enabled 0 | 1
AddAmbient valor tipo (a,b,c,d)
AddCone valor tipo (a,b,c,d,e,f,g,h,i,j)
AddPoint valor tipo (a,b,c,d,e,f,g)
ChangeColor valor
ChangeStrength valor
Clear 0 | 1
MoveLight valor tipo (a,b,c,d,e)
Pixelate convierte el objeto en pequeños cuadrados de color
MaxSquare 2 | 5 | 10
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.Pixelate(parámetros)

MaxSquare ancho máximo de los cuadrados
Wave distorsión sinoideal
Freq 1 | 5
LightStrength 10 | 50
Phase 10 | 50
Ver/Ocultar parámetros [+]
filter: progid: DXImageTransform.Microsoft.Wave(parámetros)

Freq cantidad de ondas
LightStrength intensidad de la luz
Phase offset ángulo sinoideal
Strenght tamaño del efecto

21 comentarios:

Anahí  

JMiur, me gustaría saber si estos filtros ayuda por ej. a que se vean las transparencias en IE sin afectarlas en FF. Porque tengo varias imgs. que en el IE se les ve el fondo. También si con alguno de estos puedo hacer que se vea una img. de fondo (la flechita de "ir arriba")
Salute y gracias.

Responder
Anahí  

Acabo de darme cuenta que Picassa convierte .gif en .png, ¿puede ser?

Responder
Anahí  

Hoy estoy preguntona, JMiur, disculpe, pero vi que en algunos agregadores y directorios me aparece un cuadradito negro en vez del "vista previa" de la página, ¿tiene idea si hay algo que pueda hacer al respecto? (creo que desde que cambié la img de cabecera de "detrás de" por "en lugar de")
Saludos.

Responder
Luz de Luna  

uff cuántas cositas y no las podemos usar!

Responder
JMiur  

Si, Luz, algunas son interesantes, es una pena.

Anahí: no, este tipo de cosa no ayudaría. AHy una posibilida que es agregar un script de Google queresuelve algo de ese problema de las transparencias de los PNGs (AQUI).
Y es cierto, si bien Blogger y Picassa los aceptan, los GIFs son convertidos.

Responder
Solidaridad  

Hola JMIUR, por problemas no había vuelto a visitar el Internet durante un tiempo. me encontré en mi pagina que el widget Wowzio el cual modifique al quitarles las propaganda, el asunto es que dejo de pasar las imágenes automáticamente
dime una cosa como puedo hacer un widyidt idéntico. o que tengo que quitar exactamente para no tener problemas.
Gracias JMIUR

Responder
HoraZulu  

Baran soy Platero del foro, te he enlazado en mi blog, te dejo el mio por si tienes un hueco. Un saludo y mucha suerte. http://plateropoquer.blogspot.com/

Responder
Orang3  

Me Encanto tu blog

Pasen por el mio.
http://orangesex.blogspot.com

Responder
JMiur  

Solidaridad:
Eso es usual, al quitar alguna parte suelen dejar de funcionar. En este caso, sólo coloca debajo del visor una barra indicando la procedencia del gadget. No es aconsajeble modificar este tipo de script a menos que la página indique lo contrario.

Responder
Anahí  

JMiiur, puse el script que me recomienda en ese link, pero se me deforman las letras de los títulos... se vuelven GIGANTES... (¡uy, qué miedo!) Bueno, el caso es que lo saqué, ¿alquna sugerencia?
Tante grazie.

Responder
Anahí  

Aclaro, por las deudas, hablo del IE.
Chau.

Responder
JMiur  

Anahí:
Lo primero sería saber si el script soluciona el tema de las tranasparencias. Si no lo hace, no olvidamos del tema y buscamos otra solución. Si lo hace, entonces, el tema del tamaño de los títulos puede solucionarse, no sé cómo se veían pero ímagino que podría cambiarse el tamaño en:

.post h3 {
...

en lugar de font size:140%; poner font size:18px;

Si el script funciona lo de las transparencias, no hay problema, esos detalles los podemos corregir con facilidad, debo verlos online pero seguramente es sencillo.

Responder
PedroX  

Esta bien el efecto.. Pero ¿No podias poner otra imagen mas bonita? xDDDDDDDD

Mira... no sabes de un "Leer Mas" que no salga EN TODOS LOS POST... Siempre esta ese problema, y si se borra el codigo cuando se esta editando la entrada, igual sale!!

Lo Necesito.. Sera que sabes de uno??

Responder
JMiur  

No sé cuál modelo estas usando, Pedro pero, en este post hay una referencia a eso que dices que te ocurre.

En ese mismo post hay enlaces al método que uso en este blog y como ves, el problema de la repetición está solucionado.

PD: La imagen del señor, es escencial par el efecto :D

Responder
Anahí  

JMiur, no, no funcionan las transparencias. Lo volví a probar, y no. Lo dejé puesto en el este bló, para que le eche una mirada:
http://ahahi-cajademusica.blogspot.com
Y las letras gigantes son en la sidebar.
Gracias.

Responder
JMiur  

Entonces, lo mejor es buscar otra solución. En La Bloguería hay una entrada sobre PNGs transparentes y lo mismo aquí.

Pregunta: ¿IE6 o IE7?

Responder
Anahí  

JMiur, yo tengo el IE6, y acabo de probar con el script de la bloguería, y tampoco. El otro link que me dice no anda.
Saludos.

Responder
Anahí  

Me olvidaba: lo dejé puesto en los dos blogs, porque ese no me agiganta los títulos.
Salu2

Responder
JMiur  

Obviamente, puse mal el enlace $) Es este. El tema PNG es complejo, siempre que no sea muy complciado, podrías ir probando soluciones.

Una buena idea sería además, actualizar IE. Puede hacerse sin restricciones ya que está liberado hace tiempo y puede descargarse desde la web oficial AQUÍ. Eso, soluciona muchos problemas.

Responder
Anahí  

Gracias, JMiur, iré probando con paciencia.
Tengo el IE6 porque con el IE7 tenía problemas, y como no lo uso nomás que para estas cuestiones, con el 6 me pareció suficiente. Lo que me interesa es cómo vean el bló los que navegan con IE, porque si es por mí lo mando a recontra-paseo.
Saludos.

Responder
JMiur  

Perfecto; entonces, avisame cuando lo coloques, dime donde está y yo me fijo en IE7.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR