png con degrado y transparencia sobre texto con css3

FaNaTyCk · #1 (**permalink**) 27/02/2012, 23:06

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.

bruno911 · #2 (**permalink**) 28/02/2012, 04:11

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!

kseso? · #3 (**permalink**) 28/02/2012, 04:31

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.

furoya · #4 (**permalink**) 28/02/2012, 21:01

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

kseso? · #5 (**permalink**) 29/02/2012, 05:45

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.

furoya · #6 (**permalink**) 02/03/2012, 19:47

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.

emprear · #7 (**permalink**) 02/03/2012, 22:09

[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

furoya · #8 (**permalink**) 03/03/2012, 04:27

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?

... Png fuera sustituido por un gradiente css en el :before...

Cita:

Iniciado por furoya

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