Foros del Web » Creando para Internet » CSS »

Cómo puedo hacer esto? (degradado fuera de la imagen...)

Estas en el tema de Cómo puedo hacer esto? (degradado fuera de la imagen...) en el foro de CSS en Foros del Web. Hola! Vereis, tengo un blog con la CSS adaptada a la resolución de pantalla del navegante. Eso se traduce en problemas a la hora de ...
  #1 (permalink)  
Antiguo 28/08/2008, 14:03
 
Fecha de Ingreso: agosto-2008
Mensajes: 143
Antigüedad: 9 años, 3 meses
Puntos: 1
Cómo puedo hacer esto? (degradado fuera de la imagen...)

Hola!

Vereis, tengo un blog con la CSS adaptada a la resolución de pantalla del navegante. Eso se traduce en problemas a la hora de poner un banner que me encaja en su sitio ya que para cada resolución la imagen debería ser diferente...

El blog en cuestión es http://samyblog.890m.com

Entonces mi pregunta es, había pensado en qué podría poner una imagen que entrara bien en la resolución más pequeña, y que con una resolución mas grande, de la imagen hasta el borde de donde debería llegar, fuera un degradado...

No tengo ni idea de diseño ni de imagen ni nada... Se puede hacer y, cómo se hace?

Muchísimas gracias!
  #2 (permalink)  
Antiguo 29/08/2008, 05:18
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: Cómo puedo hacer esto? (degradado fuera de la imagen...)

Puedes poner un div que cubra a la imagen y ahí poner el degradado, algo así:
Entre <head> y </head>:
Código HTML:
<style>
#banner { background: url('degradado.png') center; text-align: center; }
</style> 
Y en el lugar donde quieres que salga:
Código HTML:
<div id="banner">
<img src="samu270x900.jpg" />
</div> 
Si quieres, te paso el degradado con el que lo he probado:
http://img247.imageshack.us/img247/2...gradadoul2.png
  #3 (permalink)  
Antiguo 29/08/2008, 21:58
 
Fecha de Ingreso: agosto-2008
Mensajes: 143
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Cómo puedo hacer esto? (degradado fuera de la imagen...)

Hola!

Muchas gracias por tu ayuda, la semana que viene (este finde no puedo) miraré de hacer lo que tu dices, a ver si al final consigo que la cabecera se vea bien para todo el mundo :)!

Muchísimas gracias!
  #4 (permalink)  
Antiguo 30/08/2008, 07:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cómo puedo hacer esto? (degradado fuera de la imagen...)

Hola Samy4ever:
¿Te has fijado en:
#bannerscan #banner {
height:260px;
padding:3px 0;
/*añade*/ text-align:center/*para centrar la imagen en la horizontal*/;
}

y que
"../images/samu270x900.jpg"
es de 270 px de altura? Además tienes 6 píxeles blancos en la esquina inferior derecha.
Y al
#container {
background-color:#FFFFFF;
padding:0 5px;
width:99%;
}
Si le colocas 100% y suprimes el padding no te aparecerá el recorte del lado derecho


Ya se que esto no lo habías preguntado (son los peligros de poner el enlace a la página )
P.D.: me gustó tu afán por la enseñanza:
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 31/08/2008, 05:59
 
Fecha de Ingreso: agosto-2008
Mensajes: 143
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Cómo puedo hacer esto? (degradado fuera de la imagen...)

PS: Espero no me mateis con tantas dudas...


Buf, no lo había preguntado pero muchíiiiisimas gracias!!!

Cuando me bajé el theme lo cambié bastante, porqué no quería que fuera de X px sinó que fuera en % y por tanto, que todo el mundo vea la misma página sea la resolución que sea, y yo había programado CSS pero a nivel básico, para que 4 prácticas de la uni me quedaran bonitas. Cuando toqué el tema me costó bastante porqué esto de separar la web '''por capas''' y tratarlo diferente no lo había hecho y no tenía ni idea, ni sabía que era cada cosa... Así que tube problemas, muchos xD

Al final me quedó como ves, con algún que otro error, pero acabé tan harto que dije "ya me lo miraré" y cómo no era excesivamente feo, lo acabé dejando...

Pero vaya, que muchas gracias por mirartelo!

A ver, veamos si te he entendido :)

#bannerscan #banner {
padding: 0px 0;
height: 270px;
text-align:center;
}

Esto lo he dejado así. He añadido lo que me has dicho, de manera que ya lo tengo centrado (que cambio!) y además el banner ahora sí cabe en su espacio. Una pregunta. Por qué text-align centra el banner? Es decir, no sería para el texto que sale debajo la imagen o algo así, en vez de para la imagen?

