Una idea creativa como alternativa para un fondo de página sin la utilización de imágenes.
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>
Usuarios que han visto este tema también han visto...
- Efectos en textos e imágenes con CSS
- Evitar que una página se imprima en CSS
- Filtro de imagenes mediante CSS (invertir imagenes).
- Aplicar los estilos a diferentes dispositivos con CSS
- Barra de desplazamiento a la izquierda con CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.