|
Si deseas hacer un intercambio de links con DotNetcr, escríbenos aquí
|
 |
Recibe las actualizaciones vía RSS
|
|
|
Degradado con CSS Filter |
|
Una idea creativa como alternativa para un fondo de página sin la utilización de imágenes.
|
|
|
| Categorías : CSS - Themes |
| Autor : CSSboulevar |
Fecha : 9/19/2005 |
Visitas : 9249 |
Voto : 0.00 |
|
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>
|
Por Anónimo - Fecha: 2006/06/29 08:44 PM
copie eso y no me genero el degradede, puede ser por que estoy usando el mozila ???
muchas gracias
muracciolei@hotmail.com
Por Anónimo - Fecha: 2006/07/31 11:47 AM
Hola Anónimo. Si efectivamente esa hoja de estilo solo funciona en Internet Explorer. Para Mozilla te recomiendo utilizar una imagen.
Un saludo. Fede.
Por Anónimo - Fecha: 2006/11/25 10:09 AM
Buenísima esta seccion, gracias, me he ahorrado trabajo con Photoshop para aplicar degradado.
Por Anónimo - Fecha: 2007/06/06 05:11 AM
Si sólo sirve para visualizarlo en IExplorer y para otros Navegadores como Mozilla se necesita una imagen...¿Cuál es la ventaja de este "código"?... Entonces ¿no sería mejor poner directamente una imagen background que sirva para todos los navegadores?
Por Anónimo - Fecha: 2007/06/17 12:04 PM
este ejemplo de degradado lo veo en todo lado.. deberian pensar un poco mas y no copiar y pegar articulos de otras paginas.
Por Anónimo - Fecha: 2008/06/06 09:02 AM
javier: MUY BUENO LA VERDAD, pero me sale un mensaje de adevertencia de segurdiad, que puedo hace para que eso no pase
Por Anónimo - Fecha: 2008/11/27 12:59 PM
Sale toda la pantalla en negro
Por Anónimo - Fecha: 2010/04/08 11:35 PM
CAMMBIENLE LOS COLORES...
|
|
carlosbd
jmcsoberano
FabricioLeon
RyKyA
lokito.tlv
adelys Yanet
|
PER |
233 |
|
MEX |
226 |
CRI |
180 |
COL |
113 |
ESP |
97 |
ARG |
82 |
|