Foros del Web » Creando para Internet » CSS »

png con degrado y transparencia sobre texto con css3

Estas en el tema de png con degrado y transparencia sobre texto con css3 en el foro de CSS en Foros del Web. Estoy utilizando un marquee up en html, donde el texto va subiendo, en la parte superior quiero poner una imagen png con degrado, de un ...
  #1 (permalink)  
Antiguo 27/02/2012, 22:06
Avatar de FaNaTyCk  
Fecha de Ingreso: enero-2008
Mensajes: 53
Antigüedad: 11 años, 9 meses
Puntos: 2
Pregunta png con degrado y transparencia sobre texto con css3

Estoy utilizando un marquee up en html, donde el texto va subiendo, en la parte superior quiero poner una imagen png con degrado, de un extremo tiene transparencia y del otro ya es negro.. la idea es que mientras suba el texto del marquee este png lo valla tapando y de el efecto de que cuando esta llegando a la sima va desapareciendo..

es posible solo con css3?..

<marquee width="475" height="325" behavior="scroll" direction="up" scrollamount="2" scrolldelay="125" style="codigo css3 con la imagen en top"> acá mi texto que va subiendo</marquee>

Saludos.
  #2 (permalink)  
Antiguo 28/02/2012, 03:11
 
Fecha de Ingreso: mayo-2004
Mensajes: 102
Antigüedad: 15 años, 5 meses
Puntos: 5
Respuesta: png con degrado y transparencia sobre texto con css3

Claro que es posible has asi:
Supongo que la imagen ya la tendras entonces:

<div style="background-image:url('aqui la url de la imagen');background-repeat:repeat-x;">

<marquee width="475" height="325" behavior="scroll" direction="up" scrollamount="2" scrolldelay="125"> acá mi texto que va subiendo</marquee>


</div>
Espero haber podido ayudarte, salu2!
__________________
Bruno Quintana
  #3 (permalink)  
Antiguo 28/02/2012, 03:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 4 meses
Puntos: 539
El contenido NUNCA puede posicionarse bajo (eje z) el fondo de su contenedor.

Así que cree un elemento dentro del div, posiciónelo y añada el z-index y que sea el que tenga el fondo png.

Más semántico:
Utilice el pseudoelemento ::before o ::after en vez de crear ese otro elemento.
  #4 (permalink)  
Antiguo 28/02/2012, 20:01
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 años, 11 meses
Puntos: 317
Respuesta: png con degrado y transparencia sobre texto con css3

Me ganaste de mano, kseso?. Le iba a explicar lo mismo ... pero me quedé pensando en algo ¿cómo se le da el tamaño a un elemento creado con :before?. Yo lo intenté (creo que varias veces) y no me salió o no recuerdo cómo era.

Mira, quizá no valía la pena porque esto está en cualquier tutorial, pero lo mismo hice un ejemplo.
En la primer marquesina hay una imagen sobre el texto desplazado. Tal como explicaste.
En la segunda usé :after para meter la imagen (con un pequeño truco para no poner :before) y se ve que aparece, pero no toma el tamaño.
Y en la tercera aproveché tu comentario, FaNaTyCk, sobre usar CSS3, y no puse ninguna imagen.

Código HTML:
<!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">

<style type="text/css">

