Resplandor

Joaca · #1 (**permalink**) 07/07/2011, 22:46

Hola todos.

Pregunta hay alguna forma de simular un resplandor a un div.

Gracias.

cristian_cena · #2 (**permalink**) 08/07/2011, 01:23

Hola Joaca:
Con box-shadow, una propiedad de css3.
O para todos los navegadores (y sus versiones) asignando una imagen png a la propiedad background.
En este último caso debes generar un sprite y al menos dos divs extra.

Saludos.

Joaca · #3 (**permalink**) 08/07/2011, 10:25

Men muchas gracias.

sirve mucho lo unico es que como raro para IE no funciona.

cristian_cena · #4 (**permalink**) 08/07/2011, 18:47

box-shadow en ie funciona a partir de la version 9, por eso "para todos" usa sprites.
aca una tabla con el soporte que da internet explorer (y versiones) a css (y versiones)

Joaca · #5 (**permalink**) 08/07/2011, 22:14

Pero men raro porque lo utilice y funciona al pelo pero en IE te comento que no. No se donde andara el error.

Saludos.

cristian_cena · #6 (**permalink**) 10/07/2011, 09:38

yo tampoco je XD

furoya · #7 (**permalink**) 21/07/2011, 13:22

No estoy seguro si es lo que buscan.

Letras con borde de otro color

Glow Filter

Glow Filter Sample

Usando javascript también se pueden generar efectos con canvas. Y recordemos que los *.png con canal alfa se deben guardar en un formato compatible para web. La opción aparece en el menú, generalmente.

cristian_cena · #8 (**permalink**) 21/07/2011, 13:58

Hola furoya.
Me refería a que como voy a adivinar donde está el error si no tengo código para ver XD.
Se valoran los links.
Saludos, espero que andes bien.

emprear · #9 (**permalink**) 21/07/2011, 14:58

Guiándome por las respuestas de @Joaca, supongo que efectivamente box-shadow es lo que está buscando.

Un buen fix para versiones < IE9 lo puede encontrar en
http://css3pie.com/

Además de habilitar otras propiedades CSs3 para IE

Saludos

furoya · #10 (**permalink**) 31/07/2011, 08:56

Yo no acostumbro recomendar el uso de esos documentos que se agregan a la página para "crear" o "corregir" un efecto (o defecto) porque muchos suponen que son 'mágicos' y que con sólo linkearlos se solucionan todos los problemas. De alguna manera los asocian a los documentos tipo *.css o *.js "clásicos". Y en practicamente todos los casos no son más que eso, estilos aplicados con un escript; pero el drama está en que existen para que los desarrolladores apuren el trabajo, no para que los copien y peguen quienes no tienen idea de lo que están haciendo. Porque no siempre funcionan o no siempre son tan cut&paste, y hay que ajustarlos al diseño de la página.
Encima, cuando "no andan", esta gente no se pone a aprendr y lo corrige, sino que viene a llorar al Foro esperando que hagamos el trabajo por ellos. Y ni hablar de los que explican cualquier cosa, no ponen ejemplos, ni enlaces a demos, y esperan que adivinemos lo que les pasa. Que la mayoría de las veces es evidente, no lo ven porque no quieren pensar, o trabajar, o realmente no saben nada de desrrollo web; en cuyo caso no deberían usar esos "complementos", y se terminó el problema.
Insisto, no estoy pidiendo que todos los sepan escribir, pero si no pueden abrirlos y entender cómo funcionan, entonces que no los usen.

Este efecto en particular se puede hacer sencillamente con CSS (propietario, estándar, propuesto). A menos que hayamos adivinado mal, y Joaca esté pidiendo otra cosa, como ...

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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>BORDE BRILLANTE.</title>
<script type="text/javascript">
var constelacion = "estrellas0";

function paralaje(){
constelacion = (constelacion == "estrellas0") ? "estrellas1" : "estrellas0";

document.getElementById(constelacion).style.left = azimut(34) + "px";
document.getElementById(constelacion).style.top = azimut(26) + "px";

setTimeout("paralaje()" , 60);
}

function azimut(D){
var precesion = Math.floor(Math.random()*D) * -20;
return(precesion)
}

onload = paralaje;
</script>
<style type="text/css">
body {color: whithe; background-color: navy; }

#marco {width: 680px; height : 520px; background-color: black; margin: 0; position: relative; overflow: hidden; margin: 10px; }

#imagen0 {width: 640px; height : 480px; margin: 0; position: absolute; top: 20px; left: 20px; }

#imagen1 {width: 640px; height : 480px; margin: 0; position: absolute; top: 20px; left: 20px; clip: rect(20px,620px,460px,20px);
}

#estrellas0 {width: 1280px; height : 960px; background-color: transparent; margin: 0; position: absolute; top: 0; left: 0; overflow: hidden; background-image: url(http://img685.imageshack.us/img685/2254/brillos.gif); }

#estrellas1 {width: 1280px; height : 960px; background-color: transparent; margin: 0; position: absolute; top: 0; left: 0; overflow: hidden; background-image: url(http://img685.imageshack.us/img685/2254/brillos.gif); }
</style>
</head>
<body>

<h2>Simula un borde animado con destellos.</h2>

<center><div id="marco">
<div id="estrellas0">
</div>

