Foros del Web » Creando para Internet » CSS »

Efecto borroso o nublado o desenfocado, sin filter blur.

Estas en el tema de Efecto borroso o nublado o desenfocado, sin filter blur. en el foro de CSS en Foros del Web. La idea es crear un borroneado que no funcione solamente en IExplorer , y -de ser posible- que mejore un poco la vista de los ...
  #1 (permalink)  
Antiguo 14/12/2006, 11:40
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Efecto borroso o nublado o desenfocado, sin filter blur.

La idea es crear un borroneado que no funcione solamente en IExplorer, y -de ser posible- que mejore un poco la vista de los filtros blur y motionblur, que es bastante floja.

Hace un par de meses hice una búsqueda aquí y no lo encontré ni como pregunta ni como respuesta; así que preparé un ejemplo

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html> 
<head> 

<title>Efecto blur cross-browser.</title>
<style>
body {font-size:100%; font-family:"times new roman", serif; background-color:#000000; color:#ffffff; }
#texto {position:relative; font:bold 2.5em/110% arial, 
sans-serif; height:1em; width:100%; }
#borroso {position:absolute; width:100%; }
#borroso span {position:absolute; color:#009900; filter:alpha(opacity=20); moz-opacity:.2; khtml-opacity:.2; opacity:.2; }

#blur0 {top:-2px; left:-2px; }
#blur1 {top:2px; left:-2px; }
#blur2 {top:-2px; left:2px; }
#blur3 {top:2px; left:2px; }
#blur4 {top:-4px; left:-4px; }
#blur5 {top:4px; left:-4px; }
#blur6 {top:-4px; left:4px; }
#blur7 {top:4px; left:4px; }
</style> 

<script>
var titulo , espanes ;

function inicia(){
titulo = document.getElementById("borroso");
espanes =  titulo.getElementsByTagName("span").length - 1;

titulo.getElementsByTagName("span")[espanes].style.visibility = "hidden";

for(b=0; b<espanes; b++){
titulo.getElementsByTagName("span")[b].style.visibility = "visible";
}
}

function aclara(){

for(b=0; b<espanes; b++){
titulo.getElementsByTagName("span")[b].style.visibility = "hidden";
}
titulo.getElementsByTagName("span")[espanes].style.visibility = "visible";
}


function borronea(){
for(b=0; b<espanes; b++){
titulo.getElementsByTagName("span")[b].style.visibility = "visible";
}
titulo.getElementsByTagName("span")[espanes].style.visibility = "hidden";
}

onload = inicia;
</script>
</head> 
<body>
<h2>Efecto <i>blur</i>. (IE6/7 , FF2 , Op9 , Saf? , Kon?)</h2>
<p id="texto" style="position:relative; font:bold 2.5em/110% arial, sans-serif;" 
onmouseover="aclara()" onmouseout="borronea()">

<span id="borroso"> 

<span id="blur0">&#9608;QWERTYUIOP&bull;</span>

<span id="blur1">&#9608;QWERTYUIOP&bull;</span>

<span id="blur2">&#9608;QWERTYUIOP&bull;</span>

<span id="blur3">&#9608;QWERTYUIOP&bull;</span>

<span id="blur4">&#9608;QWERTYUIOP&bull;</span>

<span id="blur5">&#9608;QWERTYUIOP&bull;</span>

<span id="blur6">&#9608;QWERTYUIOP&bull;</span>

<span id="blur7">&#9608;QWERTYUIOP&bull;</span>

<span id="blur8" style="color:#009900; filter:alpha(opacity=100); moz-opacity:1; 
khtml-opacity:1; opacity:1;">&#9608;QWERTYUIOP&bull;</span>
</span> 

</p>
<b>Cambia al pasar el puntero.</b>
</body></html>
Como 'CSS/HTML' es muy engorroso de escribir y muy fácil de entender. Para meterlo en un código fuente será mejor usar javascript. Aquí el JS está solamente para "aclarar" el texto cuando se pasa el puntero.

Al igual que con todo efecto que usa capas superpuestas, habrá que agregar algún método para que al seleccionar y copiar nos llevemos sólo una; y que el blureado se vea en pantallas, porque no tiene sentido en voz, braille o hasta papel.

El filtro alpha( opacity ) tiene la sintaxis de IE4 porque funciona al menos hasta la versión 6; pero el que quiera la puede actualizar.

Última edición por furoya; 23/06/2008 a las 09:50 Razón: actualización
  #2 (permalink)  
Antiguo 16/12/2006, 09:56
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Efecto borroso o nublado o desenfocado, sin filter blur.

Hola amigo furoya, hacía tiempo que no te leía... y como siempre... con tus cosas raras... :

