10 Replies Latest reply on Dec 2, 2010 11:48 AM by pziecina

    Adding Transparencies and Gradients With CSS

    BenPleysier Adobe Community Professional & MVP

      The way colors are handled in your web designs is about to change. I've been playing around with hexadecimal color values since I was a wee web-babe (80 years ago ); well get ready to to grow up fast. CSS3 has arrived, and your palette is about to get a whole lot bigger.

       

      Compared to what’s coming, it’s as though designers have been color-blind, working with only a small part of the chromatic spectrum. No, new hues will not be added to the rainbow.

       

      What will happen is that color values will be defined in new ways, the entire spectrum of opacity levels will be added and gradients based on pure CSS rather than images will be thrown in, too.

       

      Some forward-thinking websites, such as the impressive 24 Ways to Impress Your Friends, are already playing around with RGBa for text and background color effects—and the results are great.

       

      Read it at the external site or try the widget found here

       

      Gramps

        • 1. Re: Adding Transparencies and Gradients With CSS
          Nancy OShea Adobe Community Professional & MVP

          These are really fun to play with.  But so far, level 3 gradients are only supported in WebKit & modern Mozilla.   IE filters don't produce the same results and can actually hinder web page performance.

           

          Without widespread support from the other browser engines (Opera and IE), I don't see this being used much except on experimental sites.

           

          Perhaps Google's vision of a web-based browser system like the Chrome frame plug-in for IE might help bridge the gap by providing standards-based support for HTML5 and CSS3.  We'll see if it catches on.

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb

          • 2. Re: Adding Transparencies and Gradients With CSS
            MurraySummers Level 8

            Yep - I figure I'm going to have to learn all this stuff in a couple years at the earliest....

            • 3. Re: Adding Transparencies and Gradients With CSS
              pziecina Adobe Community Professional

              Hi

               

              As someone who has been advocating the use of IEFilters and CSS3 for a while now, I for one agree that the use of these more modern additions, (although IEFilters have been around since 98, 96 if you count the handful that were in IE4) to the designers/developers tool-kit can greatly improve the look and feel of a web page.

               

              Unfortunately unless people are willing to put a little more thought into their designs, and stop simply following others or using template designs, then the uptake will be very slow.

               

              IEFilters developed there reputation for being slow when they where first widely introduced in IE5, (circa 98). But most forget that the average computer then was 100Mhz, (not Ghz, and multi-core was not even heard of) and a high speed, (home) internet connection was 56Kb/sec. It is also worth noting that JavaScript was at that time regarded as too slow and a security risk, (I wonder how many think this now?).

               

              The other problem is that IEFilters 'disable' IE's cleartype, but this can be enabled again with a little thought via the css code, which is again unfortunately 'too-much-trouble' for most.

               

              See also - http://cookbooks.adobe.com/authors/Paula+Ziecina.

               

              PZ

              • 4. Re: Adding Transparencies and Gradients With CSS
                MurraySummers Level 8

                I submit that the problem is not with the uptake of this technology by the development community.  It's simply one of reliable browser support.

                • 5. Re: Adding Transparencies and Gradients With CSS
                  pziecina Adobe Community Professional

                  It's simply one of reliable browser support.

                   

                  Is this not like saying that, because 40% of Mobile/Cell phones do not support 3G/Apps/Web browsing, then these should not be used?

                   

                  Maybe if more people did design/develop using these techniques then the uptake of more modern browsers that do support them would improve.

                   

                  Browsers that do support CSS3 or IEFilters that use the -ms- extension, (for validation) = 73%, and if you are not worried about css validation and support IE6/7 this rises to 92%.

                   

                   

                   

                  PZ

                  • 6. Re: Adding Transparencies and Gradients With CSS
                    MurraySummers Level 8

                    I believe you should choose your usages to match the capabilities of your target demographic.  That's all....

                    • 8. Re: Adding Transparencies and Gradients With CSS
                      pziecina Adobe Community Professional

                      Hi Gramps, (and anyone else)

                       

                      What do you think, should we advocate more usage of CSS3, (and IEFilters where appropriate) or not?

                       

                      My position is the following -

                      • Web design itself has not progressed much past the end of the 90's, the code has improved and now mainly complies to web standards, (though not always unfortunately) but the overall visual design itself remains the same.
                      • If we do not use improved methods to give the user a better visual experience, then there is no reason for them to upgrade to a better browsers, (similar to my mobile/cell phone comparison).
                      • CSS is very forgiving when it comes to using CSS3 and IEFilters, in that if the browser does not support the rule, it simply ignores it, no error warnings, nothing, so why not use them.
                      • The problems of using these rules is not one of a lack of support. if you have a problem or question you can post them on forums such as this, there is also an abundance of sites and books demonstrating the use, and speed of rendering is no longer the problem.
                      • The majority of users would be able to see the improvements, so do we design for the lowest possible browser support or not.

                       

                      PZ

                      • 9. Re: Adding Transparencies and Gradients With CSS
                        Nancy OShea Adobe Community Professional & MVP

                        Paula,

                        I don't think this is an all or nothing proposition.  Like you, I'm very keen to use new technologies whenever possible. It really depends on the project. Most clients want their sites to work and display the same way in ALL browsers.  If you can't meet that requirement with whatever technology you use, your client isn't going to be satisfied.  CSS gradients don't fit this requirement.  That said, I have no qualms about using border-radius, text / box-shadow or opacity as those properties have much wider browser support.

                         

                         

                         

                        Nancy O.
                        Alt-Web Design & Publishing
                        Web | Graphics | Print | Media  Specialists
                        http://alt-web.com/
                        http://twitter.com/altweb

                        • 10. Re: Adding Transparencies and Gradients With CSS
                          pziecina Adobe Community Professional

                          Hi Nancy

                           

                          Thank you for replying, and believe me I do agree with you when you say, "it is not an all or nothing proposition", and understand Murrays comment -

                          I believe you should choose your usages to match the capabilities of your target demographic.

                           

                          I’m not naive enough to ignore the fact that most of us have bosses or customers who dictate what we can and can’t do. But this problem of using features that are not supported by all browsers is one I have only encountered in the last 12 months, (the time I have been semi-retired) when I have started to work on smaller-medium sized projects, (before that it was mainly for large multi-nationals, who view progressive enhancements as a must).

                           

                          But if we’re to move the web forward for all users and clients, not just those with the large budgets to pay for the development, should we not be thinking different, challenging conventions and at the same time clearing up popular misconceptions like - "A web site should look the same in all browsers". It is in this that I think the more widespread use of CSS3 and IEFilters would benefit many sites as the cost in doing so is minimal.

                          Earlier that year, Steve Champeon (who co-founded the Web Standards Project) wrote -
                          “Progressive enhancement is an approach to web design that builds documents for the least capable devices first, then moves on to enhance those documents… [to] allow a richer experience for those users with modern graphical browser software.”

                           

                           

                          The use is of course dependant upon the situation and more importantly it must improve the users experience, especially the visual. After all no one wishes to see a page where, gradients, text-shadow or opacity is used without thought or consideration for the appropriateness of the use.

                           

                          As for clients insisting upon the design being the same, I have found that the way one phrases the question often decides the answer. So instead of asking "Should the site look the same in all browsers", would it not be better to ask if, "Improvements for users that use the more advanced browsers should be taken advantage of".

                           

                          Paula