Agregarle efectos gráficos a las páginas web

Gustavo 的个人资料Gustavo Bonansea日志列表

工具

帮助

日志

排列方式：

6月7日

Agregarle efectos gráficos a las páginas web

Efectos y Transformaciones

Una forma muy simple y rápida para agregar efectos al contenido de una página web es a través de los filtros y efectos que se pueden agregar en los estilos de los elementos de una página web.

De esta forma podremos con solo agregarle un atributo a un elemento HTML darle efectos como transparencias, rotaciones, mirrors, desenfoque, etc. Además pueden "adornarse" los cambios que se realicen a la página con transiciones (como las del PowerPoint), como persianas, tableros de ajedrez, desvanecimiento, pixelación, deslizamiento, etc. Es realmente muy rápido ya que esta técnica utiliza la misma tecnología que se usa para realizar el render de los juegos: DirectX

Lo único que debemos hacer es agregar un filtro al atributo style de la siguiente forma:

El código HTML anterior realiza una rotación, un espejamiento y un desenfoque de la imagen.

En el código siguiente creamos un gradiente:

Con el siguiente código se puede aplicar una transformación, todos los cambios realizados en el HTML desde que se ejecuta el método apply() del filtro hasta la llamada a play() se ejecutan utilizando la transición.

<HEAD>
<SCRIPT>
var startImage ="fruit.gif";
var endImage="mouse.gif";
function doTrans() {

        imgObj.filters[0].apply();
        if (oImg.src.indexOf(startImage)!=-1) {
            oImg.src = endImage;
            imgObj.style.backgroundColor = "gold";
            imgObjText.innerHTML =             "<BR><B>Second Page</B><BR><BR>Using the <B>play</B> method reveals the changes in the SPAN element content."        }
        else {
            oImg.src = startImage;
            imgObj.style.backgroundColor = "skyblue";
            imgObjText.innerHTML =             "<BR><b>First Page</b><BR><BR>Using the <B>apply</B> method prepares this SPAN element for content changes."        }
        imgObj.filters[0].play();
}
</SCRIPT>
</HEAD>
<BODY>
<SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); FONT: 9pt/1.3 verdana; WIDTH: 305px; COLOR: black; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
<DIV id=imgObjText><BR><B>First Page</B><BR><BR>Using the <B>apply</B> method prepares this SPAN element for content changes.</DIV></SPAN><BR><BR>
<BUTTON onclick="doTrans()">Play Transition</BUTTON>
</BODY>

Cabe aclarar que la desventaja de esta técnica es que sólo funciona en Internet Explorer y algunos filtros solo están disponibles para la versión 5.5 en adelante.

Para más información sobre filtros y transformaciones con ejemplos (de donde fueron sacados los ejemplos anteriores): http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/filters.asp

Para una guía de referencia sobre filtros y transformaciones: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/reference.asp

18:29 | 写入日志

若要添加评论，请使用您的 Windows Live ID 登录（如果您使用过 Hotmail、Messenger 或 Xbox LIVE，您就拥有 Windows Live ID）。登录

还没有 Windows Live ID 吗？请注册

	Gustavo_Bonansea 发表: Trate de navegar la página y no pude, trato después y te cuento. 6 月 9 日
	Gustavo_Bonansea 发表: Gracias. Lo voy a probar para ver que tal. 6 月 9 日
	default 发表: No se si tenga algo que con tu post, pero te dejo un link a skmmenu. Es un web custom control para crear menus en webforms. http://www.skmmenu.com/menu/ saludos.. 6 月 8 日

引用通告

此日志的引用通告 URL 是：

http://misopiniones.spaces.live.com/blog/cns!2737DC89A4AAB26B!159.trak

引用此项的网络日志

日志

Agregarle efectos gráficos a las páginas web

评论 (3)

引用通告