Visual Effects Library

 Why AJAX needs visual effects

Implementing a web based application by using AJAX techniques is about
improving the backside, will enable the right user experience and will make
your application work the way it should.
If you want that your application really looks like AJAX you also have to give
your application a modern design together with all kinds of visual effects.
That will really impress also the non-technical users!
Don't you think that this is nonsense? - I did for some time last year but I had
to change my mind - at least a little bit.
If you travel across the web sides of the commercial AJAX frameworks you
will find on almost every site a bunch of visual effect libraries that are
technically not bound to asynchronous JavaScript and XML nor xmlhttp.
Commercial frameworks like backbase or frameworks like script.aculo.us do
offer visual effects side by side with AJAX functionality.
Some of the effects shown here are really stupid eye-catcher effects.
Web applications that do not use xmlhttp but do asynchronous image loading
are seen as AJAX applications.
Articles about AJAX do mix up client-server communications with visual
effects. A sample on that:
http://www.maxkiesler.com/index.php/weblog/comments/451/
Another article: AJAX Rounded Corner Tutorials at
http://encytemedia.com/blog/articles/2005/12/01/rico-rounded-corners-
without-all-of-rico
Another article: Ajax Workshop 2 - Building Tabbed Content at
http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-
content/
... and you can find a lot more of them
Visual effects are definitively an important aspect for AJAX applications
today. Maybe the "market" will learn the technical difference in some near
future. Maybe a "get-it-all-together" solution is the right approach for the
"market".
So here is a list of visual effects and other "cool" looking stuff. Some of these
effects can also be used in any other html based application; some of them
will use AJAX. I'll explain the HTML+CSS+JavaScript that make the effect
but I will also bring the higher level approach using ASP.NET web controls
that makes using them really easy.
AJAX applications look great! :-)
So here comes a library of visual effects. From time to time I will add another
one and you will find them also on the demo side at
http://www.mathertel.de/AJAXEngine/ see Examples -> Visual Effects.

HTML + CSS Shadow Effect with real
transparency

If you want to give your objects a kind of 3D feeling then you might want
to use shadows for those objects that are placed upon the web page.
Using special graphics
An often solution for a shadow effect is to use table layout around the main
content and arrange a set of graphics around the right and bottom border.
You can get really wonderful shadow dropping effects using this approach but
because semi transparent images are not very well supported on IE you will
have to pay attention to the background color you use on the page and have to
mix it into your shadow images.
Using a Microsoft IE specific CSS filter attribute
When using the IE only you can also us one of the wonderful filter effects that
are available in this browser. Just add a CSS filter attribute like that:

filter: progid:DXImageTransform.Microsoft.dropShadow(Color=AAAAAA,offX=8,offY=8,positive= true);

If you use IE that you can see these shadows on the entry page for the visual
effects library. These shadows are also drawn by using solid colors.
Using CSS opacity
Here is a better solution that really resembles a kind of shadow because the
text and graphics in the shadow are really displayed in dimmed light. The clue
to this effect is a built-in opacity CSS graphics effect that is available IE,
Mozilla, Firefox - but in different way.
In Internet Explorer: style="filter: alpha(opacity= 50)"
The IE notation of the opacity effect is using a proprietary CSS attribute
named filter that can be used to add various effects to a HTML element.
Here we use the alpha filter.
In Mozilla/Firefox: style= "-moz-opacity:0.5"
The Mozilla / Firefox provides a proprietary css attribute named -moz-
opacity that allows specifying a opacity value.
In Opera: style= "opacity:0.5"
The Opera browser also has a proprietary css attribute named opacity that
allows specifying an opacity value.
These 3 CSS attributes can be combined together and every browser ignores
all the attributes that are unknown:

style="filter: alpha(opacity= 50); -moz-opacity:0.5; opacity: 0.5"

The HTML shadow object
This effect must be applied to rectangle region with a fixed width and height
that is over the main content by using an absolute position by using the same
size as the html part that is dropping this shadow.
Here is a simple sample that uses this trick. You can see it live at
http://www.mathertel.de/AJAXEngine/S04_VisualEffects/ShadowDemo.aspx
The good about this solution is, that no graphics are used and that the shadow
does not hide the text below but only seems to dim the available light.
• The outer div element is used to do the absolute positioning of the whole
group.
• The first inner <div> element is the object that has the opacity effect
applied. It is positioned some pixel to the right and down by using an
absolute positioning (relative to the containing <div>) too.
• The Content is placed inside the second inner <div> element that must
have a relative position without any offset to be displayed above the
shadow object.
Here is the plain HTML code:

<div class="VEPart" style="position: relative; width: 120px; top:-90px; left: 40px;">
<div class="VEShadow" style="position: absolute; left: 10px; top: 10px;
width: 120px; height: 84px; background-color: black;
filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;"> </div>
<div class="VEContent" style="position: relative; height: 80px;
background-color: #FFFFDD;"> I am flying above the text and dropping a shadow.</div>
</div>

You can see how it looks like on the demo website at
http://www.mathertel.de/AJAXEngine/S04_VisualEffects/ShadowDemo.aspx