Foros del Web » Creando para Internet » CSS »

Duda con Sprites CSS, se puede repetir una zona concreta?

Estas en el tema de Duda con Sprites CSS, se puede repetir una zona concreta? en el foro de CSS en Foros del Web. Buenas Tardes, Tengo una duda respecto a los sprites css, había pensado crear un div de unos 700 pixels de ancho y unos 600(ó Xpx) ...
  #1 (permalink)  
Antiguo 25/10/2011, 10:55
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 12 años
Puntos: 4
Duda con Sprites CSS, se puede repetir una zona concreta?

Buenas Tardes,
Tengo una duda respecto a los sprites css, había pensado crear un div de unos 700 pixels de ancho y unos 600(ó Xpx) de alto por ejemplo, y diseñar un fondo mediante una imagen que contenga los bordes redondeados, unas sombras, o lo que sea.

entonces, había pensado en crearlo de la siguiente forma:

Código PHP:
<div style="width: 700px;">
    <
div id="tapadera_arriba" style="width:100%;height:25px;background: url('img.png') top center no-repeat;"></div>
    <
div id="centro_contenido" style="width:100%;background: url('img.png')  center 50px  repeat-y;">
        ......................<
br />
        ......................<
br />
        ......................<
br />
        ......................<
br />
        ......................<
br />
        ......................<
br />
        ......................
    </
div>
    <
div id="tapadera_abajo" style="width:100%;height:25px;background: url('img.png') bottom center no-repeat;"></div>
</
div

Pero el resultado está lejos de ser el deseado...:


En ésta última, he recortado manualmente una tira horizontal y he utilizado el mismo método,pero claro, ya son 2 imágenes...

En fin, no sé si lo que intento hacer en realidad se puede hacer, pero si se pudiera... mejoraría notablemente el rendimiento de mi sitio...

Gracias por adelantado por vuestra ayuda y espero haberme expresado bien
  #2 (permalink)  
Antiguo 25/10/2011, 11:34
Avatar de rogertm
Mod->Cuba
 
Fecha de Ingreso: julio-2005
Ubicación: /home/Cuba/Habana/rogertm/
Mensajes: 2.922
Antigüedad: 17 años, 4 meses
Puntos: 638
Respuesta: Duda con Sprites CSS, se puede repetir una zona concreta?

Si entendí bien, estás usando imágenes para crear ese efecto de esquinas redondeadas y borde con sombra. Pues no los necesitas, tan solo con jugar con las propiedades border-radius y box-shadow es suficiente, si además de eso quieres que ese div tenga una altura fluida dependiendo del contenido, puedes usar overflow: hidden

Saludos.
__________________
Friki y Blogger por Cuenta Propia:213
Twenty'em: Theming is Prose
  #3 (permalink)  
Antiguo 25/10/2011, 13:09
 
Fecha de Ingreso: noviembre-2010
Ubicación: Badajoz
Mensajes: 94
Antigüedad: 12 años
Puntos: 4
Respuesta: Duda con Sprites CSS, se puede repetir una zona concreta?

Cita:
Iniciado por rogertm Ver Mensaje
Si entendí bien, estás usando imágenes para crear ese efecto de esquinas redondeadas y borde con sombra. Pues no los necesitas, tan solo con jugar con las propiedades border-radius y box-shadow es suficiente, si además de eso quieres que ese div tenga una altura fluida dependiendo del contenido, puedes usar overflow: hidden

Saludos.
Gracias por tu interés, pero me temo que esa no es una solución, ya que border-radius no es soportada en todos los navegadores, y no siempre es redondear una esquina la tarea... en cuanto overflow:hidden en este caso, no tiene ninguna utilidad, lo único que haría sería impedir que el contenido exceda de las dimensiones del div...

Espero que alguien pueda ayudarme con mi duda :)
  #4 (permalink)  
Antiguo 25/10/2011, 15:37
Avatar de danielugalde  
Fecha de Ingreso: marzo-2011
Ubicación: mexico
Mensajes: 45
Antigüedad: 11 años, 8 meses
Puntos: 3
Respuesta: Duda con Sprites CSS, se puede repetir una zona concreta?

No te conpliques la vida Amigo lo estas haciendo mal lo correco es hacerlo asi:

Este es el Html
Código HTML:
Ver original
  1. <div id="contenedor">
  2.     <div id="top"></div>
  3.     <div id="centro">
  4.        <p>EN ESTA PARTE VA TU CODIGO</p>
  5.     </div>
  6.     <div id="buttom"></div>
  7. </div>
Ahora el css:
Código CSS:
Ver original
  1. #contenedor{ width:200px; height:auto; display:inline-block; float:left; margin:15px 40px 15px 30px; position:relative;}
  2. #top{ width:200px; height:7px; background:url(../img/top.png) no-repeat;}
  3. #medio{ width:200px; height:auto; overflow:auto; position:relative; background:url(../img/medio.png) repeat-y;}
  4. #buttom{ width:200px; height:6px; background:url(../img/buttom.png) no-repeat;}

Ahora solo te faltan las imagenes te recomiendo hacer 3 :

top.jpg o png
medio.jpg o png y
buttom.jpg o png

Ahora este es un ejemplo indepenndiente al tuyo esta es una buena tecnica sabiendola aplicar, te dejo de referencia esta pagina en la cual utilice esta tecnica.

Este es ell link
Saludos.
  #5 (permalink)  
Antiguo 25/10/2011, 15:45
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 13 años, 4 meses
Puntos: 137
Respuesta: Duda con Sprites CSS, se puede repetir una zona concreta?

crash1912 es importante saber si el fondo de tu div con bordes redondeados es un color plano para usar el sprite del bloque en JPG con un color solido de fondo... sino aplica la tecnica de danielugalde
si es un color solido de fondo... tienes que cortar la imagen del bloque en 3... (top, centro y pie) y en tu sprite las colocas una junto a otra (una fila de 3)... donde "top y pie" no se repetiran y "centro" se repetira verticalmente...

PD: hay otra alternativa usando pseudoclases :before y :after, (para no usar etiquetas vacias) pero no es compatible en todos los navegadores (solo desde IE8) para cualquiera de los casos usa el buscador es un tema ya tratado
__________________
Toroflix - movies.

Etiquetas: ancho, contenido, repetir, sprites, zonas
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 21:14.