Texto dentro de imagen

Córdoba

Citar

Escrito el 11 Ene 2008 01:12 pm

Hola, es muy probable que sea una imagen dividida en dos archivos y bien acomodada, la de arriba la pones como background para poder colocar el texto, y la de abajo la pones normal, es una aproximación a lo que me imagino quieres.

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

Citar

Escrito el 11 Ene 2008 01:20 pm

En publico.es, no veo que tengan tal cosa (la barra de abajo, tiene de fonddo fijo #E7E7E7)
¿se te ocurre otro ejemplo?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 11 Ene 2008 04:12 pm

en publico.es puedes verlo casi abajo del todo en una seccion a dos columnas, tienen alfas megro en la parte superior.

¿Podriais pasarme el código?

Por avito23

23 de clabLevel

Córdoba

Citar

Escrito el 11 Ene 2008 07:49 pm

podrias mostrar una imagen? porque yo tampoco se de que hablas

Por CarlosRuminott

1000 de clabLevel

6 tutoriales

Mdz, Arg

Citar

Escrito el 11 Ene 2008 09:19 pm

Espero que no te refieras a esto:

Porque eso es una imagen de 1x25, en

stye="background:blue url('imagen.png') repeat-x;"

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 11 Ene 2008 09:42 pm

No hombre me refiero a algo qe esta mas arriba, donde ponde ciencias y culturas.

Por avito23

23 de clabLevel

Córdoba

Citar

Escrito el 11 Ene 2008 10:22 pm

Buena, aqui en verdad no es una imagen, sino un fondo negro (#000) mas la propiedad 'opacity' de CSS3. Esta propiedad se aplica al div con clase 'culturasmodcont2' que en su interior contiene a 'culturasmodcont3' que tiene el contenido encuanto a texto.

Podrías hacer esto mismo con un png semitransparente, o del mismo modo que ellos.

Con png seria algo como

Código :

div {
background: url(mi.png) repeat
}
div p {
margin:auto;
color:#FFF
}

Saludos

Por RattaMono

Claber

1863 de clabLevel

12 tutoriales

Genero:Masculino

Cauroshigo Pirinola

@somaronirem

Citar

Escrito el 11 Ene 2008 10:23 pm

aa, y en el caso de usar opacity, sería:

Código :

div {
background:#000;
opacity:0.6
}
div p {
margin:auto;
color:#FFF
}

Por RattaMono

Claber

1863 de clabLevel

12 tutoriales

Genero:Masculino

Cauroshigo Pirinola

@somaronirem

Citar

Escrito el 12 Ene 2008 10:49 am

La verdad... q sigo sin entender... y no le veo la chicha al asunto.
POR QUÉ NO PONES UNA IMAGEN??

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 12 Ene 2008 05:45 pm

te refieres a lo de SHERP?
el disenhador de la pagina?

es simple juego de capas, pero son dos imagenes una grs y otra con las capas alteradas y con hover CSS se alterna entre ambas

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino Héroes

Fotógrafo o algo

@tribak

Citar

Escrito el 13 Ene 2008 05:50 pm

Sí sí la opacidad sé hacerla,

lo que quiero hacer concretamente es integrar la imagen, la transparencia de fondo (para que se vea el texto y transparente algo a la imagen) y el texto. Todo uno encima de otro.

Por avito23

23 de clabLevel

Córdoba

Citar

Escrito el 13 Ene 2008 06:13 pm

sabes usar capas no?

son simplemente 3 capas

una con el fondo, despues las letras que seran la mascara y la tercera con lo que tendra de fondo las letras

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino Héroes

Fotógrafo o algo

@tribak

Citar

Escrito el 14 Ene 2008 12:14 am

#imagen {
background-image: xxx.jpg;
}

#texto {
font: arial;
font-size:12px;
}

Y la tercera?

#barra {
background-color: #0066CC;
opacity:0.6;
(o usando el filtro) filter: alfa(opacy:70%)

algo parecido creo qe era

¿Pero hora para colocarlo abajo?

Del html no os preocupeis que ya se yo colocarlo.

Por avito23

23 de clabLevel

Córdoba

Citar

Escrito el 14 Ene 2008 12:31 pm

!!!!!!!!!
pero si no tiene nada que ver con lo que crei

a ver
rectificando....

lo que tu quieres es simplemente poner texto sobre una imagen?
pero en CSS cierto?
osea no tener que tocar programas de disenho grafico

ok eso es sencillo
es simplemente poner un background en un div y sobre este un texto

we te ayudo mas al rato que ahora me voy a el servicio

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino Héroes

Fotógrafo o algo

@tribak

Citar

Escrito el 14 Ene 2008 02:04 pm

