« anterior próximo »
Páginas: [1]

Autor Tema: CSS Usar imagen como borde crear degradado circular radial-gradient CU01061D  (Leído 2105 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
CSS Usar imagen como borde crear degradado circular radial-gradient CU01061D
« en: 22 de Enero 2016, 01:19 »
Códigos del ejercicio CU01061D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos97.css"/>
<title>Portal web</title>
</head>
<body>
<div></div>
</body>
</html>
Código CSS: "estilos97.css"

Código: [Seleccionar]
div {
width: 400px;
height: 200px;
border: 5px solid;
background: linear-gradient(45deg, blue, yellow);
border-image-source: url(border-image2.png);
border-image-slice: 33;
border-image-width: 20px;
border-image-repeat: stretch;
}
Adjunto la imagen necesaria para una visualización correcto de los códigos.

Gracias.
« Última modificación: 04 de Febrero 2016, 08:56 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:CSS Usar imagen como borde crear degradado circular radial-gradient CU01061D
« Respuesta #1 en: 04 de Febrero 2016, 08:58 »
Buenas dimiste el ejercicio pedía utilizar un degradado radial, por ejemplo

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
div {
width: 400px;
height: 200px;
border: 5px solid;
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
border-image-source: url(border-image2.png);
border-image-slice: 33;
border-image-width: 20px;
border-image-repeat: stretch;
}
</style>

<title>Portal web</title>
</head>
<body>
<div></div>
</body>
</html>
Salu2
En línea
Páginas: [1]
« anterior próximo »
 

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".