Foros del Web » Creando para Internet » CSS »

Bordes sombreados c/transparencia

Estas en el tema de Bordes sombreados c/transparencia en el foro de CSS en Foros del Web. Hola Maestros.. Quiera saber si es posible con css, crear un borde con una imagen pero q esta tenga una transparencia y se fundiera con ...
  #1 (permalink)  
Antiguo 16/10/2006, 14:00
 
Fecha de Ingreso: abril-2003
Mensajes: 201
Antigüedad: 14 años, 7 meses
Puntos: 0
Bordes sombreados c/transparencia

Hola Maestros..
Quiera saber si es posible con css, crear un borde con una imagen pero q esta tenga una transparencia y se fundiera con el fondo (degradado) , asi como muestro en la sgte imagen:



o bien, crear ese efecto sin el uso de una imagen ?

Gracias
  #2 (permalink)  
Antiguo 16/10/2006, 14:24
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
no, con CSS estándar no se puede. Creo que había un filtro propietario de Microsoft que hacía algo similar, pero por supuesto "solo para IE" (no me acuerdo exactamente que filtro era).

CSS 3 tiene una propiedad llamada opacity (obiamente solo soportada en los navegadores modernos, léase Firefox y Opera) que justamente trabaja el tema de las transparencias, pero las aplica de una forma uniforme..
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 16/10/2006, 14:39
 
Fecha de Ingreso: abril-2003
Mensajes: 201
Antigüedad: 14 años, 7 meses
Puntos: 0
:(

gracias de todos modos
  #4 (permalink)  
Antiguo 16/10/2006, 17:19
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Y también va a tener una shadow.
Y una para bordes redondeados.
Y también tendremos que esperar un poco.
  #5 (permalink)  
Antiguo 16/10/2006, 17:53
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
y con png? deberas usar el filtro para las transparencias de png's en IE pero podria funcionar ¿no?
  #6 (permalink)  
Antiguo 16/10/2006, 18:06
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Cita:
Iniciado por sjam7 Ver Mensaje
y con png? deberas usar el filtro para las transparencias de png's en IE pero podria funcionar ¿no?
Yo no lo mencioné porque explicitamente pide "crear ese efecto sin el uso de una imagen", pero supongo que con un png puede funcionar

Cita:
Iniciado por Rafael
Y también tendremos que esperar un poco.
Y también tendremos que esperar un "poco MUCHO"
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 16/10/2006, 21:05
 
Fecha de Ingreso: abril-2003
Mensajes: 201
Antigüedad: 14 años, 7 meses
Puntos: 0
Cita:
Iniciado por 4sc1r Ver Mensaje
Hola Maestros..
Quiera saber si es posible con css, crear un borde con una imagen pero q esta tenga una transparencia y se fundiera con el fondo (degradado) , asi como muestro en la sgte imagen:


o bien, crear ese efecto sin el uso de una imagen ?

Gracias
Con una imagen como se podria realizar esa transparencia ?

Gracias
  #8 (permalink)  
Antiguo 17/10/2006, 18:12
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Hay de dos sopas, o haces un jpg tal cual lo acabas de hacer, con la sombra sobre el fondo, o usas un canal alpha en un png.
El canal alpha es tal cual una máscara, esta máscara acepta niveles de gris, lo que te produce diferentes niveles de transparencia.

En Ie, directo no funciona, hay por ahí un JavaScript para corregir esta deficiencia.

Buscalo en el foro, creo que en el html, o javascript... o css :)
  #9 (permalink)  
Antiguo 17/10/2006, 18:53
 
Fecha de Ingreso: abril-2003
Mensajes: 201
Antigüedad: 14 años, 7 meses
Puntos: 0
uuhh Gracias Rafa

Con este post http://www.forosdelweb.com/showpost....19&postcount=3
me resulto muy bien altiro, usando un png con transparencia


Gracias y Saludos
  #10 (permalink)  