Mira sigo sin entenderte completamente pero igual y estos tutoriales te ayudan

transparencia CSS
superponer CSS

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino Héroes

Fotógrafo o algo

@tribak

Citar

Escrito el 14 Ene 2008 02:13 pm

yo me sigo preguntando, porqué no pone una imagen de lo que quiere.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 14 Ene 2008 02:45 pm

muy cierto

Avito no seguire posteando posibles soluciones hasta que des un ejemplo

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino Héroes

Fotógrafo o algo

@tribak

Citar

Escrito el 14 Ene 2008 05:59 pm

¡Decirme como se mete la imagen!

Rizome, no puedes dar por sentados que todos conocemos la herramienta.

El efecto que quiero si entrais en marca lo veis, pero está hecho en flash, simplemente una transparencia, dentro de una imagen, donde pueda meter texto (la transparencia solo es para que el texto se pueda ver bien)

En Marca lo tienen hecho pero en Flash.

Lo del z index creo que lo soluciona, pero... y para meterlo en la parte de abajo de la imagen? como puedo hacerle al div un align:bottom;? position: bottom;?

Por avito23

23 de clabLevel

Córdoba

Citar

Escrito el 14 Ene 2008 07:10 pm

La solucion que te doy yo y tyribak, y lo que dijiste. Todo eso esta correcto.

Código :

#imagen {
background: xxx.jpg
}

#texto {
font: arial 12px
}

#barra {
background: #06C;
opacity:0.6
}

Eso debería funcionar. Claro, con z-index puedes poscicionar que capa esta arriba y cual esta abajo. Pero si las capas estubieran anidadas en orden, no tendrías ese problema:

Código :

<div id="imagen">
     <div id="barra">
          <p id="texto"> Este es el puto texto</p>
     </div>
<div>

Por RattaMono

Claber

1863 de clabLevel

12 tutoriales

Genero:Masculino

Cauroshigo Pirinola

@somaronirem

Citar

Escrito el 15 Ene 2008 12:12 am

He puesto aquí un ejemplo,

Ahora solo necesito aprender a colocarlo en vez de arriba, en la parte de abajo.

http://www.flexograf.e.telefonica.net/test.html

Por avito23

23 de clabLevel

Córdoba

Citar

Escrito el 15 Ene 2008 12:13 am

Perdón y el texto tb me coge opacidad, no logro que quede blanco.

Por avito23

23 de clabLevel

Córdoba

Citar

Escrito el 15 Ene 2008 01:00 am

<html>
<head>
<title>Prueba de DIV</title>
<style>

#imagen{
position:absolute;
filter:alpha(opacity=50);
-moz-opacity:.5;
opacity:.5;
z-index:1;
}
#barra {
font-family: "Arial";
background-color: #0066CC;
color: #ffffff;
width: 376px;
position:relative;
font-family: "Arial";
font-size: 33pt;
font-weight: bolder;
text-align:center;
z-index:0;
}
</style>
</head>
<body>
<div>
<div id="imagen"><img src="wii.jpg" /></div>
<div id="barra">La nueva WII</div>
</div>
</body>
</html>

Me permiti darle unos toques finales a tu HTML

esto quedaria mejor que tu codigo

pero veo que ahora quieres que tu texto se vea bien

mira

al poner el texto por debajo creas la ilusion de que tambien esta transparente pero NO!!!
es solido, lo unico translucido es la imagen

pero si quieres tu texto SOBRE la imagen para que se vea BLANCO solo debes cambiar:

#imagen{
z-index:1;"en image CAMBIA 1 por 0"
}
#barra {
background-color: #0066CC; "BORRAR"
z-index:0; "CAMBIAR 0 por 1"
}
En Ambos casos me funciono perfecto en Firefox y Safari, en IE no me funciono pero creo que es por la version de Mac que es un asco (Microsoft

shame on you)

aca te dejo las capturas

Sin fondo y con letras SOLIDAS

Con fondo y con letras translucidas (por efecto antes citado)

Por tribak

Claber

2448 de clabLevel

6 tutoriales

Genero:Masculino Héroes

Fotógrafo o algo

@tribak

Citar

Escrito el 15 Ene 2008 01:14 am

Antes de nada, decir que el código no es crossbrowser. Sólo vale, y a medias, para IE. (creo q FireFox, no soporta alpha:opacity, así que habría que buscar, y encontrar las declaraciones: "opacity", para Mozilla y Safary)

El resultado sería algo así:

