Autor Tema: HTML CSS crear borde personalizado con border-image ejemplo ejercicio CU01061D  (Leído 2984 veces)

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
Hola! Amigos de aprenderaprogramar.

Dejo la respuesta al ejercicio propuesto en el capítulo CU01061D del curso de css desde cero:


Código:

Código: [Seleccionar]
<!DOCKTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="Tema 1061 radial-gradient">
<meta name="keywords" content="palabras clave">
<title>Tema 1059 Radial-gradient</title>
<style type="text/css">
*{margin:0; padding:0; font-family:'Snap ITC', sans-serif;}
div{width:400px; height:200px;}
#div1{width:460px; height:260px;
background-image:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR4gtgWpjM_X5cR8b2TM6llbpCvTztaE8-I8f-HmMfDqUWIH7mS);
background-position:center;}
#div2{background:radial-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
border:30px solid;
border-image-source:url(data:image/jpeg;base64,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);
border-image-slice:17;}
</style>
</head>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
</html>

Un saludo!

Y gracias por vuestro trabajo.
« Última modificación: 09 de Marzo 2016, 10:19 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Buenos días

Todo bien incluso el marco-borde personalizado se ve más claro si comentamos la línea con la imagen de fondo

/*background-image:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR4gtgWpjM_X5cR8b2TM6llbpCvTztaE8-I8f-HmMfDqUWIH7mS);*/

Saludos
« Última modificación: 09 de Marzo 2016, 21:45 por Mario R. Rancel »

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
Hola! Mario.
Abro el enlace y me sale todo negro.
La idea es poner el fondo negro para que se vea mejor?
Bueno el gradient está +- no?
Y tiene un bordecito.
 :o)
Gracias!
Un saludo!

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Sí perdona no quería poner un enlace y sí la idea era simplemente que se viera mejor, el ejercicio está bien

Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".