5 Replies Latest reply on Dec 1, 2011 10:54 AM by John Waller

    How to create a faded border?

    sds66

      Hi,

      Does anybody know how to create a subtle faded scrolling border like this website?

       

      http://www.farrow-ball.com/colours/paint/fcp-category/list?resetFilters=true

       

      I know it uses a repeating image for the background but I cannot figure out how to get the subtle shadow between this backgound and the website proper.

      Thank you in advance.

        • 1. Re: How to create a faded border?
          Nancy OShea Adobe Community Professional & MVP

          Sorry.  I must be suffering from brain freeze this AM because I don't know what you're asking.

           

          "subtle faded scroll"???

           

          Here is the background image used on that page.  It's defined in the CSS background-image properties and it repeats vertically and horizontally to fill the viewport.

          http://us.farrow-ball.com/pws/images/px_background.jpg

           

          Within the body, there is a #wrapper division to which CSS background-colors and CSS box-shadows have been applied.

           

          Does any of this help?

           

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          http://twitter.com/altweb

          • 2. Re: How to create a faded border?
            John Waller Adobe Community Professional & MVP

            but I cannot figure out how to get the subtle shadow between this backgound and the website proper.

             

            The drop shadow?

             

            http://www.farrow-ball.com/pws/style/global.css

             

            Applying this background image

            http://www.farrow-ball.com/pws/images/bg_main_dropshadow.png

             

            to the #wrapper rule in the CSS

             

            #wrapper {

                 margin:0 auto;

                 position:relative;

                 width:1014px;

                 padding:0;

                 z-index:0;

                 background:url('/pws/images/bg_main_dropshadow.png');

            }

            • 3. Re: How to create a faded border?
              sds66 Level 1

              Hi,

              I am sorry but I am not fully competent in CSS yet.

               

              Is #wrapper a recognised command or one that has simply been used by this website?

              From the following drop down options, which would I use?

              Thank you.

               

              screenshot-I.jpg

              • 4. Re: How to create a faded border?
                bemdesign Level 4

                #wrapper is a CSS call to a specific DIV tag in the HTML code with an ID of "wrapper" (i.e.<div id="wrapper"> in the HTML code).

                 

                In a very simplified way of describing what's happening - when the browser hits this website it first loads the HTML structure, it then reads through the CSS (global.css) and applies the styles specified there to the appropriate HTML tags and tells the browser to render the page. As noted by John previously, #wrapper is CSS code that tells the browser to render <div id="wrapper"> the following way:

                 

                #wrapper {

                     margin:0 auto;

                     position:relative;

                     width:1014px;

                     padding:0;

                     z-index:0;

                     background:url('/pws/images/bg_main_dropshadow.png');

                }

                 

                In human speak - the code above is telling the browser to: "Render the HTML tag <div id="wrapper"> centered in the middle of the browser window, position relative to the body, as wide as 1014 pixels, no padding, no z-index, with the background image located at /pws/images/bg_main_dropshadow.png, and since we didn't specify anything else for that background image, default to repeating it across the x and y axis with no default background color."

                • 5. Re: How to create a faded border?
                  John Waller Adobe Community Professional & MVP

                  Is #wrapper a recognised command or one that has simply been used by this website?

                  From the following drop down options, which would I use?

                  Thank you.

                   

                  screenshot-I.jpg

                   

                  #wrapper is a CSS rule written by the author of the website.

                   

                  I find it much quicker and easier to write CSS by hand in DW Code View than to use the DW New CSS Rule dialogue box.

                   

                  In the screenshot above, you would choose Selector Type: ID, then type in #wrapper for Selector Name then select your options on the next screen.

                   

                  Use an external, linked stylesheet wherever possible.