Son uno de los efectos más atractivos incorporados por CSS3.
Anteriormente era casí imposible usando las técnicas existentes, ahora es muy simple con CSS3. Con background y unos poco parámetros es suficiente.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: -webkit-linear-gradient(top right, #FFFFFF, #666666);
background: -moz-linear-gradient(top right, #666666, #FFFFFF);
}
#titulo{
font: bold 36px NuevaLetras, verdana, sans-serif;
}
Este es el resultado.
Los gradientes son declarados como fondos, los podemos aplicar usando la propiedad background o la propiedad asociada background-imagen. La sintexis para crear un gradiente líneal es linear-gradient(punto de inicio, desde color, a color). El primer valor es declarado con las palabras top, bottom, left, right.
Las palabras claves se pueden combinar, dando diferentes resultados.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: -webkit-linear-gradient(top right, #FFFFFF, #666666);
background: -moz-linear-gradient(top right, #666666, #FFFFFF);
}
#titulo{
font: bold 36px NuevaLetras, verdana, sans-serif;
}
El punto de inicio se puede expresar como un ángulo.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: -webkit-linear-gradient(35deg, #FFFFFF, #666666);
background: -moz-linear-gradient(35deg, #666666, #FFFFFF);
}
#titulo{
font: bold 36px NuevaLetras, verdana, sans-serif;
}
Podemos agregar más valores para un gradiente multicolor.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: -webkit-linear-gradient(top, #000000, #FFFFFF, #666666);
background: -moz-linear-gradient(top, #000000, #666666, #FFFFFF);
}
#titulo{
font: bold 36px NuevaLetras, verdana, sans-serif;
}
También podemos utilizar la palabra clave transparent mezclamos el gradiente con el fondo.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
background:url(../fondo11.jpg);
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: -webkit-linear-gradient(top, transparent, #666666);
background: -moz-linear-gradient(top, transparent, #666666);
}
#titulo{
font: bold 36px NuevaLetras, verdana, sans-serif;
}
Los parámetros para los colores son descriptos con el nombre color-stop. Esto es porque incluyendo un valor adicional podemos determinar el punto de inicio y finalización de cada color, y personalizar el gradiente.
@charset "utf-8";
/* CSS Document */
body {
text-align:center;
}
#inicio{
display:block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: 1px solid #999999;
background: -webkit-linear-gradient(top, #FFFFFF 45%, #666666 95%);
background: -moz-linear-gradient(top, #FFFFFF 45%, #666666 95%);
}
#titulo{
font: bold 36px NuevaLetras, verdana, sans-serif;
}
No hay comentarios:
Publicar un comentario