16/07/2008, 19:09
| |||
| |||
| Borde degradado Hola, he buscado en la web cómo hacer bordes degradados a una etiqueta DIV y no encuentro ejemplos. Me gustaría lograr bordes como las imágenes de este link: http://www.unmatchedstyle.com/ Si tienen algún link dónde exista un tutorial les agradezco me lo pasen o algún ejemplo hecho por Uds. Desde ya muchas gracias por las respuestas. Saludos |
|
17/07/2008, 01:41
| ||||
| ||||
| Respuesta: Borde degradado Hola: No sé si en el futuro se implementen esos bordes, pero hoy yo no lo conozco... en el link parece que el fondo está aplicado a toda la capa y encima se pone una imagen u otra capa, y puede parecerse a un borde degradado, pero no creo que lo sea. Saludos 
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
17/07/2008, 02:14
| |||
| |||
| Respuesta: Borde degradado Está claro que al tener sólo dos tamaños, tienen dos clases distintas para esos DIVs Pero si las fotos fueran de distintos tamaños ¿cómo se resolvería esa situación? mmm... a mi se me ocurre generarme un construtor de cajas en JavaScript que aplique ese efecto. Pero no tengo ni idea de como hacer eso sólo con divs y css. Es un efecto interesante que merece la pena ser estudiado para cualquier tamaño. Lo único que se me ocurre es un anidamiento de 5 DIVs.
Código:
¿A alguien se le ocurre otra forma? <div class="bordeCabecera"> <div class="bordeInferior"> <div class="bordeIzquierda"> <div class="bordederecha"> <div class="contenido"> [...] </div> </div> </div> </div> </div> |
|
17/07/2008, 02:48
| ||||
| ||||
| Respuesta: Borde degradado Todavía no sé a qué bordes os referís. Si es a los bordes sombreados de cada gráfico, en este caso como en casi todos son imágenes de fondo:  Si habláis de otra cosa ya diréis. Mikel. |
|
17/07/2008, 04:25
| |||
| |||
| Respuesta: Borde degradado Cita: Claro, Mikmoro.
Iniciado por Mikmoro  Todavía no sé a qué bordes os referís. Si es a los bordes sombreados de cada gráfico, en este caso como en casi todos son imágenes de fondo: Si habláis de otra cosa ya diréis. Mikel. Pero el asunto es qué pasa cuando tienes imágenes de distinto tamaño ¿haces un fondo para cada una? Ese es el asunto... |
|
17/07/2008, 04:48
| ||||
| ||||
| Respuesta: Borde degradado En ese caso lo que suele hacer es una imagen para cada una de las 4 esquinas, otras 4 para los laterales. También se puede usar una sóla imágen para las 4 esquinas usando las posiciones del background y 4 imágenes para los laterales, y algunas otras variantes de esto mismo. Pero vamos, en este caso concreto han hecho una imagen para cada cuadro al que han puesto sombra: big_box.gif  small_box.gif etcétera. Mikel. |
|
17/07/2008, 05:20
| |||
| |||
| Respuesta: Borde degradado Gracias por responder. En realidad a mi se me presenta el caso de que las imágenes van a ser de diferente tamaño y además no sé de antemano cuáles son sus medidas. No entiendo bien el tema de las cuatro imágenes para los laterales, ya que al tener las imágenes diferentes tamaños ¿cómo debo hacer para que estas imágenes de los laterales se adapten al tamaño de la imagen? Saludos |
|
17/07/2008, 05:23
| ||||
| ||||
| Respuesta: Borde degradado Cita: Hay que hacer una estructura de divs cuyo background se repita bien horizontalmente, bien verticalmente.
Iniciado por ci2000 Gracias por responder. En realidad a mi se me presenta el caso de que las imágenes van a ser de diferente tamaño y además no sé de antemano cuáles son sus medidas. No entiendo bien el tema de las cuatro imágenes para los laterales, ya que al tener las imágenes diferentes tamaños ¿cómo debo hacer para que estas imágenes de los laterales se adapten al tamaño de la imagen? Saludos No es dificil pero si resulta algo farragoso. |
|
17/07/2008, 19:17
| ||||
| ||||
| Respuesta: Borde degradado Mira un ejemplo hecho con una sóla imagen. Este es el código: Cita: EDITO: porque lo he mejorado un poquillo.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title></title> <style type="text/css"> * { margin: 0;padding: 0;} body {margin: 50px;} .caja {float: left;} .uno {width: 123px;} .dos {width: 271px;} .sup_der, .sup_izq, .inf_der, .inf_izq {background: url(img/big_box.gif) no-repeat;} .sup_der {background-position: right top;} .sup_izq {margin: 0 10px 0 -2px;} .inf_der {background-position: right bottom; margin-top: -5px!important; margin-top: -13px; z-index:0; position: relative;} .inf_izq {background-position: left bottom; height: 10px; margin: 0 10px 0 -2px;} img {margin: 10px 0px 0px 10px; z-index:10; position: relative;} p {padding: 12px; margin: 0px;} </style> </head> <body> <div class="caja uno"> <div class="sup_der"> <div class="sup_izq"> <img src="img/1.jpg" /> </div> </div> <div class="inf_der"> <div class="inf_izq"></div> </div> </div> <div class="caja dos"> <div class="sup_der"> <div class="sup_izq"> <img src="img/bloque.png" /> </div> </div> <div class="inf_der"> <div class="inf_izq"></div> </div> </div> <div class="caja tres"> <div class="sup_der"> <div class="sup_izq"> <p>Una caja de texto de muestra</p> <p>Una caja de texto de muestra</p> <p>Una caja de texto de muestra</p> <p>Una caja de texto de muestra</p> <p>Una caja de texto de muestra</p> </div> </div> <div class="inf_der"> <div class="inf_izq"></div> </div> </div> </body> </html> Mikel. Última edición por Mikmoro; 18/07/2008 a las 04:56 |