Siempre me han gustado los efectos y que se vean en todos los navegadores , enhorabuena... (la verdad es que solo lo ví en explorer, pero viendo el código no creo que nos estés engañando )

¿Con qué nuevo código nos sorprenderás... ?

Saludos y felicidades (creo que algún año atrás comentaste que no te "iban" estas liestas -tal vez me equivoque-, pero me da igual)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 21/12/2006, 18:06
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: Efecto borroso o nublado o desenfocado, sin filter blur.

¡Qué buena memoria!. Pero no me tomes tan en serio; ya sabes que soy un viejo amargo capaz de quejarse hasta de la Navidad.

Es cierto que nos encontramos poco en el Foro, y es porque no estoy viniendo tan seguido como antes.

No te digo que sea una obsesión, pero para mí es importante que los efectos se vean en todos los navegadores que me sea posible. Especialmente los que se consideran "clásicos" de Internet Explorer . Me parece la mejor manera de fomentar el uso de Firefox y otros. Los que tienen signo de pregunta yo tampoco los probé, seguramente en Opera menor que 9 no va andar y habrá que usar un hack. De los demás necesitaría una confirmación para quitar los "?".

Lo de la "sorpresa" y las "cosas raras" lo tomo como otro de tus elogios absolutamente inmerecidos pero muy valorados.

Gracias y muchas felicidades para tí también.

furoya.
  #4 (permalink)  
Antiguo 22/12/2006, 03:26
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Efecto borroso o nublado o desenfocado, sin filter blur.

Hola:

