Hola. Entrega de CSS desde cero Ejercicio CU01061D del curso práctico de programación web con CSS desde cero.
Código HTML
<!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
/* <<<<<<<<<<<<<<<<<<<<< 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);
}