Autor Tema: CSS y HTML. radial-gradient, border-image borde personalizado. CU01061D (Leído 1950 veces)

paramonso · « **en:** 19 de Junio 2017, 13:32 »

Hola. Entrega de CSS desde cero Ejercicio CU01061D del curso práctico de programación web con CSS desde cero.

Código HTML

Código: [Seleccionar]

<!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" xml:lang="en" lang="en">

<head>
	<title>aprenderaprogramar.com CSS desde cero Ejercicio 61</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.27" />
	<link rel="stylesheet" type="text/css" href="Ejercicio61.CSS">
	<style type="text/css">
		@charset "utf-8";/* CSS Document */
		#header h1{ font-weight: bold; font-size: 38px;font-family: "Arial"; 
			text-shadow: 0 1px 0 #ccc, 
						 0 2px 0 #000, 
						 0 3px 0 #000, 
						 0 4px 0 #b9b9b9, 
						 0 5px 0 #aaa, 
						 0 6px 1px rgba(0,0,0,.1),
						 0 0 5px rgba(0,0,0,.1), 
						 0 1px 3px rgba(0,0,0,.3),
						 0 3px 5px rgba(0,0,0,.2), 
						 0 5px 10px rgba(0,0,0,.25),
						 0 10px 10px rgba(0,0,0,.2), 
						 0 20px 20px rgba(0,0,0,.15);
						 color: BLACK; text-align: 
						 center;
					}
		#header h2{ font-weight: bold; font-size: 17px;font-family: "Arial";
				text-shadow: 0 1px 0 #ccc,
				0 2px 0 #000,
				 0 3px 0 #000,
				  0 4px 0 #b9b9b9,
				   0 5px 0 #000,
				    0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),  0 1px 3px rgba(0,0,0,.3), 
				     0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25),
					  0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); 
					   color: navy; text-align: center;
               }
	 
		</style>
</head>
</head>

<body>
	<div id="header">
            <h1 class="name-title">
           Aprenderaprogramar.com </br>
           CSS desde cero</br>
            ejercicio61  </br>
              CU01061D</br>
           </h1>
           <h2> Pablo Ramón Pérez Blasco</h2>
	<div ID="MARCO" class="degradado1"></div>
	
</body>

</html>

Código CSS

Código: [Seleccionar]

/* <<<<<<<<<<<<<<<<<<<<< CABECERA >>>>>>>>>>>>>>>>>>>>>>>>>>*/
*{	margin:20px auto;
	padding:2px; 
	font-family:verdana,sans-serif;
	 background: -webkit-linear-gradient( #228d22, #006400, #008000);
	}
	
	
/*<<<<<<<<<<<<<<<<<<<<<< EJERCICIO 61 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

/*<<<<<<<<<<<<<<<<<<<<<< MARCO >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
#MARCO{
     width: 300px;
     height: 200px;
     padding: 10px; /* pongo un padding para despegar el texto de los bordes*/
     border-width: 10px;
     -webkit-border-image: url(http://imgur.com/AVYFbML.png) 10% stretch stretch;
     -moz-border-image: url(http://imgur.com/AVYFbML.png) 10% stretch stretch;
    }

/*<<<<<<<<<<<<<<<<<<<<<< DEGRADADO >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.degradado1{
		border: 1px solid #000;
		padding:10px auto;
		margin: 0 auto;
		height: 200px;
		width: 400px;
		
	}
	.degradado1{
		background: -webkit-radial-gradient(#ffff00, #4b0082);
		background: -moz-radial-gradient(#ffff00, #4b0082);
		background: radial-gradient(#ffff00, #4b0082);
	}

pedro,, · « **Respuesta #1 en:** 25 de Junio 2017, 00:30 »

Buenas.

Tu ejercicio cumple con lo que pide el enunciado, pero tienes mucho código repetido. Con sólo esto:

Código: [Seleccionar]

#marco{
        height: 200px;
        width: 400px;
        background: radial-gradient(#ffff00, #4b0082);
        border: 15px solid transparent;
        border-image: url(http://imgur.com/AVYFbML.png) 10% stretch;
      }

Se conseguiría el mismo resultado que con todo lo que tu escribiste:

Código: [Seleccionar]

#MARCO{
     width: 300px;
     height: 200px;
     padding: 10px; /* pongo un padding para despegar el texto de los bordes*/
     border-width: 10px;
     -webkit-border-image: url(http://imgur.com/AVYFbML.png) 10% stretch stretch;
     -moz-border-image: url(http://imgur.com/AVYFbML.png) 10% stretch stretch;
    }

/*<<<<<<<<<<<<<<<<<<<<<< DEGRADADO >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.degradado1{
		border: 1px solid #000;
		padding:10px auto;
		margin: 0 auto;
		height: 200px;
		width: 400px;
		
	}
	.degradado1{
		background: -webkit-radial-gradient(#ffff00, #4b0082);
		background: -moz-radial-gradient(#ffff00, #4b0082);
		background: radial-gradient(#ffff00, #4b0082);
	}

Ahí puedes ver todo lo que te sobraría.

También comentarte que las propiedades de los elementos html se deben escribir en minúsculas, por tanto no debes usar "ID" sino "id" y con sus valores pasaría lo mismo, por convención estos nombres empiezan por minúscula.

Saludos.

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

Noticias: