Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member whippetkid's Avatar
    Join Date
    May 2010
    Location
    Scotland
    Posts
    123
    Member #
    22044
    Hi

    I am trying to create a drop shadow effect on the outside of a website to give it a bit of depth, I have attached a CSS style sheet but still no luck. I think it is to do with the left/right sidebars but being a newbie I don't know how to delete them without losing the whole structure of the layout. Here is the code:


    HTML Code:
    <style>
    body {
    text-align: center;
    background-color: #CCC;
    }
    html, body {
    margin: 0px;
    padding: 0px;
    }
    #wrapper {
    background-color: #FFF;
    width: 1120px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    text-align: left;
    position: relative;
    margin-left: auto;
    }
    #header {
    width: 900px;
    background-color: #004450;
    position: relative;
    padding-top: 20px;
    height: 300px;
    margin-top: 20px;
    color: #FFF;
    font-size: xx-large;
    text-align: center;
    }
    #transparency {
    filter: alpha(opacity=70);
    opacity: 0.70;
    background-color:#EEE;
    width: 900px;
    height: 50px;
    position: absolute;
    font-size: xx-large;
    text-align: center;
    top: 290px;
    left: 110px;
    }
    
    #slideshow {
    height: 400px;
    width: 900px;
    background-color: #8f918f;
    font-size: xx-large;
    color: #FFF;
    text-align: center;
    }
    #maincontent {
    height: 585px;
    width: 900px;
    background-color: #;
    floadt: left;
    padding-top: 10px;
    color: #FFF;
    font-size: xx-large;
    }
    #leftsidebar {
    height: 1000px;
    width: 100px;
    float: left;
    padding-right: 10px;
    }
    #rightsidebar {
    height: 1000px;
    width: 100px;
    float: right;
    padding-left: 10px;
    }
    #contentwrapper {float: left;}
    
    #mc_left {
    float: left;
    width: 590px;
    background: #004450;
    height: 550px;
    position: absolute;
    color: #FFF;
    font-size: xx-large;
    text-align: center;
    }
    #mc_right {
    float: right;
    width: 300px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #FFF;
    height: 550px;
    background-color: #0d133c;
    color: #FFF;
    font-size: xx-large;
    position: absolute;
    left: 710px;
    text-align: center;
    }
    #footer {
    height: 100px;
    width: 900px;
    background-color: #004489;
    margin-top: 560px;
    margin-bottom: 20px;
    text-align: center;
    }
    .clearfix {clear; both;}
    
    .style2 {color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding-left: 10px;
    }
    h1,h2,h3,h4,h5,h6 {
    font-family: Verdana, Geneva, sans-serif;
    }
    h1 {
    font-size: 20px;
    color: #F00;
    margin-left: 10px;
    }
    a:link {
    color: #FFF;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #FFF;
    }
    a:hover {
    text-decoration: none;
    color: #F00;
    }
    a:active {
    text-decoration: none;
    color: #FFF;
    }
    h2 {
    font-size: 14px;
    color: #FFF;
    padding-left: 10px;
    }
    h3 {
    font-size: 11px;
    color: #FFF;
    padding-left: 10px;
    }
    </style>
    <link href="layout.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="shadow">
    <div id="wrapper">
    <div id="leftsidebar"></div>
    <div id="contentwrapper">
    <div id="header">Header</div>
    <div id="transparency"> home | services | about | contact</div>
    <div id="mainnav"></div>
    <div id="slideshow">Flash Slideshow</div>
    <div id="maincontent">
    <div id="mc_left">Text</div>
    <div id="mc_right">Text</div>
    <div id="footer">Footer</div>
    <div class="clearfix"></div>
    </div>
    </div> 
    <div id="rightsidebar"></div>
    </div>
    </div>
    </body>
    </html> 
    
    and style sheet:
    
    
    #shadow {
    width: 940px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(drop-shadow.jpg);
    background-repeat: repeat-y;
    }




    Many thanks

  2.  

  3. #2
    Junior Member BroLip's Avatar
    Join Date
    Nov 2010
    Location
    Richmond, Virginia
    Posts
    16
    Member #
    25023
    Liked
    1 times
    Instead of the "drop-shadow.jpg" try a transparent PNG. It will preserve the transparency.

  4. #3
    Member
    Join Date
    Dec 2010
    Location
    Birmingham
    Posts
    52
    Member #
    25366
    not quite the answer to your question, but have you looked at doing shadows with css3? theyre very easy and look great. just use the markup:

    -moz-box-shadow: Xpx Ypx Spx rgba(R,G,B,A);
    -webkit-box-shadow: Xpx Ypx Spx rgba(R,G,B,A);
    box-shadow: Xpx Ypx Spx rgba(R,G,B,A);

    where X is the orientation of the shadow on the x axis, Y is the orientation on the y axis, S is the size of the shadow, R G and B are values between 0 and 255 representing red green and blue, and A is the alpha level between 0 and 1 (1 being opaque)

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    you start with a positioned parent div with two sibling divs. on the shadow div, use position: absolute; width: 100%; height: 100%; top: 8px; left: 8px; z-ndex: 5; then you need another div for the content to lay over the shadow with position: relative; z-index: 6; and whatever other styles you want for the content. you can view an example on my website. i use code for shadows on most things. renders faster then an image with ease of edit for later changes to the work. feel free to cut and paste any code you need, just please don't reuse any images. Next week i will add a tutorial on my site for css shadowing.

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com