<img src="http://img153.imageshack.us/img153/6062/basurald.jpg" id="imagen0">

<div id="estrellas1">
</div>


<img src="http://img153.imageshack.us/img153/6062/basurald.jpg" id="imagen1">
</div>
</center>

<img width="200px" height="200px"  src="http://img685.imageshack.us/img685/2254/brillos.gif">

</body>
</html>

Supongo que de ahí debe venir el comentario del sprite; porque es así, cristian_cena, acá muchos pretenden que seamos brujos. No sólo explican mal sino que no ponen un ejemplo —itero—.

Aprovecho que en este tema están ustedes que suelen responder seguido (no como yo, que elijo un par de temas al azar por semana, y quizá después ni los contesto) para preguntar : ¿no están un poco hartos de los que vienen a postear mensajes lamentables?.
Sus temas no aportan nada, y nuestras respuestas no pueden hacer milagros para levantarlos. Las más de las veces repetimos por enésima vez lo que ya dijimos.

Sí, este debate también se repitió por años, pero al menos va a servir para machacar la idea; a ver si alguno siente vergüenza y nos aporta un poco mejor.

Imágenes :
※

※

una imagen ponerla de borde en una tabla

Sprites css

emprear · #11 (**permalink**) 31/07/2011, 11:46

Furoya:

Muchas veces me hago el mismo planteo

Cita:

"¿no están un poco hartos de los que vienen a postear mensajes lamentables?"

Pero lo pienso 2 veces y prefiero eludir la respuesta.
De la misma manera que eludí hacer mi aporte en
http://www.forosdelweb.com/f18/cada-...7/#post3910639

A veces lamentables, otras desquiciantes (nunca me olvido de este en particular
http://www.forosdelweb.com/f4/combob...8/#post3544251)

Es como la televisión, lo programas se repiten como hace 50 años, es como que todo está hecho, pero como se dice, "el público se renueva".. y se sigue adelante.

En tanto me dé el tiempo y crea que puedo aportar algo a un tema, lo seguiré haciendo. Y de paso, por supuesto aprender cosas nuevas, como por ejemplo, del código que acabas de exponer, ya mismo, en cuanto termne de contestar lo estoy implementando para analizarlo.

Si hiciesemos un filtro, aplicando tus premisas (las cuales comparto, que quede claro), probablemente los casi 3.700.000 posts de Foros del Web podrían reducirse a la cuarta o quinta parte.

Quizás este sea uno de los secretos por los que FDW a diferencia de otros foros por los que he transitado y han ido desapareciendo sin pena ni gloria, sigue vigente.
En fin, hay mucha tela para cortar, como sea, aqui estoy. intentando ayudar, intentando aprender, y por sobre todo, divirtiéndome.

Un abrazo

PD: Ya probe tu "Borde Brillante", y te anticipo, al lado de dónde esta la basura voy a ponerme vestido de Papa Noel, y esta será la tarjeta de mis próximas navidades.

furoya · #12 (**permalink**) 03/08/2011, 13:27

Excelente idea para tarjeta navideña. Aunque no sé si a los que viven en ese edificio del centro de Buenos Aires les gustaría recibir a semejante Papá Noel (San Nicolás, Santa Claus, Viejo Pascuero o como lo llamen en cada lugar donde nos lean). Era basura en serio, y les taparon la puerta ...

Pasando al otro asunto, el segundo enlace que pusiste es más patético que gracioso. No sé si hay que resignarse a que aparezca esta gente.

El otro realmente da para debatirlo mucho, y justamente ya se hizo; el mejor aporte es que no está en un subforo para registrados y sí en uno muy popular, por lo que lo lee más gente.
Lástima que en ése ya empezaron con un concepto errado, que encima, con mi comentario previo aquí, estoy ayudando —sin querer— a dejarlo instalado, en vez de removerlo definitivamente.
Voy a ver si posteo algo allá; a pesar de que —insisto— hubo otros anteriores más trabajados.

Antes de leerte puse un tema en el foro General, que no tiene tanto que ver, pero propone alguna ayuda para evitar esos temas ripiosos.

Gustos privados.

Estaba por meter más versiones del código de ejemplo, pero no vale la pena. Tampoco es la gran cosa. Dejo, no más, otro link que que se me olvidó poner arriba

Marquesina de luces animadas

cristian_cena · #13 (**permalink**) 03/08/2011, 15:40

Hola, creo que no debemos ser tan duros :)

Cuando veamos un tema del tipo "haceme esto gratis porque yo soy vivo y tu tonto" lo salteamos y listo, con su correspondiente valoración negativa y un comentario privado haciendole saber que es un gil.

Cuando por otra parte se plantean mal las preguntas, actuemos con paciencia, porque a lo mejor esta persona intenta hacer algo que nunca hizo, y como va a elaborar una pregunta correcta si no sabe la respuesta. A este lo ayudo una vez. si a la respuesta no amplio el tema, ni se le despejaron las dudas de como encarar la pregunta, ni postea codigo si se lo pido, simplemente me borro.

En ultima, nadie esta obligado a responder y si lo hacemos es para ayudar. El que se crea vivo, que valla solo con su viveza. El que quiera aprender y se esfuerze mas en elaborar la pregunta que uno en responderla va a tener siempre mi ayuda, en la medida que pueda.

saludos, muy buenos los links.