Autor Tema: Ejercicio CU01061D curso CSS: radial-gradient y border image, no se muestra bien (Leído 3680 veces)

Xarlie · « **en:** 05 de Noviembre 2014, 19:45 »

Hola buenas, antes de nada agradeceros como siempre vuestra dedicacion y estos maravillosos cursos, y aqui viene mi duda.
En el ejercicio de radial gradient pedis una imagen con degradado y un borde hecho a partir de una imagen o fragmento de esta.

El problema es que la imagen degradada siempre ocupa el espacio de los bordes y la imagen que debe expandirse como borde no lo hace.

Aqui os dejo el codigo y gracias de antemano!

Código: [Seleccionar]

div{margin:0 auto; width:400px; height:200px; border: 30px solid transparent;  border-image: url(../img/borde.jpg) 30 30 stretch;
 background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);}

Ogramar · « **Respuesta #1 en:** 05 de Noviembre 2014, 23:16 »

Hola, pega el código completo, tanto html como css, para poder reproducirlo y ver dónde está el problema. También sube como archivos adjuntos las imágenes que estés utilizando, o indica sus urls si están disponibles en photobucket, picassa, o alguna web. De esa forma podremos hacer exactamente lo que estés haciendo tú para comprobar qué es lo que ocurre. Salu2

Xarlie · « **Respuesta #2 en:** 06 de Noviembre 2014, 00:08 »

Código: [Seleccionar]

html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../CSS/Estilos3.css"></link>
</head>
<body>
<div></div>

</body>
</html>

Ese es el codigo html y la imagen gracias

Mario R. Rancel · « **Respuesta #3 en:** 06 de Noviembre 2014, 09:11 »

Hola, he revisado el código y la imagen y no resulta sencillo de resolver. En primer lugar la imagen no parece definir un borde adecuado. Tendrías que usar una imagen que sea un borde en miniatura que diferencie las esquinas de la parte intermedia, de forma que las esquinas se coloquen en su posición y la parte intermedia se repita o se estire.

Por otro lado al extenderse el fondo hasta el borde mismo, se produce un solapamiento. Esto son quizás detalles todavía no bien resueltos por CSS. Para evitarlo, en este código he puesto un div envolvente para crear el borde y otro interno para definir el fondo.

A partir de estas ideas creo que puedas jugar con distintas opciones y mejorarlo.

Código: [Seleccionar]

<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
.externo{margin:0 auto; width:400px; height:200px; 
border: 30px solid ;
border-image: url(border.png) 30 30 stretch;
}
.interno{background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%); 
height:100%;
}
</style>
</head>
<body>
<div class="externo"><div class="interno">Un contenido</div></div>
</body>
</html>

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Ejercicio CU01061D curso CSS: radial-gradient y border image, no se muestra bien (Leído 3680 veces)

Xarlie

Ejercicio CU01061D curso CSS: radial-gradient y border image, no se muestra bien

Ogramar

Re:Ejercicio CU01061D radial-gradient y border image

Xarlie

Re:Ejercicio CU01061D radial-gradient y border image

Mario R. Rancel

Re:Ejercicio CU01061D radial-gradient y border image

Preguntas y respuestas