La mala noticia es que opera (la versión 9) se vé mal (las capas borrosas se ven por debajo de la que tiene el texto normal...

Seguro que es algo tonto... y salta la consola de error por lo de los filtros... tal vez se cancelen todos los estilos por eso...
Quitando las cosas que provocan error (un color que se te coló, y los filters y demás) sigue fallando...

Será algo tonto, pero te lo dejo para cuando tengas una copia de opera y lo puedas probar.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 18/01/2007, 14:27
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: Efecto borroso o nublado o desenfocado, sin filter blur.

Pero qué bien. Funciona la transparencia y no anda todo lo demás.

A diferencia de otros desarrolladores que "odian" a Opera ( Hola Tunait!), yo siempre recomendé este navegador como una buena opción. Aunque debo reconocer que es muy difícil hacerle mostrar este tipo de inventos. -Que son justamente los que nos gustan a nosotros-

Ya corregí lo del "color"; ese código (#35;35;) era un numeral(#), lo uso como un truco para evitar que el editor del foro me convierta los códigos de caracteres al caracter correspondiente; y, como soy muy desprolijo, al usar la herramienta "Buscar y reemplazar" termino cambiándole el numeral hasta los códigos de colores.

Lo del filtro alpha() sí me sorprende. Si bien es una función, está dentro del CSS y no tiene que ser vista desde la Consola Javascript; si el navegador no la interpreta, simplemente la ignora, no tira un error ni mucho menos bloquea el rendering de los otros formatos. Esto no creo que tenga solución desde la hoja de estilos, habrá que esperar a que algún día haga (o hagan) la versión final en javascript.

Y lo del texto que "queda debajo" me confundió al principio, porque supuse que hablabas del z-index. Más tarde entendí que aparecía "como en el renglón de abajo" y me parece que la solución sería darle a los estilos inline de blur8 una posición absoluta y 'top: 0px; left: 0px;'.

Yo ya estoy curado de espanto con esto de corregir código a ciegas, pero sigo intentándolo porque es más fuerte que yo. Además, encontrar un Op es todavía más difícil que encontrar un FF.
  #6 (permalink)  
Antiguo 17/06/2008, 15:49
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Efecto borroso o nublado o desenfocado, sin filter blur.

Bue. era más fácil de lo que pensaba. Aproveché para corregir unos entities, pero no cambié la linea para Opera así se puede ver mejor donde estaba el error.

Hay que modificar esto, y anda en los tres.

Código:
...
#texto {position:relative; font:bold 2.5em/110% arial, 
sans-serif; height:1em; }
#borroso {position:absolute; }
#borroso span {position:absolute; color:#009900; filter:alpha(opacity=20); moz-opacity:.2; khtml-opacity:.2; opacity:.2; }
...

[edit]
En realidad hubo que modificar algo más. Lo que arreglé para Opera 9.25 lo desarreglé para IE6. Ahora el cambio sí está en el código del primer mensaje.
[/edit]

Última edición por furoya; 23/06/2008 a las 09:54
  #7 (permalink)  
Antiguo 20/10/2008, 18:09
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Efecto borroso o nublado o desenfocado, sin filter blur.

Y no hay caso. Ahora en Opera 9.5 otra vez se ve mal. No sé por qué tiene una interpretación diferente de opacity, pero si a las capas no les pongo un fondo me borronea el texto contra el fondo negro del contenedor. Y se desdibuja mal.
Al final les terminé poniendo un fondo blanco (que se ve mejor que el negro) solamente para Opera.

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html> 
<head> 

<title>Efecto blur cross-browser.</title>
<style>
body {font-size:100%; font-family:"times new roman", serif; background-color:#000000; color:#ffffff; }
#texto {position:relative; font:bold 2.5em/110% arial, 
sans-serif; height:1em; width:100%; }
#borroso {position:absolute; width:100%; background-color:#ffffff; }
#borroso span {position:absolute; color:#009900; ba ckground-color:#ffffff; filter:alpha(opacity=20); moz-opacity:.2; khtml-opacity:.2; opacity:0.2; }

#blur0 {top:-2px; left:-2px; }
#blur1 {top:2px; left:-2px; }
#blur2 {top:-2px; left:2px; }
#blur3 {top:2px; left:2px; }
#blur4 {top:-4px; left:-4px; }
#blur5 {top:4px; left:-4px; }
#blur6 {top:-4px; left:4px; }
#blur7 {top:4px; left:4px; }
</style> 

<script>
var titulo , espanes ;
var fondoOpera = "#ffffff";
function inicia(){
titulo = document.getElementById("borroso");
espanes =  titulo.getElementsByTagName("span").length - 1;

titulo.getElementsByTagName("span")[espanes].style.visibility = "hidden";

for(f=0; f<espanes; f++){

if(navigator.userAgent.indexOf("Opera")!=-1){
titulo.getElementsByTagName("span")[f].style.backgroundColor = titulo.getElementsByTagName("span")[espanes].style.backgroundColor = fondoOpera;
}

titulo.getElementsByTagName("span")[f].style.visibility = "visible";
}
}

function aclara(){

for(f=0; f<espanes; f++){
titulo.getElementsByTagName("span")[f].style.visibility = "hidden";
}
titulo.getElementsByTagName("span")[espanes].style.visibility = "visible";
}


function borronea(){
for(f=0; f<espanes; f++){
titulo.getElementsByTagName("span")[f].style.visibility = "visible";
}
titulo.getElementsByTagName("span")[espanes].style.visibility = "hidden";
}

onload = inicia;
</script>
</head> 
<body>
<h2>Efecto <i>blur</i>. (IE6/7 , FF2+ , Op9+ , Chr , Saf? , Kon?)</h2>
<p id="texto" style="position:relative; font:bold 2.5em/110% arial, sans-serif;" 
onmouseover="aclara()" onmouseout="borronea()">

<span id="borroso"> 

<span id="blur0">&#9608;QWERTYUIOP&bull;</span>

<span id="blur1">&#9608;QWERTYUIOP&bull;</span>

<span id="blur2">&#9608;QWERTYUIOP&bull;</span>

<span id="blur3">&#9608;QWERTYUIOP&bull;</span>

<span id="blur4">&#9608;QWERTYUIOP&bull;</span>

<span id="blur5">&#9608;QWERTYUIOP&bull;</span>

<span id="blur6">&#9608;QWERTYUIOP&bull;</span>

<span id="blur7">&#9608;QWERTYUIOP&bull;</span>

<span id="blur8" style="color:&#009900; filter:alpha(opacity=100); moz-opacity:1; 
khtml-opacity:1; opacity:1;">&#9608;QWERTYUIOP&bull;</span>
</span> 

</p>
<b>Cambia al pasar el puntero. En Opera se agrega un fondo de color blanco.</b>
</body></html> 
Si alguien tiene una idea mejor ...

Texto transparente en Firefox (como filter chroma)

Efecto borroso o nublado o desenfocado, sin filter blur.

Voltear texto verticalmente en Firefox ( sin filter : flipV(); flipH() )
  #8 (permalink)  
Antiguo 28/10/2010, 16:05
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Efecto borroso o nublado o desenfocado, sin filter blur.

Bueno, el efecto tal como está en el primer mensaje ya anda en Opera 10.63, Firefox 3.6.11 y Chrome 5.0.375.125 por lo menos.


Y esta versión hecha con CSS también

Código:
<p>
<span style="text-shadow: 0.1em 0.1em 0.2em blue, 0.1em 0.1em 1em blue, 0 0 0.2em blue;
color: rgba(0,0,255,0.5);
font: bold 40px arial, helvetica, sans-serif;">
Foros del Web.</span>
</p>
Qué viejos me están quedando todos estos engendros.

Letras con borde de otro color
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:33.