23 Replies Latest reply on May 6, 2010 9:52 AM by Igorbuitendijk

    how to apply gradients in Dw CS4?

    Igorbuitendijk

      Hello;

      I have been using gradients in Flash CS4.It's not that difficult,using the radial and lineair gradients.

      However in Dreamweaver I can't find such a feature.For my knowledge it is only possible to use straight colors.

      Does anyone know how to use gradients in Dreamweaver??

      Many thanks for the help!

        • 1. Re: how to apply gradients in Dw CS4?
          John Waller Adobe Community Professional & MVP

          Dreamweaver is not an image editor.

           

          It uses HTML and CSS to insert colours in pages. HTML and CSS only do solid colors.

           

          If you need gradients, you must create them in an image editor such as Photoshop or Fireworks then insert the image into your webpage in DW using CSS.

          • 2. Re: how to apply gradients in Dw CS4?
            Igorbuitendijk Level 1

            Okey,I will give it a try,thanks for the answer!

            • 3. Re: how to apply gradients in Dw CS4?
              Igorbuitendijk Level 1

              Sorry,one more question:

              Can you give me an example of the css code to insert  the image in DW or do I just have to use the global toolbar and insert the image using the image-button?(the button you use for inserting images??)

              • 4. Re: how to apply gradients in Dw CS4?
                pziecina Level 6

                Hi

                 

                You can apply background gradients using css that will work in 95% of browsers, see - http://www.pziecina.com/design/turorial_demos/background_gradients.php.

                 

                PZ

                • 5. Re: how to apply gradients in Dw CS4?
                  Igorbuitendijk Level 1

                  Hello;I have taken a look at the link you sent me and inserted the IE part in my CSS code,however with no result.

                  This is how the code looks:

                  #container {

                   position:relative;

                   left:25%;

                   top:53px;

                   width:50%;

                   height:100%;

                   z-index:3;

                   filter: Gradient(gradientType=0,startColorStr=#ff00ff,endColorStr=#00ff99);

                  }

                  I know I did something wrong,but what??Is it the wrong place I inserted the code??

                  Many thanks for your help PZ!!

                   

                   

                  • 6. Re: how to apply gradients in Dw CS4?
                    pziecina Level 6

                    Hi

                     

                    The filter code you are using only applies to IE6/7, so will not show in IE8.

                    Replace your code for the filter with -

                    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ff00ff,endColorStr=#00ff99)"; 

                     

                    PZ

                    • 7. Re: how to apply gradients in Dw CS4?
                      Igorbuitendijk Level 1

                      Hello;

                      Tried it,but still no result.

                      This is what I have done:

                      #container {

                       position:relative;

                       left:25%;

                       top:53px;

                       width:50%;

                       height:100%;

                       z-index:3;

                          ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ff00ff,endColor Str=#00ff99)";

                       font-size: large;

                      }

                      Exactly the code you gave me,still nothing(??)

                      • 8. Re: how to apply gradients in Dw CS4?
                        John Waller Adobe Community Professional & MVP

                        Got a link to your page so we can see what's happening?

                        • 9. Re: how to apply gradients in Dw CS4?
                          Igorbuitendijk Level 1

                          Hello;the url is www.toetsing.info

                          This is where I inserted the code:

                          #container {

                           position:relative;

                           left:25%;

                           top:53px;

                           width:50%;

                           height:100%;

                           z-index:3;

                           ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ff00ff,endColor Str=#00ff99)";

                           font-size: large;

                          Because my original background color is gone,it got the color of the left and right side(dark grey)

                          Many thanks for the help!

                          • 10. Re: how to apply gradients in Dw CS4?
                            pziecina Level 6

                            Hi

                             

                            In your filter deceleration you have missed the leading ' - ', it should read -ms-filter:

                             

                            PZ

                            • 13. Re: how to apply gradients in Dw CS4?
                              Igorbuitendijk Level 1

                              Hi;have done it,still no result.This is the code:

                              #container {

                               position:relative;

                               left:25%;

                               top:53px;

                               width:52%;

                               height:100%;

                               z-index:3;

                               -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ff00ff,endColor Str=#00ff99)";

                               font-size: large;

                               Is maybe the cause for this faillure that I have used an AP-div and transformed it into position:relative,instead of position absolute?It is in this div that I want to insert a gradient.(??)

                              • 14. Re: how to apply gradients in Dw CS4?
                                Igorbuitendijk Level 1

                                Hi;I have tried it now at another site I am designing and your code worked!

                                However in the design-mode in Dreamweaver it isn't visible,only on the web after uploading and the gradient doesn't cover the whole screen.

                                Do I have to make some adjustments for the gradient covering the entire screen??

                                Is it normal that it is invisible in the design-mode??

                                • 15. Re: how to apply gradients in Dw CS4?
                                  pziecina Level 6

                                  Hi

                                   

                                  Could it be that you have a background-color statement in the css of your site, below the filter, (this should be above the filter)?

                                   

                                  Also check that none of the other background colors are 'overlaying' the filter.

                                   

                                  PZ

                                  • 16. Re: how to apply gradients in Dw CS4?
                                    pziecina Level 6

                                    Hi

                                     

                                    Dreamweaver does not display filters, and you will have to apply the -moz- and -webkit- gradient statements for them to work in firefox and safari/chrome.

                                     

                                    To have the gradient apply to the entire screen apply them to the body, e.g. -

                                     

                                    body {
                                        background-color: #3366FF;
                                        background: -moz-linear-gradient(top, #0032CB, #3366FF);
                                        background: -webkit-gradient(linear, left top, left bottom,from(#0032CB), to(#3366FF));
                                        -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#0032CB,endColor Str=#3366FF)"; /* IE8 requires the -ms- and the " " quotes */
                                    }

                                     

                                    PZ

                                    • 17. Re: how to apply gradients in Dw CS4?
                                      Igorbuitendijk Level 1

                                      Hi,thanks for everything!

                                      It all works fine now.I was struggling why DW didn't display the filters and tried some other things.

                                      I have looked at your site at www.pziecina.com and read what you are doing  now and have done in the past.It's what I have in mind;being a full-time webdesigner,because it's fun to do.I have been studying now for three years and have taken notice of about almost all the techniques that are available.I also have studied 2 Dreamweaver learning books,but none of the 2 had the answer for a lay-out technique I am trying.

                                      Can I ask you for another advice concerning the last (pretty great)problem I have using Dreamweaver,by contacting through the contact form on your site or do I have to make a new post??

                                      thank you for your answer!

                                      • 18. Re: how to apply gradients in Dw CS4?
                                        pziecina Level 6

                                        Hi

                                         

                                        First thank you for looking at my site. The hardest part about being a web designer/developer is finding clients and keeping them, and my advice to anyone wishing to work in this profession is to also understand how a business works and how to get clients, (although the last one is one that will often depend on, "who you know", and is rarely, "what you know") that said never under-price or undervalue your skills.

                                         

                                        I would recommend posting the problem on this forum, as there is often more than one way to do something, and a post here will often offer solutions that one person may not have thought of doing or trying.

                                         

                                        PZ

                                        • 19. Re: how to apply gradients in Dw CS4?
                                          Igorbuitendijk Level 1

                                          Okey,thanks for the advice.

                                          I have posted this lay-out problem a couple of weeks ago on this forum,but the advice I got,using floats,wasn't something to put next to Dreamweaver and start drawing.

                                          I will try it again.

                                          • 20. Re: how to apply gradients in Dw CS4?
                                            pziecina Level 6

                                            Hi

                                             

                                            In answer to your positioning problem use % values for positioning everything, or if it is for magnification use ems. You may wish to look into how to create liquid layouts. The holistic section on my site is a semi-liquid layout, but restricted in min and max width so as to not 'distort' the header image.

                                             

                                            Absolute positioning is never a good idea though as they will display differently across all browsers, (20px in IE is not the same as 20px in Firefox, and don't even ask about the difference between mac and pc).

                                             

                                            PZ

                                            • 21. Re: how to apply gradients in Dw CS4?
                                              Igorbuitendijk Level 1

                                              Hello;

                                              Have tried it again,but again,after publishing,the divs are all in a very different place,compared with de Dreamweaver design-mode.

                                              I've used,like you adviced,% for positioning everything.

                                              In your previous message,youmentioned that you use whatever css based layout type you think is best suited for the design you want.But,once you have decided what kind of design you want,what method for making the layout do you choose(generally)??Of course in combination with DW

                                              • 22. Re: how to apply gradients in Dw CS4?
                                                pziecina Level 6

                                                Hi

                                                 

                                                Forget dreamweavers design mode when it comes to liquid layouts and using % values, as this is only an approximation at best, and way off at worst.

                                                 

                                                With 'unusual' designs and layouts, you have no option but to 'dig' into the code. Once you have decided how you wish your layout to look and specified how it should function as a whole, choose the layout that will best get you started from the starter layouts that come with dreamweaver, then as I said start changing things to get it to do what you want.

                                                 

                                                I know many people will say that the starter layouts are terrible, but they are starter layouts and not the finished article, and by definition 'starter' means just that: Something to get you started.

                                                 

                                                PZ

                                                • 23. Re: how to apply gradients in Dw CS4?
                                                  Igorbuitendijk Level 1

                                                  Hello;

                                                  I've started today just what you are saying:

                                                  From Dw started the "thrColLiqHdr" and started to customize to the way I wanted to look.Changed some colors and text,but for the last 6 hours struggling on 2 things:

                                                  I want to edit an extra colomn beneith the left colomn.

                                                  I thought the most easiest way is just to copy de first colomn code which is:

                                                  .thrColLiqHdr #sidebar1 {

                                                   float: left; 

                                                   width: 22%; 

                                                   background: #EBEBEB; 

                                                   padding: 15px 0;

                                                  }

                                                  and then past it beneith it to add another colomn,but,to good to be true of course,everyting got all messed up.

                                                  Do you perhaps know what other adjustments I have to make,to create another colomn on the place I want??