Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Location
    Sacramento, CA, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make div with fading shade at top CSS

    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 http://www.cnbc.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.

    Reply With Quote

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    That fading background isn't made with css, it's just an image. Ie, Photoshop, etc.

    Dave

  • #3
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Either I'm looking at the wrong thing or tracknut is. The CSS is very simple actually. In fact, there is a tool you can use to create CSS gradients that I use all the time.

    http://www.colorzilla.com/gradient-editor/

    Just create the effect you want, and pop it in your CSS file for whatever element, id, class, etc. that you want to change.
    My signature :)

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Location
    Sacramento, CA, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay just to be clear. If you go to the CNBC.COM website. You will see a box that says "Top News and Analysis". I want to make a box just like that one. It has a white background, a very thin border around it, and a the top of the box where the title is, it has a bit of a shade behind the title.

    I was able to take the CSS files from this site and produce the same box. But I dont want all of the complexity and verboseness that came along with this file. So I am trying to get just the CSS needed to produce this.

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    Sorry, it was me looking at the wrong area. As ttkim says, it's a very simple -moz-linear-gradient. Do you have the firebug plugin for Firefox? Makes it very easy to see the html and css associated with anyone's site, so you don't have to wade through it all.

    Dave

  • #6
    New to the CF scene
    Join Date
    Apr 2013
    Location
    Sacramento, CA, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks I will give firebug a look


  •  

    Posting Permissions

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