pro-Gramas tu biblioteca de programacion
Tutoriales de css
Introducción
Hola amigos de pro-gramas en esta ocasión vamos a ver como crear un efecto de degradado en css, para esto utilizaremos etiquetas div y una imagen con transparencia alfa. El chiste de este efecto es asignarle un color fijo al div y después sobrescribir la imagen con transparencia para que le de el efecto.
Primero creamos un documento nuevo, en el creamos los div que tendrá el efecto, en la propiedad class le asignamos el nombre del estilo y en la propiedad style le asignamos el color de fondo al que queremos degradar. Si el div es mas grande que el del ejemplo entonces ocupas una imagen al tamaño del div.
Y por ultimo creamos nuestra hoja de estilo, en donde colocaremos dos clases con el mismo nombre, se puede decir que una es para IE y la otra para Mozilla. Como IE tiene conflictos para mostrar las imágenes png se tiene que filtrar para que se vea la transparencia.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Efecto de degradado en css</title>
<style type="text/css">
.degradado {
float:left;
width: 60px;
height: 80px;
background-position:center;
/* para que funcione en IE tenemos que foltrar la imagen */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado.png');
}
/* Mozilla no ocupa de filtrar nada. si el explorador es IE
ignora el estilo y salta al siguiente */
.degradado[class] {
background-image:url('degradado.png');
}
</style>
</head>
<body>
<div class="degradado" style="background-color: #ff0000;"></div>
<div class="degradado" style="background-color: #00ff00;"></div>
<div class="degradado" style="background-color: #0000ff;"></div>
<div class="degradado" style="background-color: #FFFF00;"></div>
<div class="degradado" style="background-color: #000000"></div>
</body>
</html>
Este tutorial se baso en Cristalab, descarga el ejemplo abajo.
Descargar