domingo, marzo 26, 2023

Degradado con CSS Filter

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>




Roy Rojashttp://www.dotnetcr.com
Con más de 20 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 | GitHub

Redes Sociales

2,736FansMe gusta
326SeguidoresSeguir

Popular esta semana

Flutter – Error: ADB exited with exit code 1

En este artículo vamos a explorar algunas posibles causas y solución al error en Flutter Error: ADB exited with exit code 1....
SQL Server MERGE

MERGE en SQL Server para Insert, Delete y Update con dos tablas

Ejemplo práctico usando MERGE para sincronizar dos tablas, Insert, Update y Delete en un solo query. Válido para SQL SERVER 2008 o superior.
SQL Server

DELETE con subconsulta o INNER JOIN

En el siguiente ejemplo se explica la forma en que se pueden eliminar registros en nuestras tablas en SQL Server con instrucciones...

Últimos artículos

Como crear una API REST con ASP.NET Core 6.0

Crear una API REST con C# en ASP.NET es un proceso sencillo y rápido que permite exponer un conjunto de recursos a...
Machine Learning & Python

Introducción a Machine Learning en Python

Machine Learning es una rama de la inteligencia artificial que se enfoca en el desarrollo de sistemas que pueden aprender de...
SQL Server MERGE

MERGE en SQL Server, como utilizarlo de forma sencilla

El comando MERGE en SQL Server se utiliza para combinar datos de varias tablas en una sola tabla. Es útil para actualizar...

Índices repetidos en SQL Server ¿Cómo encontrarlos?

Los índices en la base de datos SQL Server es una herramienta que nos ayuda a mejorar la respuesta de nuestras consultas,...