Por otra parte, tengo otra duda. La resolución 800x600 ya no se usa verdad? Por qué me la he puesto y se ve enoooorme (yo uso 1280x800), pero en caso que aún fuera popular, tendría que cambiar el banner, porqué no cabe ni de alto ni de ancho... (es normal?porque de ancho lo entiendo pero de alto debería caber igual, no?)

Otra duda. Ahora el banner, de alto, lo veo bien, peeeeeero... Si me cambio de resolución:



Como veis, la parte de abajo del banner se me come un poco 'la página', pero solo a otra resolución, a la que tengo yo, no. A qué es debido, si como veis arriba, está dijo a 270px? Es más, una vez he puesto padding: 0px 0; aún me pisa más la página (más de lo que sale en la imagen, me tapa media fecha).


Del banner, eso es todo... Ahora la 2a parte jejeje

Esos 6 píxeles blancos en la esquina inferior derecha... A cuáles te refieres? jejeje
Yo lo que me doy cuenta es que entre el banner y la página en sí, por los laterales no encaja. Hago las modificaciones que me has dicho y sí encaja :) Aunque aún me falla una cosa:



No sé donde tengo que mirarlo para hacer que llegue a todo lo ancho. He buscado valores por la CSS de 99, 98, 97, 96 y 95, para intentar buscar algun % que se quede corto, pero no lo veo. Alguna ayuda?

Una vez arregle esto ya sólo me faltará la imagen, y la CSS estará perfecta jejeje

Si alguien es capaz de responderme todo, porqué no le puedo dar un premio, pero es para darle un monumento!

Ojalá me ayudeis y deje bonito el blog :)

Sí, me tomo muy en serio lo de la educación xDD Ayer colgué también un post sobre Windows Vista suicidándose...xDDD

Última edición por samy4ever; 31/08/2008 a las 07:02
  #6 (permalink)  
Antiguo 31/08/2008, 09:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cómo puedo hacer esto? (degradado fuera de la imagen...)

Hola Samuel
Por el final:
Para que la 'sombra' te llegue hasta los bordes dcho e izq (lo que señalas con la flecha) quítale a #bannerscan el || "padding:0 5px;" || le estás indicando que deje esos 5 px tanto a izq como a dcha.

Los px blancos a los que me refería están en la imagen que tienes como banner, justo en la esquina inferior derecha, debajo del gato.
Y sí, es algo grande esa imagen (de alto). Date cuenta que en una resolución de 800x600, si descuentas las barras de navegación y demás espacio ocupado por el navegador, con suerte te quedan 500px para ver la página, y tu imagen es más del 50% de ese espacio libre.
Para que no se te superponga el gato al degradado de abajo (sobre #scanlines) coloca esto:
Código:
en el .css:
.clear {
    clear: both;
    }
(vale, esto ya lo tienes en style.css)
Y en el html:
<div id="banner">
....
</div>
<div class="Clear">
</div>
<div id="scanlines">
....
</div>
Sobre la primera consulta:
#bannerscan #banner {
padding: 0px 0;
height: 270px;
text-align:center;
}
el valor 0 (cero) no necesita unidades, el cero es cero, sean mm, px, peras o gatitos... ;), así que deja sólo || padding:0; ||

Abro paréntesis:
Si reseteas el css al inicio del archivo no necesitarías indicar para cada elemento que los border y padding sean 0.
Cierro paréntesis.

Y el porqué || text-aling: center; || lo centra en la horizontal, piensa en cualquier procesador de texto cuando alineas a la dch, izq, justificas...

Bueno, espero haberte ayudado en algo.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 31/08/2008, 13:04
 
Fecha de Ingreso: agosto-2008
Mensajes: 143
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Cómo puedo hacer esto? (degradado fuera de la imagen...)

Oks, ya quité la sombra de los 5px del bannerscan y ahora ya me llega de punta a punta la imagen. Aún y así, creo que voy a terminar quitando este pequeó sombreado de debajo del banner de manera que sea directamente blanco y me ahorro problemas, por la imagen y tal. Pondré un banner que sea degradado hacia blanco y así no tengo que estar pendiente de esto (quitando la imagen de abajo que hace de línea me ahorro tener que mirar como hago encajar eso:P), y me gusta como queda. Así que lo dejo arreglado para si algún dia lo restauro pero la imagen la quito, así que ahora ya no está jejeje Me gustaba pero me ahorraré problemas...

Los píxeles blancos... Lo he quitado pero no he conseguido ver a qué te referias, no he apreciado ningún cambio, así que los he quitado pero la verdad, no sé cuales són... Pero bueno, fuera lo que fuera, ya no debería estar jejeje


