#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Sacramento, CA
    Posts
    3
    Rep Power
    0

    How to make div with fading shade at top


    Does anyone know any straightforward CSS to produce a div with thin border and fading shade at the top?

    I want my div to look just like the ones on the cnbc dot com stock market news website.

    Notice the boxes with "Markets" and "Top News and Analysis". I want my boxes exactly like those. The CSS on this actual page is extremely complex though. So I am looking for a simpler solution.
  2. #2
  3. Administrator
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    47
    Rep Power
    10
    Code:
    <!DOCTYPE HTML>
    <head>
    <style type="text/css">
    div {
          /*Gradient*/
          border-top:1px solid #3B97B8;
          background: rgb(61,105,130); /* Old browsers */
          background: -moz-linear-gradient(top, rgba(61,105,130,1) 0%, rgba(18,35,48,1) 100%); /* FF3.6+ */
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(61,105,130,1)), color-stop(100%,rgba(18,35,48,1))); /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(top, rgba(61,105,130,1) 0%,rgba(18,35,48,1) 100%); /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(top, rgba(61,105,130,1) 0%,rgba(18,35,48,1) 100%); /* Opera 11.10+ */
          background: -ms-linear-gradient(top, rgba(61,105,130,1) 0%,rgba(18,35,48,1) 100%); /* IE10+ */
          background: linear-gradient(to bottom, rgba(61,105,130,1) 0%,rgba(18,35,48,1) 100%); /* W3C */
          /*end Gradient*/
    
          color:white;
          margin: 0 auto;
          text-align:center;
          padding: 100px 0 100px 0;
        }
    </style>
    </head>
    <html>
    <body>
    <div>
      This is a Gradient. Use Responsibly.
    </div>
    </body>
    </html>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Sacramento, CA
    Posts
    3
    Rep Power
    0

    Div with shade at top


    Thanks for tying to help me Paul but your solution is not quite what I am looking for. If you look on the CNBC.com website you will see the div's I am talking about. They are content boxes and have white back ground, with a grayish shade at the top and very thin borders. An Example is where it says "Top News and Analysis".
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    830
    Rep Power
    275
    I edited Paul-Ninja's code to be more like what you are wanting.
    See it HERE.

    You should be able to "finish it" to your liking.
    Last edited by DonR; April 18th, 2013 at 05:29 PM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Sacramento, CA
    Posts
    3
    Rep Power
    0
    thats it...thank you

IMN logo majestic logo threadwatch logo seochat tools logo