Foros del Web » Creando para Internet » CSS »

Resplandor

Estas en el tema de Resplandor en el foro de CSS en Foros del Web. Hola todos. Pregunta hay alguna forma de simular un resplandor a un div. Gracias....
  #1 (permalink)  
Antiguo 07/07/2011, 22:46
 
Fecha de Ingreso: mayo-2009
Mensajes: 111
Antigüedad: 7 años, 9 meses
Puntos: 2
Pregunta Resplandor

Hola todos.


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

Gracias.
  #2 (permalink)  
Antiguo 08/07/2011, 01:23
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Resplandor

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.
  #3 (permalink)  
Antiguo 08/07/2011, 10:25
 
Fecha de Ingreso: mayo-2009
Mensajes: 111
Antigüedad: 7 años, 9 meses
Puntos: 2
Respuesta: Resplandor

Men muchas gracias.

sirve mucho lo unico es que como raro para IE no funciona.
  #4 (permalink)  
Antiguo 08/07/2011, 18:47
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Resplandor

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)
  #5 (permalink)  
Antiguo 08/07/2011, 22:14
 
Fecha de Ingreso: mayo-2009
Mensajes: 111
Antigüedad: 7 años, 9 meses
Puntos: 2
Respuesta: Resplandor

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

Saludos.
  #6 (permalink)  
Antiguo 10/07/2011, 09:38
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Resplandor

yo tampoco je XD
  #7 (permalink)  
Antiguo 21/07/2011, 13:22
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 4 meses
Puntos: 317
Respuesta: Resplandor

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.
  #8 (permalink)  
Antiguo 21/07/2011, 13:58
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Resplandor

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.
  #9 (permalink)  
Antiguo 21/07/2011, 14:58
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 8 meses
Puntos: 1567
Respuesta: Resplandor

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 31/07/2011, 08:56
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 4 meses
Puntos: 317
Respuesta: Resplandor

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
  #11 (permalink)  
Antiguo 31/07/2011, 11:46
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 8 meses
Puntos: 1567
Respuesta: Resplandor

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.
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 31/07/2011 a las 11:58
  #12 (permalink)  
Antiguo 03/08/2011, 13:27
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 14 años, 4 meses
Puntos: 317
Respuesta: Resplandor

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
  #13 (permalink)  
Antiguo 03/08/2011, 15:40
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Resplandor

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.

Etiquetas: Ninguno
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 05:38.