A pedido de
Nuthers , ahora les enseñare a crear un fondo en degradado tipo imagen pero solo con css
Las imagenes valen mas que las palabras vean:
My Box: es muy similar al header del foro ^^ es un ejemplo de lo que se puede llegar ha hacer.
Como los hago u.u ???Para el box 1:Tendremos que abrir el archivo .css (hoja de estilos) y buscar el class o id que queremos modificar pero en este caso creeare un nuevo div asi:
<div class="mybackground1">box 1</div>
en nuestro css agregaremos:
.mybackground1{
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.66, #dbdbdb),color-stop(1, #ffffff));
background: -moz-linear-gradient(center bottom,#dbdbdb 66%,#ffffff 100%);
}
a este podemos agregarle un borde o lo que gusten pero yo le pondre el border:
border:4px solid #4e81a4;
border-top:4px solid #9bc8ea;
border-bottom:4px solid #265778;
y me quedara asi:
.mybackground1{
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.66, #dbdbdb),color-stop(1, #ffffff));
background: -moz-linear-gradient(center bottom,#dbdbdb 66%,#ffffff 100%);
border:4px solid #4e81a4;
border-top:4px solid #9bc8ea;
border-bottom:4px solid #265778;
}
y quedaria como el box 1 de la imagen.
Ahora bien si nos fijamos usa dos colores uno para arriba y el otro abajo asi:
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.66, #dbdbdb),color-stop(1, #ffffff));
background: -moz-linear-gradient(center bottom,#dbdbdb 66%,#ffffff 100%);
El primero (#dbdbdb) es para la parte de abajo es decir lo gris qu even en la imagen y el segundo (#fffff) es para la parte de arriba.
Ahora si nos fijamos en los 3 box hay un grado diferente de degradado...
si vemos el css veremos que atras de #dbdbdb esta un 0.66 y en el de la otra linea de abajo tiene 66% esto significa la cantida de pixeles en decimales y porcentaje que este cubrira al segundo color; y si vemos en el siguiente color #ffffff hay un 1 y en la de abajo hay un 100% esto se debe a que es el color que cubre todo el div completamente pero que estara cubierto por el primero.
Si desean cambiar el degradado deben cambiar los dos clores en la dos lineas , y para cambiar lo degrado solo cambian los decimales por ejeplo si queremos un 22% en la primer linea ponen 0.22 y en la de abajo ponen 22% pero el segundo debe quedar en 100% aunq pueden probar cambiando los valores a sus gustos.
los codigos que utilice para la imagen son estos:
//similar al header de spirate.net
.mybackground{
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.0, #479bd7),color-stop(1, #59a7dd));
background: -moz-linear-gradient(center bottom,#479bd7 0%,#59a7dd 100%);
border:1px solid #4e81a4;
border-top:1px solid #9bc8ea;
border-bottom:1px solid #265778;
color:#FFF;
}
// box 1
.mybackground1{
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.66, #dbdbdb),color-stop(1, #ffffff));
background: -moz-linear-gradient(center bottom,#dbdbdb 66%,#ffffff 100%);
border:4px solid #4e81a4;
border-top:4px solid #9bc8ea;
border-bottom:4px solid #265778;
}
// box 2
.mybackground2{
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.44, #dbdbdb),color-stop(1, #ffffff));
background: -moz-linear-gradient(center bottom,#dbdbdb 44%,#ffffff 100%);
border:4px solid #4e81a4;
border-top:4px solid #9bc8ea;
border-bottom:4px solid #265778;
}
// box 3
.mybackground3{
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.22, #dbdbdb),color-stop(1, #ffffff));
background: -moz-linear-gradient(center bottom,#dbdbdb 22%,#ffffff 100%);
border:4px solid #4e81a4;
border-top:4px solid #9bc8ea;
border-bottom:4px solid #265778;
}
ahi ven los cambios en los porcentajes y para los divs:
<div class="mybackground"><b>my box</b></div>
<div class="mybackground1">box 1</div>
<div class="mybackground2">box 2</div>
<div class="mybackground3">box 3</div>
y si desean ponerle este fondo a algun div ya creado solo cambien el background por las dos lineas de background y cambian colores y listo ^^
Esto es todo por hoy espero les guste y les funcione o sirva en algo.
Saludos!.
Tema: [Tutorial] Como crear background degradado como imagen (Leído 1396 veces)
