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/10/2006, 13:00
| |||
| |||
| 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 |
|
16/10/2006, 13:24
| ||||
| ||||
| 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. - |
|
16/10/2006, 17:06
| ||||
| ||||
| 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. 
__________________ Pasamos tus PSD a HTML Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. - |
|
16/10/2006, 20:05
| |||
| |||
| 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/10/2006, 17:12
| ||||
| ||||
| 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/10/2006, 17:53
| |||
| |||
| 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 |
|
17/10/2006, 22:21
| |||
| |||
| 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/10/2006, 11:23
| ||||
| ||||
| 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/10/2006, 12:08
| |||
| |||
| 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/10/2006, 13:18
| ||||
| ||||
| a ver, intenta esto: http://blog.creandowebs.com/2006/06/...ias-en-ie.html |
|
18/10/2006, 15:11
| |||
| |||
| 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 |