#marca:after {position: absolute; width: 475px; height: 325px; 
content: url(http://img853.imageshack.us/img853/5572/degrad018my.png); }

</style>
</head>
<body style="background-color: rgb(10,10,110); color: rgb(10,10,110); ">

<div style="position: relative; width: 475px; height: 325px; ">
<img src="http://img853.imageshack.us/img853/5572/degrad018my.png" 
width="475" height="325" style="position: absolute; top:0; left: 0;">
<marquee width="475" height="325" behavior="scroll" direction="up" 
scrollamount="2" scrolldelay="125" style="font-size: 2em; text-align: center; 
background-color: white"> acá <br>mi <br>texto <br>que <br>va <br>subiendo</marquee>
</div>

<hr>

<div id="marquesina2" style="position: relative; width: 475px; height: 325px; ">
<span id=marca></span>
<marquee id=marquesina2 width="475" height="325" behavior="scroll" 
direction="up" scrollamount="2" scrolldelay="125" style="font-size: 2em; 
text-align: center; background-color: white"> acá <br>mi <br>texto <br>que 
<br>va <br>subiendo</marquee>
</div>

<hr>

<div style="position: relative; width: 475px; height: 325px; ">
<div style="position: absolute; width: 475px; height: 325px; 
background: -webkit-linear-gradient(rgb(10,10,110), transparent);
 background: -moz-linear-gradient(rgb(10,10,110), transparent); 
 background: -o-linear-gradient(rgb(10,10,110), transparent); 
 background: linear-gradient(rgb(10,10,110), transparent); "></div>

<marquee width="475" height="325" behavior="scroll" direction="up" 
scrollamount="2" scrolldelay="125" style="font-size: 2em; text-align: center; 
background-color: white"> acá <br>mi <br>texto <br>que <br>va 
<br>subiendo</marquee>
</div>

</body>
</html> 
No sé, si se les ocurre cómo corregir el segundo, o al menos que se entienda por qué la posición sí la toma, pero las medidas, no ... me gustaría enterarme.

Gracias
furoya
  #5 (permalink)  
Antiguo 29/02/2012, 04:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 4 meses
Puntos: 539
Respuesta: png con degrado y transparencia sobre texto con css3

Hola Furoya
Ante el abandono (es broma) del post por parte de consultante vamos a parasitarlo, trolearlo y acapararlo con unas disgresiones de esas inútiles (fin de la broma).

Si estamos en el foro de css y algún incosciente invocó la presencia de css3, aquí va otra aproximación, teórica. Más adelante algo de código.

Png fuera sustituido por un gradiente css en el :before.
Nada de marquesinas, scripts u otras cosas tan "arcaicas" para el movimiento. Tiremos de @keyframes que se lo mucho que te gustan (o no?)
Más css3 creo que imposible.

N.B. 1: menos recomendable para un sitio real, también.

N.B. 2: queda pendiente el código para cuando cambie el chiche por otro apropiado.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 02/03/2012, 18:47
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 años, 11 meses
Puntos: 317
Respuesta: png con degrado y transparencia sobre texto con css3

No es broma! Si para eso están los mensajes! Más que digresión, es evolución.

Es cierto lo del CSS3. Es puramente experimental. Hay algunas propiedades que ya sabemos que no van a cambiar, quizá sus valores... , pero ya se pueden considerar "usables" (si no fuese por IE, a opacity la podríamos incluir en la lista).

De todas formas, hay que tomarlo como un recurso y no como una norma. Bue, ningún CSS es una norma.

Lo del gradiente con ::before ya lo puse en el ejemplo.

Y sí se puede hacer "más CSS3ado" :

http://www.w3.org/TR/css3-marquee/

http://www.w3schools.com/cssref/default.asp#marquee

¡Faltaba la marquesina con CSS3!






Esteeee...
¿Sigues usando ese bicho para navegar?

Todos estamos esperando que recuperes tu máquina 'normal'.

Ah! y los @keyframes ... qué sé yo; si me apuran un poco, prefiero hacerlo con javascript.
  #7 (permalink)  
Antiguo 02/03/2012, 21:09
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 3 meses
Puntos: 1567
Respuesta: png con degrado y transparencia sobre texto con css3

[QUOTE=furoya;4133548]No es broma! Si para eso están los mensajes! Más que digresión, es evolución.
...pero ya se pueden considerar "usables" (si no fuese por IE, a opacity la podríamos incluir en la lista).

@furoya, opacity ya está adentro
http://foros.emprear.com/css/opacity.html

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 03/03/2012, 03:27
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 16 años, 11 meses
Puntos: 317
Respuesta: png con degrado y transparencia sobre texto con css3

Je. Como nunca usé uno, siempre me olvido de IE 9.

Muy buen ejemplo para los que vivimos obsesionados con la compatibilidad.

Edición :

Cita:
Iniciado por kseso? Ver Mensaje
... Png fuera sustituido por un gradiente css en el :before...
Cita:
Iniciado por furoya Ver Mensaje
... Lo del gradiente con ::before ya lo puse en el ejemplo...
Ah!. Ya entendí! Sería crear el elemento con degradado también desde el CSS!
Claro; yo puse la caja en el HTML y le di formato con CSS (3).

Última edición por furoya; 04/03/2012 a las 07:44 Razón: Cada día estoy más paspado.

Etiquetas: css3, html, png, transparencia
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:34.