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 6 of 6
  1. #1
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Hi there,

    Are there any CSS experts who could tell me how I can create a drop shadow using CSS on my page template (See example attached).

    Currently the background is black. See here: www.circus11.com/wordpress

    Thanks in advance!!

    Here is the CSS code:

    Code:
    /* =Structure
    ----------------------------------------------- */
    
    body {
        padding: 0 3.8%;
    }
    #header {
        margin: 0 35px 28px;
    }
    #container {
        clear: both;
        margin: 0 auto;
        background-color: #fff
    
    }
    #content-container {
        width: 100%;
    }
    #main-sidebars {
        max-width: 450px;
        width: 45.5%;
    }
    #feature {
        width: 100%;
    }
    #primary,
    #secondary {
        overflow: hidden;
    }
    #footer {
        clear: both;
        width: 100%;
    }
    
    /* 2-column layouts */
    .two-column #container {
        max-width: 770px;
    }
    .two-column #content {
        width: 64.99%;
    }
    .two-column #primary,
    .two-column #secondary {
        float: right;
        width: 30.4%;
    }
    
    /* 3-column layouts */
    .three-column #container {
        max-width: 990px;
    }
    .three-column #content {
        width: 50.5%;
    }
    .three-column #primary {
        width: 50.15%;
    }
    .three-column #secondary {
        width: 39.89%;
    }
    
    /* Content-Sidebar layouts */
    .content-sidebar #content-container {
        float: left;
        margin: 0 -30.4% 0 0;
    }
    .content-sidebar #content {
        margin: 0 35.1% 0 0;
    }
    .content-sidebar #primary,
    .content-sidebar #secondary {
        float: right;
    }
    .content-sidebar #secondary {
        clear: right;
    }
    
    /* Sidebar-Content layouts */
    .sidebar-content #content-container {
        float: right;
        margin: 0 0 0 -30.4%;
    }
    .sidebar-content #content {
        margin: 0 0 0 35.1%;
    }
    .sidebar-content #primary,
    .sidebar-content #secondary {
        float: left;
    }
    .sidebar-content #secondary {
        clear: left;
    }
    
    /* Content-Sidebar-Sidebar layouts */
    .content-sidebar-sidebar #content-container {
        float: left;
        margin: 0 -45.5% 0 0;
    }
    .content-sidebar-sidebar #content {
        margin: 0 49.5% 0 0;
    }
    .content-sidebar-sidebar #main-sidebars {
        float: right;
    }
    .content-sidebar-sidebar #feature,
    .content-sidebar-sidebar #primary,
    .content-sidebar-sidebar #secondary {
        float: left;
    }
    .content-sidebar-sidebar #secondary {
        margin: 0 0 0 9.88%;
    }
    
    /* Sidebar-Sidebar-Content layouts */
    .sidebar-sidebar-content #content-container {
        float: right;
        margin: 0 0 0 -45.5%;
    }
    .sidebar-sidebar-content #content {
        margin: 0 0 0 49.5%;
    }
    .sidebar-sidebar-content #feature,
    .sidebar-sidebar-content #primary,
    .sidebar-sidebar-content #secondary {
        float: left;
    }
    .sidebar-sidebar-content #secondary {
        margin: 0 0 0 9.88%;
    }
    
    /* Sidebar-Content-Sidebar layouts */
    .sidebar-content-sidebar #content-container {
        float: left;
    }
    .sidebar-content-sidebar #content {
        margin: 0 24.8%;
    }
    .sidebar-content-sidebar #primary,
    .sidebar-content-sidebar #secondary {
        width: 20.69%;
    }
    .sidebar-content-sidebar #primary {
        float: left;
        margin: 0 0 0 -100%;
    }
    .sidebar-content-sidebar #secondary {
        float: right;
        margin: 0 0 0 -20.7%;
    }
    
    /* Full width content with no sidebar; used for attachment pages */
    .full-width #content,
    .single-attachment #content {
        margin: 0 auto;
        width: 100%;
    }
    
    /* Alignment */
    .alignleft {
        display: inline;
        float: left;
        margin-right: 11px;
    }
    .alignright {
        display: inline;
        float: right;
        margin-left: 11px;
    }
    .aligncenter {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    From my research, the only convenient one is to use the text-shadow property. It will look like this: text-shadow:1px 2px 3px #a24c23. Those four things mean, in this order: the horizontal offset, the vertical offset, the blur radius, and then the color. You can string the shadow on by another set of 4 on there, like such: text-shadow:3px 1px 2px #999 1px 2px 1px #CF0.

    This effect works in IE9+, firefox, google chrome, not sure about Opera. There are other techniques to doing this (google it), but this is the most convenient. It stinks that IE wouldn't take this property before version 9.
    Oliver likes this.

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Are you looking for a shadow on the text, or the main content div?

    If you're looking to put a drop shadow on the div, use box-shadow. Text shadow for text.
    Oliver likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Thank you both for your advice. I am looking to put shadow on the div so will use box-shadow.

    Although I've read that it isn't compatible with IE, which is annoying.

  6. #5
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by Oliver, post: 223163
    Thank you both for your advice. I am looking to put shadow on the div so will use box-shadow.

    Although I've read that it isn't compatible with IE, which is annoying.
    Both of them are correct. And you are correct with the Incompatibility with the shadow tags. IE has issues with css3 which is annoying. Hence why it is a good idea putting a "You have Internet Explorer, get Chrome or Firefox" message when the user access's your site. I do that often for my site designs.
    Oliver likes this.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Oliver, post: 223163
    Thank you both for your advice. I am looking to put shadow on the div so will use box-shadow.

    Although I've read that it isn't compatible with IE, which is annoying.
    Try CSS3 PIE.
    m3n0tu18 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


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 07:54 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com