Antiguo 17/10/2006, 23:21
 
Fecha de Ingreso: abril-2003
Mensajes: 201
Antigüedad: 14 años, 7 meses
Puntos: 0
probando y probando , veo q no se puede usar con css :( , traté de hacer mi bloque con tabla, en las esquina las imagenes correspondientes y funcionaba perfectamente, pero al tratar de utilizar en la partes superior, inferior, derecha e izquierda con css no resulto ( p.e background-image:url(inferior.png);background-repeat:repeat-x;) en un <td> no funciona en IE claro está.

Usando otro script ( http://boring.youngpup.net/_projectD...ght/sleight.js ) , solucione esto, pero de la forma "<img src="superior.png" width="100%" height="26" />" la cual no me convence mucho...pero en las bandas laterales no puedo hacerlo :( height=100%

Aqui lo tengo:
http://usuarios.lycos.es/tonki/bordes/index.html

Si alguien me ayuda. gRacias
  #11 (permalink)  
Antiguo 18/10/2006, 12:23
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
A ver, a ver, tu pregunta ya se fue para otro lado, o estaba chueca desde el principio.

¿Te interesaba la parte de lo transparente o lo de los bordes redondeados?

Lo de la transparencia es png, lo de los bordes busca "bordes redondeados con css", es cuestion de anidar un poco por aquí y por allá, hay algunos posts. :)
  #12 (permalink)  
Antiguo 18/10/2006, 13:08
 
Fecha de Ingreso: abril-2003
Mensajes: 201
Antigüedad: 14 años, 7 meses
Puntos: 0
Mira, los bordes redondeados no son problemas, pq el script lo identifica bien los <img>, pero al poner este png en un css o como fondo de un <td> no funciona el script con la respectiva transparencia en IE...

Ahora, nose x ke no puedo hacer <img src="izq.png" width="25" height="100%"/> no se visualiza en ninguno de los exploradores, solo en la vista diseño de DW.

Q puedo hacer?
Estos son mi archivos : ARCHIVOS
los dejo haber si alguien me puede ayudar

Gracias
  #13 (permalink)  
Antiguo 18/10/2006, 14:18
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
a ver, intenta esto:
http://blog.creandowebs.com/2006/06/...ias-en-ie.html
  #14 (permalink)  
Antiguo 18/10/2006, 16:11
 
Fecha de Ingreso: abril-2003
Mensajes: 201
Antigüedad: 14 años, 7 meses
Puntos: 0
Cita:
Iniciado por sjam7 Ver Mensaje
No resulto : http://usuarios.lycos.es/tonki/bordes/bordes2.htm

Código HTML:
#fondoizq {
background-image:url(izq.png);
background-repeat:repeat-y;
}
#fondoder {
background-image:url(der.png);
background-repeat:repeat-y;
}
#fondosup {
background-image:url(superior.png);
background-repeat:repeat-x;
}
#fondoinf {
background-image:url(inferior.png);
background-repeat:repeat-x;
}
* html #fondoizq {background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='izq.png', sizingMethod='crop')
background:;
}
* html #fondoder {background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='der.png', sizingMethod='crop')
background:;
}
* html #fondosup {background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='superior.png', sizingMethod='crop')
background:;
}
* html #fondoinf {background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='inferior.png', sizingMethod='crop')
background:;
}
Q se puede hacer :(

?????????????

Gracias
  #15 (permalink)  
Antiguo 18/10/2006, 23:18
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
si solo funca en Firefox quiere decir que el problema esta en la aplicacion de los filtros "filter" en cuanto tenga un tiempillo le doy una analizada
  #16 (permalink)  
Antiguo 18/10/2006, 23:54
 
Fecha de Ingreso: abril-2003
Mensajes: 201
Antigüedad: 14 años, 7 meses
Puntos: 0
Te lo agradesco...ojala lo puedas arreglar

Gracias
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 10:36.