Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to : Div box shadow with image

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #34210
    tnguru
    Member

    How to make a css div box corner shadow like this image..

    Here is the image:

    http://i51.tinypic.com/vfv51h.png

    help me to do the page like that image.

    if u need psd file let me know!

    #86314
    tnguru
    Member

    Hi i already searched somany times with google anyway thanks for your sugessions.
    pls have a look at the image i posted above. i don’t need to make a shadow, i need background images to make shadows.
    i just tryed the codes like this

    body{
    margin:30px auto;
    padding:0;
    color:#333;
    background:#e8e8e8;
    }
    #box{
    margin:0 auto;
    padding:0;
    background:#fff;
    width:920px;
    overflow: hidden;
    position: relative;
    }
    #box-outer{
    margin:0 auto;
    padding:0;
    background:transparent;
    background-image: url(‘top-shadow.png’), url(‘bottom-shadow.png’);
    background-repeat: no-repeat;
    background-position: left top, right bottom;
    width:940px;
    position: relative;
    }

    #86316
    tnguru
    Member

    i mean using css it’s not works with all browsers.. that’s why like to create with image.

    #86397
    kalps1982
    Member

    when you say all browser i am sure you mean IE’s, all other latest browsers. For IEs you can try with http://css3pie.com/

    If still that doesnt solve your problem, try using blending options in Photoshop to drop shadow. :)

    #86475
    tnguru
    Member

    now i got the solution.. here is the css code

    body{
    background:#e8e8e8;
    color:#444;
    font: 12px “Helvetica Neue”, Helvetica, Arial, sans-serif;
    margin:25px auto;
    padding:0;
    }
    #wraper{
    width:960px;
    margin:0 auto;
    padding:0;
    position:relative;
    display: table;
    background-image: url(‘top-left.png’), url(‘bottom-right.png’);
    background-repeat: no-repeat;
    background-position: left top, right bottom;
    }
    #container{
    background:#fff;
    width:940px;
    margin:8px 8px 12px 12px;
    padding:0;
    min-height:700px;
    border:1px solid #e1e1e1;
    }

    and here is the html code

    the solution is :

    i just used outer div display is table..

    but it’s not works with ie6,ie7,ie8
    works with ie9,mozilla 3+, safari 4+, opera 10+

    anyway i hope most of users are browse with latest browser..

    thanks all :(

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.