Implementar Imagen de Fondo con Gradianes en CSS - HTML
Al Final Por Favor Comenten que les pareció para mantener la página, NO tienen que registrarse.
Este sencillo ejemplo posse la intención de ayudar a ubicar la manera de cómo diseñar una web muy básica utilizando CSS y HTML como herramientas, la idea principal es poder implementar fondo con GRADIANES en todos sus DIV. Este ejemplo se conformará de 2 archivos, uno que contendrán las etiquetas, osea el HTML y el otro el que contendrá un diseño escrito en CSS. El archivo 1 se llamaráindex.html y el 2do archivo se llamara estilos.css.
El archivo HTML deberá contener esto:
Código que dentro de "index.html"
<?xml version='1.0' encoding='UTF-8' ?>
<html>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<head>
<title>TÍTULO</title>
</head>
<body id="color_fondo">
<div id="superior">
<h1>MI TÍTULO</h1>
</div>
<p></p>
<div id="centro">
DIV Céntro
</div>
<div id="izquierda" >
DIV Izquierda
</div>
<div id="derecha" >
DIV Derecha
</div>
<footer>
<div id="inferior" >
Pie de Página
</div>
</footer>
</body>
</html>
//ESTILO.css o <style>
#color_fondo {
background-color: cadetblue;
}
#superior {
width: 860px;
height: 70px;
margin: auto;
background: white;
border: 5px solid #E9E4E8;
border-color: forestgreen;
font-family: cursive;
text-align: center;
}
#centro {
width: 860px;
height: 560px;
margin: auto;
background: white;
border: 5px solid #E9E4E8;
border-color: darkred;
font-family: cursive;
text-align: center;
/* IMPLEMENTAR GRADIANES */
background: #a4b357;
background: -moz-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #a4b357), color-stop(57%, #a4b357), color-stop(76%, #75890c), color-stop(100%, #75890c));
background: -webkit-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: -o-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: -ms-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: linear-gradient(to bottom, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c', GradientType=0 );
}
#inferior {
position: relative;
width: auto;
margin: auto;
background: white;
border: 5px solid #E9E4E8;
border-color: forestgreen;
font-family: fantasy;
padding: 5px 0px;
clear: both;
text-align: center;
}
#izquierda {
width: 290px;
height: 657px;
background: dodgerblue;
border: 5px solid #E9E4E8;
border-color: blue;
text-align: center;
position: absolute;
top: 8px;
left: 0;
margin: 0 0.5em;
//ESTILO BANNER
//display:scroll;
//position:fixed;
//bottom:5px;
/* IMPLEMENTAR GRADIANES */
background: #a4b357;
background: -moz-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #a4b357), color-stop(57%, #a4b357), color-stop(76%, #75890c), color-stop(100%, #75890c));
background: -webkit-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: -o-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: -ms-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: linear-gradient(to bottom, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c', GradientType=0 );
}
#derecha {
width: 290px;
height: 657px;
background: brown;
border: 5px solid #E9E4E8;
border-color: #999900;
text-align: center;
position: absolute;
top: 8px;
right: 0;
margin: 0 0.5em;
/* IMPLEMENTAR GRADIANES */
background: #a4b357;
background: -moz-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #a4b357), color-stop(57%, #a4b357), color-stop(76%, #75890c), color-stop(100%, #75890c));
background: -webkit-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: -o-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: -ms-linear-gradient(top, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
background: linear-gradient(to bottom, #a4b357 0%, #a4b357 57%, #75890c 76%, #75890c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c', GradientType=0 );
}
//ESPERO LES SEA DE AYUDA GRACIAS POR COMENTAR :)
