En este artículo utilizaremos por primera vez los CSS Filter que deben su nombre a los efectos que podemos lograr sin la utilización de imágenes editadas.
Este es el turno de presentar al filtro Alpha Channel, capaz de aclarar con efecto degradado a cualquier objeto de nuestra página.
Para que Alpha Channel funcione correctamente hay que definir algunas propiedades:
– Width
– Height
– Background
– Filter
Width y Height definen el área en donde Alpha Channel va a actuar.
Background contendrá el color que predominará en el degradado.
Filter contiene las propiedades que le dan vida al efecto que queremos lograr.
Opacity: Determina cuan opaco es el color predominante en el comienzo del degradado.
FinishOpacity: Determina cuan opaco es el color predominante en el final del degradado.
Style: Determina que efecto degradé vamos a utilizar.
StartX, StartY, FinishX, FinishY: Determinan si el degradé es horizontal o vertical.
Para lograr un fondo de página con Alpha Channel puedes copiar el siguiente ejemplo:
<head>
<style type=»text/css»>
body {margin:0; background:#000}
#body {background:#222;width:100%; height:100%; filter:Alpha(Opacity=100,
FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100%)}
</style>
</head>
<body>
<div id=»body»></div>
</body>
</html>