NOTAS:
- cambio los ordenes y anidamientos de los divs en el HTML.
- Añado z-index para el texto.
- Cambio los "position", a "relative", y "absolute".
- Posiciono mediante "bottom" y "left" (creo que los IE anteriores al IE6, no aceptan "bottom")
- Pongo los altos de la barra y texto.
- Lo hago compatible con FF.
- Quito la transparencia del texto, pues no se desea.

Para los expertos de CSS.
RETOS:
- ¿es compatible con IE4-IE5?
- He observado un ¿bug? en IE:
Al añadir un sólo espacio, o un salto de línea, entre cualquiera de los "div" implicados (marcados en azul), hace que la barra "caiga" unas líneas por debajo de la imagen (lo cual "canta" al ser transparente) Si se quitan todos los saltos de línea y espacio, y se escriben los <div> uno al lado de otro... del tirón, desaparece esa "línea" extra, y la barra azul vuelve a donde debería.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 15 Ene 2008 03:16 pm

Código :

<html>
<head>
<title>Prueba de DIV</title>
<style>
* {font-family: 'Arial'; font-size: '33pt'; color: #FFF; position:absolute }

#contenido {
   width:376px;
   height:60px
}
#barra {
   display:block;
   background:#06C;
   width:376px;
   height:60px;
   opacity:0.6;
   filter:alpha(opacity=60)
}

p {
   margin:auto;   
}
h1 {
   font-weight: bolder;
   text-align:center
}
</style>
</head>
<body>
   <div id="imagen">
      <img src="opacity_archivos/wii.jpg">
   </div>
   </div>
   <div id="contenido">
      <div id="barra"></div>
         <p><h1>La nueva WII</h1><p>
      </div>
   </div>
</body>
</html>

Soportado por IE y FF, sin usar z-index, con menos código y lo puse un poco mas semántico. Slds

Por RattaMono

Claber

1863 de clabLevel

12 tutoriales

Genero:Masculino

Cauroshigo Pirinola

@somaronirem

Citar

Escrito el 15 Ene 2008 04:54 pm

avito23 escribió:

Ahora solo necesito aprender a colocarlo en vez de arriba, en la parte de abajo.

Entiendo con esto, que lo que avito23 quiere, es poner la línea azul, en la parte BAJA de la imagen. De ahí la necesidad de los "position".
¿no?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 15 Ene 2008 05:43 pm

rizome escribió:

- He observado un ¿bug? en IE:
Al añadir un sólo espacio, o un salto de línea, entre cualquiera de los "div" implicados (marcados en azul), hace que la barra "caiga" unas líneas por debajo de la imagen (lo cual "canta" al ser transparente) Si se quitan todos los saltos de línea y espacio, y se escriben los <div> uno al lado de otro... del tirón, desaparece esa "línea" extra, y la barra azul vuelve a donde debería.

ARREGLADO:
Se arregla con un "overflow:hidden;"

#imagen{padding:0px; margin:0px;
z-index:1;
position:relative;
height:356px; width:376px; overflow:hidden;
}

Así es plenamente compatible con IE y FF, sin tener que quitar saltos de línea ni espacios.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 15 Ene 2008 08:06 pm

Sí lo que quiero es ponerlo abajo, de la manera más sencilla posible.

He copiado el código que me habeis pasado y no me quedan como os ha quedado a vosotros:

RIZOME
http://www.flexograf.e.telefonica.net/test4.html
Este va perfecto en FF pero en ie7 me sale la barra abajo del todo y muy finita, como un cuarto del tamaño del texto.

y RATTAMONO
http://www.flexograf.e.telefonica.net/test2.html
(Este no está colocado abajo y no se pq en firefox la letra se hace pequeña)

RATTAMONO para no usar el z-index que usas? el position o el display?¿

Sino es el display para que lo usas?

position: relative;
bottom:0px;

Esto lo mete en la parte de abajo de la pagina?

Por avito23

23 de clabLevel

Córdoba

Citar

Escrito el 15 Ene 2008 08:16 pm

En el de RATTAMONO habia unas comillas '50px' que Firefox, no entendía parece.
Las quito pero el texto se va abajo entonces.

Bueno, a ver si entre todos podemos encontrar una solución,

Por avito23

23 de clabLevel

Córdoba

Citar

Escrito el 15 Ene 2008 08:50 pm

Para no usar el z-index, nada, solo tener un html bien anidado y con una buena estructura.
La letra se ve pequeña porque me equivoque al poner comillas en el valor del tamaño de fuente

El display lo uso para que la barra se vea completa en el tamaño que le doy aunque no tenga texto en su interior.

Tu tarea ahora solo es poscisionar el div y el texto dentro de la imagen, porque tu duda en si, ya está resuelta U_U

Por RattaMono

Claber

1863 de clabLevel

12 tutoriales

Genero:Masculino