HTML and CSS  Home HTML and CSS Tutorials Getting Grip of Visual Effects - Static Filters
rss

Getting Grip of Visual Effects - Static Filters

Author: Webzo Studio More by this author


It is a known fact that nowadays most of the websites out there (especially those that show informational content) compete with magazines and other similar static media. However, you will notice that this is not always the case. It is also known that maybe one day, both web and digital TV will blend in one single medium. Steps towards that direction have been already made with the existence of internet TV, and so on. Remember that after all, there are only few things that do indeed separate us from doing that - several hardware impediments and also some old habits that need breaking, and last but not least the fact that the television industry and web designing and programming are two different job areas.

Nowadays, Internet is not a problem anymore either. Remember how back in the 56k modem era, it took a bit too long to load all those funky designed pages, with lots of images and animations? Well, as said before, we do not have that problem anymore - more than 80 percent of computer users have a broadband connection not only at work but also at home and since trends only show that Internet speed will continue to raise, this is no concern for anyone. But, if high-speed Internet connections will allow faster loads of animated web pages, this will only make them more popular, therefore we will be encountering several difficulties. The main difficulty will be that you will need to work harder to make something smashing, since just adding some pictures will not do the trick anymore. But aside from this, you will get the taste for CSS - it will be just like writing a program that reacts at simple clicks on your page.

Using Static Filters

That you first just have to know about Static filters is that they are Microsoft-only technology - this may put some problems with several non-Microsoft browsers (see Opera or Firefox) and even if you have the possibility of actually using them with CSS, CSS has not progressed that much yet in order to embrace animation. (Tip: do not consider hyperlink color changing a form of animation) However, several plug-ins have been developed in order to emulate Internet Explorer under other browsers, so most of the times you might not lose those visual effects. An example of static filter is shown below.

<html>
<head>
<style>
p {
height: 100px;
width: 600px;
font-size: 20pt;
filter: progid:DXImageTransform.Microsoft.Shadow (color='black', direction=50, strength=3) }
</style>
</head>

<body>
      <p> Type your text here. </p>
</body>
</html>

Now, you are probably wondering what the direction property does. Well, remember how we were supposed to create shading through static filters - through direction you get to rotate the light source around the object which is casting the shadow. I've set 50, you can try using lots of values, to see which of those comes more natural to you. If you are looking for a standard, take a look at the icons on your desktop, since they have shadows too. Generally, Microsoft has set their shadowing at 120 degrees.



About the Author:

Webzo Studio is a web design company located in the United States. Webzo Studio was founded in August 2005. We are a small team of designers that just love our job. The love of doing what we do is what makes us not doing our job as a job, but as an enjoyment.
read more about this author


Author's URL: www.webzo.org

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Read/Add comments to "Getting Grip of Visual Effects - Static Filters"

comments  bugmenots December 31, 2007 says:
Getting Grip of Visual Effects - Static Filters
You say Opera or Firefox won't handle CSS, but that is absolutey untrue. In fact I beleive Opera is better at CSS than Internet Explorer. It has many styles and modes that you can alter to your preferences or just use them as they are. Also there is a main CSS files that handles all websites that don't want or have their own CSS so Opera knows what to do! I think it is unfair that you pick on the less popular, but better supported (and extremely advantageous) browsers. It just makes no sense. U R A MAJOR FUCKTARD