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
16-oct-2006, 13:00
|
#1 (permalink) |
 Fecha de Ingreso: abril-2003
Mensajes: 192
|
Bordes sombreados c/transparencia
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 |
|
|
|
16-oct-2006, 13:24
|
#2 (permalink) |
|
Moderador HTML y CSS
 
Fecha de Ingreso: noviembre-2002
Ubicación: /home/montevideo
Mensajes: 6.211
 |
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..
__________________
Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código. |
|
|
|
|
16-oct-2006, 17:06
|
#6 (permalink) |
|
Moderador HTML y CSS
Fecha de Ingreso: noviembre-2002
Ubicación: /home/montevideo
Mensajes: 6.211
|
Cita:
Yo no lo mencioné porque explicitamente pide "crear ese efecto sin el uso de una imagen", pero supongo que con un png puede funcionar
Iniciado por sjam7
y con png? deberas usar el filtro para las transparencias de png's en IE pero podria funcionar ¿no?
Cita:
Y también tendremos que esperar un "poco MUCHO"
Iniciado por Rafael
Y también tendremos que esperar un poco.
__________________
Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código. |
|
|
|
|
16-oct-2006, 20:05
|
#7 (permalink) |
|
Fecha de Ingreso: abril-2003
Mensajes: 192
|
Cita:
Con una imagen como se podria realizar esa transparencia ?
Iniciado por 4sc1r
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 Gracias |
|
|
|
|
17-oct-2006, 17:12
|
#8 (permalink) |
|
Fecha de Ingreso: marzo-2003
Mensajes: 1.051
|
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 :) |
|
|
|
|
17-oct-2006, 17:53
|
#9 (permalink) |
|
Fecha de Ingreso: abril-2003
Mensajes: 192
|
uuhh Gracias Rafa
 Con este post problema png transparente e iexplorer me resulto muy bien altiro, usando un png con transparencia Gracias y Saludos |
|
|
|
|
17-oct-2006, 22:21
|
#10 (permalink) |
|
Fecha de Ingreso: abril-2003
Mensajes: 192
|
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 |
|
|
|
|
18-oct-2006, 11:23
|
#11 (permalink) |
|
Fecha de Ingreso: marzo-2003
Mensajes: 1.051
|
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. :) |
|
|
|
|
18-oct-2006, 12:08
|
#12 (permalink) |
|
Fecha de Ingreso: abril-2003
Mensajes: 192
|
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 |
|
|
|
|
18-oct-2006, 13:18
|
#13 (permalink) |
Fecha de Ingreso: noviembre-2002
Ubicación: Guadalajara, Mexico
Mensajes: 3.276
 |
a ver, intenta esto:
http://blog.creandowebs.com/2006/06/...ias-en-ie.html |
|
|
|
|
18-oct-2006, 15:11
|
#14 (permalink) |
|
Fecha de Ingreso: abril-2003
Mensajes: 192
|
Cita:
No resulto : http://usuarios.lycos.es/tonki/bordes/bordes2.htm
Iniciado por sjam7
a ver, intenta esto:
http://blog.creandowebs.com/2006/06/...ias-en-ie.html 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:;
}
????????????? Gracias |
|
|
|
Mode Lineal
La Zona horaria es GMT -6. Ahora son las 13:05.
