Getting Grip of Visual Effects - Static Filters
| Category | : CSS | Views | : 3681 | ||
| Version | : 2.1 | Rating | : | ||
| Type | : Text | ||||
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
What 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. Ive 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.
More cool tech articles from other blogs.
