Foros del Web » Creando para Internet » CSS »

Borde degradado

Estas en el tema de Borde degradado en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/07/2008, 20:09
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
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
  #2 (permalink)  
Antiguo 17/07/2008, 02:41
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #3 (permalink)  
Antiguo 17/07/2008, 03:14
 
Fecha de Ingreso: junio-2004
Mensajes: 616
Antigüedad: 13 años, 6 meses
Puntos: 25
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:
<div class="bordeCabecera">
	<div class="bordeInferior">
		<div class="bordeIzquierda">
			<div class="bordederecha">
				<div class="contenido">
					[...]
				</div>
			</div>
		</div>
	</div>
</div>
¿A alguien se le ocurre otra forma?
__________________
eContento
- Mis artículos, tutoriales y labs
- Mis jsfiddles
  #4 (permalink)  
Antiguo 17/07/2008, 03:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #5 (permalink)  
Antiguo 17/07/2008, 05:25
 
Fecha de Ingreso: junio-2004
Mensajes: 616
Antigüedad: 13 años, 6 meses
Puntos: 25
Respuesta: Borde degradado

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
Claro, Mikmoro.

Pero el asunto es qué pasa cuando tienes imágenes de distinto tamaño ¿haces un fondo para cada una? Ese es el asunto...
__________________
eContento
- Mis artículos, tutoriales y labs
- Mis jsfiddles
  #6 (permalink)  
Antiguo 17/07/2008, 05:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #7 (permalink)  
Antiguo 17/07/2008, 06:20
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
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
  #8 (permalink)  
Antiguo 17/07/2008, 06:23
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Respuesta: Borde degradado

Cita:
Iniciado por ci2000 Ver Mensaje
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
Hay que hacer una estructura de divs cuyo background se repita bien horizontalmente, bien verticalmente.
No es dificil pero si resulta algo farragoso.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #9 (permalink)  
Antiguo 17/07/2008, 20:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Borde degradado

Mira un ejemplo hecho con una sóla imagen.

Este es el código:

Cita:
<!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>
EDITO: porque lo he mejorado un poquillo.

Mikel.

Última edición por Mikmoro; 18/07/2008 a las 05:56
  #10 (permalink)  
Antiguo 17/07/2008, 20:29
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Respuesta: Borde degradado

Excelente!!!
Lo voy a probar y luego te cuento cómo me fué.

Saludos
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 10:34.