SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Filters? Yes or no?

    I am thinking if i should devote some time to learn the IE only filters.
    I know they are supported only by IE, but IE now is over 90%, and some of those filters seem quite neat.

    What are the advantages and disadvantages of using these filters?

    some more points:
    1)I don't care about NS4.
    2)Having a site that is 100% valid according to W3C is nice, but not the main purpose.

  2. #2
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Re: Filters? Yes or no?

    While it's nice eyecandy, they are still just that - eyecandy. No real point in using them.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  3. #3
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe opacity can be nice for single-image rollovers, and combined with -moz-opacity for crossbrowser coding.

    Quentin

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice eyecandy, indeed

    BTW, does anyone know how I can fix the angle for the "titlebar" gradient in this extremely useful rotating window example?
    Code:
    <html xmlns:v="urn:schemas-microsoft-com:vml">
      <head>
        <style>
          v\:* 
          { 
            behavior: url(#default#VML); 
          }
        </style>
        <script language="javascript">
          function rotate() 
          {
            var s = new Date().getSeconds();
            win.style.rotation = 6 * s;
            setTimeout('rotate()', 1000);
          }
        </script>
      </head>
      <body onload="rotate();">
        <v:group id="win" coordsize="200 200" style="position:absolute;left:100;top:100;width:200;height:200;">
          <v:rect style="position:absolute;left:0;top:0;width:200;height:200;" fillcolor="#d4d0c8" stroked="false"/>
          <v:line from="1,1" to="1,198" strokecolor="#ffffff"/>
          <v:line from="1,1" to="198,1" strokecolor="#ffffff"/>
          <v:line from="4,26" to="4,194" strokecolor="#808080"/>
          <v:line from="4,26" to="195,26" strokecolor="#808080"/>
          <v:line from="5,27" to="5,193" strokecolor="#404040"/>
          <v:line from="5,27" to="194,27" strokecolor="#404040"/>
          <v:line from="5,195" to="195,195" strokecolor="#ffffff"/>
          <v:line from="195,27" to="195,195" strokecolor="#ffffff"/>
          <v:line from="2,198" to="198,198" strokecolor="#808080"/>
          <v:line from="198,2" to="198,198" strokecolor="#808080"/>
          <v:line from="1,199" to="199,199" strokecolor="#404040"/>
          <v:line from="199,1" to="199,199" strokecolor="#404040"/>
          <v:rect style="position:absolute;left:4;top:4;width:192;height:16;" stroked="false">
            <v:fill id="titlebar" type="gradient" color="#0a246a" color2="#a5caf0" angle="270degr"/>
          </v:rect>
          <v:rect style="position:absolute;left:6;top:28;width:188;height:166;" fillcolor="#ffffe1" stroked="false">
          </v:rect>
        </v:group>
      </body>
    </html>

  5. #5
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    MerdÚ!
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  6. #6
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main reason i want to use filters now is to be able to have some menu divs appear gradually using the opacity filter.
    I wouldn't use a filter if the same effect can be achieved in another way, even if that way will mean some more kb (not a ton more though), but I am not aware of any other way to achieve that effect.

    What are the best or more useful filters? Some examples? Maybe this will help me chooce if its worth using them or not.

  7. #7
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think the IE only / non-standard css filters are intrinsically no good. Happens often that you work on an intranet solution where everyone uses IE6, and why shouldn't you use the tools you can use then?

    OK, there's no logic in that; replace an animation with matrix transformation etc - in the intranet environment you don't care about donwload time anyway...
    (Maybe it's only because it's fun we use them?)

    If you want the opacity effect on a menu div that S7even mention, then a filter is the only method I know about that can do it



    In my silly example above, I had been working too long trying to get the gradient to behave correctly, didn't notice that I wasn't using DXImageTransform.Microsoft.Gradient anymore...

    How these effects work can be difficult to understand sometimes, try to select the vertically flipped text to the right in this page for example ("Page designed and maintained ...")
    http://webfx.eae.net/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •