Degradado con CSS Filter

0
124

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.

Filter:Alpha([Opacity], [FinishOpacity], [Style], [StartX], [StartY], [FinishX], [FinishY])

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:

<html>
<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>

Con más de 18 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español.

royrojas.com | dotnetcr.com

Dejar respuesta

Please enter your comment!
Please enter your name here