Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Efecto borroso o nublado o desenfocado, sin filter blur. (http://www.forosdelweb.com/f53/efecto-borroso-nublado-desenfocado-sin-filter-blur-450093/)

furoya 14/12/2006 11:40

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.

caricatos 16/12/2006 09:56

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...:neurotico :

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

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

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 :adios:

furoya 21/12/2006 18:06

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.

caricatos 22/12/2006 03:26

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 :arriba:

furoya 18/01/2007 14:27

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 (:adios: 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. :golpeado:

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. :'(

furoya 17/06/2008 14:49

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]

furoya 20/10/2008 17:09

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

furoya 28/10/2010 15:05

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


La zona horaria es GMT -6. Ahora son las 08:44.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.