Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Bordes sombreados c/transparencia (http://www.forosdelweb.com/f53/bordes-sombreados-c-transparencia-434732/)

4sc1r 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:

http://img91.imageshack.us/img91/6380/ejemplovv5.png

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

Gracias

webosiris 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..

4sc1r 16/10/2006 13:39
:(

gracias de todos modos

Rafael 16/10/2006 16:19
Y también va a tener una shadow.
Y una para bordes redondeados.
Y también tendremos que esperar un poco.

sjam7 16/10/2006 16:53
y con png? deberas usar el filtro para las transparencias de png's en IE pero podria funcionar ¿no?

webosiris 16/10/2006 17:06
Cita:
Iniciado por sjam7 (Mensaje 1739835)
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" :borracho:

4sc1r 16/10/2006 20:05
Cita:
Iniciado por 4sc1r (Mensaje 1739550)
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

Rafael 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 :)

4sc1r 17/10/2006 17:53
uuhh Gracias Rafa :-D

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


Gracias y Saludos

4sc1r 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

Rafael 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. :)

4sc1r 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

sjam7 18/10/2006 13:18
a ver, intenta esto:
http://blog.creandowebs.com/2006/06/...ias-en-ie.html

4sc1r 18/10/2006 15:11
Cita:
Iniciado por sjam7 (Mensaje 1742595)
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

sjam7 18/10/2006 22:18
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

4sc1r 18/10/2006 22:54
Te lo agradesco...ojala lo puedas arreglar

Gracias


La zona horaria es GMT -6. Ahora son las 08:51.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.