Muy buenas a todos, y bienvenidos una vez más a una nueva clase del curso introductorio a CSS 3.
Para esta octava clase, daremos un paso más allá en la utilización de colores en nuestras páginas web, con el uso de los degradados. Cuando hablamos de degradados, hacemos referencia a los efectos que podemos darle a los colores dentro de la página web con CSS. En concreto, la transición de un color a otro, de forma secuencial en pantalla.
Usaremos linear-gradient y radial-gradient para ello.
De esta forma, ampliaremos vez más, y en gran medida, las posibilidades de personalización del aspecto visual del código.
Suena interesante, ¿Verdad?
¡Vamos a ello!
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html>
<head>
<title>Clase con degradados</title>
<style>
div{
width: 400px;
height: 200px;
border: 2px solid gray;
}
#capa1 {
background: linear-gradient(45deg, rgba(255,255,255, 0.5) 40%,
#000000 70%,
red 100%);
}
#capa2 {
background: radial-gradient(circle at 10% 50%,
white 0%,
green 40%,
rgba(0,0,0,0.4) 100%);
}
#capa3 {
background: radial-gradient(circle at 10% 50%,
white 0%
green 40%,
black 100%);
}
.boton_con_brillo{
background: linear-gradient(35deg,
rgba(255,0,255,0) 30%,
rgba(255,0,255,0.2) 40%,
rgba(255,0,255,0.66) 50%,
rgba(255,0,255,0.2) 60%,
rgba(255,0,255,0) 70%);
font-size: 2em;
color: #FFFFFF;
font-family: Arial;
text-shadow: 1px 0px 20px #ffd200;
width: 200px;
height: 35px;
border-radius: 20px;
border: 2px solid yellow;
text-align: center;
}
</style>
</head>
<body>
<div id="capa3"></div>
<div id="capa1"></div>
<div id="capa2"></div>
<div class="boton_con_brillo"> <p> Botón con brillo</p></div>
</body>
</html>