Sobre la imagen, tu crees que debería hacerla más pequeña? Un poco más corta de altura para que no coma tanta página y un poco más corta de largada también? (aunque para que quepa en las resoluciones de 800x600 la imagen debería ser cortísima... y luego en resoluciones normales (1280x800 etc) quedaría demasiado blanco creo yo... no?)

He añadido la línea de código que me has dicho pero aún se me superpone el banner con la fecha y eso...:S Alguna idea?


El padding arreglado, ahora ya solo pone 0!

Y el paréntesi no lo acabo de entender...:(!:P Me lo puedes explicar bien?:P


Y dudas...:P Sólo 2 ya:P

- La clase clear, cómo funciona?
- Cómo eres capaz de saber cada parte de la CSS a qué parte de la página se aplica?? Yo la manera que tenía de modificar algo sin saber que elemento era, era ir cambiando valores y probando hasta encontrar el elemento que quería, pero parece que tu eres capaz de verlo de alguna manera que yo no xDD


Muchas gracias por todo, a ver si lo djeo pulido pulido... Que te parece el cambio de quitar esa línea? Al final me va a quedar bien bonito el blog :)


GRACIAS!
  #8 (permalink)  
Antiguo 31/08/2008, 13:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cómo puedo hacer esto? (degradado fuera de la imagen...)

Veamos:
Los pixels a lo que me refiero son estos:

Le he colocado ese borde amarillo para que los aprecies mejor.
Problemas con la imagen del header: dale un alto al contenedor y colócala como background, así no te pisará el siguiente div.
Yo personalmente rediseñaría la imagen, para dejarla en una anchura de 720 px de longitud (tienes definido el width de #page al 90%) si quieres que en una resolución de 800px no se corte.
Para el 'resetear': busca aquí o más directo esto otro
¿que cómo hago para ver a que parte afecta el css, y más importante, jugar con él sin miedo a estropear nada?:
Usa Firefox
Instala estas extensiones:
Web Developer
FireBug
Sobre clear (es un copy-paste):
Cita:
El estilo "clear" se utiliza conjuntamente con float. Se usa este estilo cuándo queremos que elementos que tienen cerca un elemento flotante (mediante "float") dejen de alinearse junto a él.
Sus posibles valores son left (el elemento no permite flotantes a su izquierda ), right (el elemento no permite flotantes a su derecha ) o both (el elemento no permite flotantes a ningún lado).
Creo que es todo.
Un saludo

P.D.: todo lo anterior me lo han dicho antes otros a mi, y mejor de lo que yo lo estoy repitiendo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 31/08/2008, 15:39
 
Fecha de Ingreso: agosto-2008
Mensajes: 143
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Cómo puedo hacer esto? (degradado fuera de la imagen...)

Vale, ya he visto los píxeles jejeje

He abierto la imagen original y ya tiene ese pequeño puntito blanco por eso, así que será cuestión de la imagen jejeje (como voy a cambiar el banner, no problem:P)

La imagen será con nuevas medidas, he pensado en 220x700 o algo así, de manera que me curo un salud jejeje

El reseteo perfecto, lo pondré... Aunque no tocaré los paddings y borders, los dejaré, aún y ser redundantes. Pero cuando ya tenga algo más de tiempo sí que lo sacaré :) Hecho ya... Ha habido algún cambio de espacios, todo bien :)


Sobre clear perfecto, entendido tambien :)!

Voy con las extensiones que tienen pinta de ser divinas...!!! En poco edito esto...jejeje

EDIT: Esto de saber que parte de la página es de la CSS es la caña... Mucho mejor para localizar y modificar cosas :)!

MUUUUUUUUUUUUUUUUUUUUUUUCHAS gracias por todo... :)!!

Creo que ya lo he arreglado todo y solo me falta modificar el banner... Muy instructiva mi duda :)!

EDITO2: He ido a ampliar la imagen del div entre el banner y el resto de la pagina (fecha y eso, que se me pisaba) pero curiosamente ahora ya no se pisan. Imagino que debe de haber sido gracias al reset, que habrá puesto algun valor bien, y ya no se pisan nunca, de manera que puedo dejar el ancho que ya tenía ese div. Me encanta esto de ver las partes de la CSS!!!

Última edición por samy4ever; 31/08/2008 a las 15:48 Razón: Modificaciones
  #10 (permalink)  
Antiguo 31/08/2008, 20:46
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
Respuesta: Cómo puedo hacer esto? (degradado fuera de la imagen...)

Pues solo que hagas la imagen de fondo y le degrades las orillas, la desvanescas pues, con photoshop, claro que lo mejor seria que las desvanescas al color del fondo.
__________________
o x í g e n o | E S T U D I O
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




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