Cool box shadow effects on responsive slider

Community Forums Forums Design Tips and Tricks Cool box shadow effects on responsive slider

This topic is: not resolved

This topic contains 10 replies, has 3 voices, and was last updated by  cehwitham 1 year, 8 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #19146

    cotaylo
    Participant
    Post count: 29

    I’d really like to add a cool box shadow effect to my slider here: http://216.172.181.99/~cchs/

    I like the box shadows here (effect #7): http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

    The suggested code is:
    The HTML


    Effect 7

    The CSS

    .box h3{
    text-align:center;
    position:relative;
    top:80px;
    }
    .box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
    }
    /*==================================================
    * Effect 7
    * ===============================================*/
    .effect7
    {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    .effect7:before, .effect7:after
    {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
    }
    .effect7:after
    {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
    }

    However, I’m not really sure where to put it or if it will mesh with the existing genesis code.
    Anyone want to hold my hand and help me figure out how to do it? Pretty Please. :)

    Thanks!

    #22070

    cehwitham
    Participant
    Post count: 396

    All the CSS needs adding to your style.css file. In /wp-content/themes/[child-theme]/

    I’d use #genesis-responsive-slider instead of .effect-7

    Ignore the .box h3 and .box styles, just add the following to the .effect-7 styles:

    margin:40px auto;


    Twitter: cehwitham Web: cehwitham.com

    #22300

    ntety
    Participant
    Post count: 23

    Should the changes be made via the cPanel or is it okay to make them on the wordpress side of things? Thanks!

    #22332

    ntety
    Participant
    Post count: 23

    Where does the HTML code go?

     

    finallyourwedding.com

     

    Thanks

    #22784

    cehwitham
    Participant
    Post count: 396

    You can use the Editor within WordPress to make changes to style.css or you rcan edit this file through FTP.


    Twitter: cehwitham Web: cehwitham.com

    #22786

    ntety
    Participant
    Post count: 23

    Thanks for your response. I asked because there was an HTML code section AND a CSS code section. I thought I had to implement them each. I want to use shadow effect 7. I copied and pasted the CSS code within the wordpress editor but nothing changed with my slider. How do I call the change to the slider?

    Thanks again!

    #22795

    cehwitham
    Participant
    Post count: 396

    Did you change the selectors you were using as I suggested?

    Once you’ve saved the code in the editor you should just have to refresh your website in the browser to see the changes.


    Twitter: cehwitham Web: cehwitham.com

    #22803

    ntety
    Participant
    Post count: 23

    Below is what I’ve gathered from the above and placed in the CSS file. I’m getting strange results:

    http://www.finallyourwedding.com

    #genesis-responsive-slider
    {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    #genesis-responsive-slider:before, #genesis-responsive-slider:after
    {
    content:””;
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
    margin:40px auto;
    }
    #genesis-responsive-slider:after
    {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
    }

    #22878

    cehwitham
    Participant
    Post count: 396

    Remove all the styling that is currently there and add the following to style.css:

    #genesis-responsive-slider
    {
    height:450px;
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    #genesis-responsive-slider:before, #genesis-responsive-slider:after
    {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
    }
    #genesis-responsive-slider:after
    {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
    }

    Chris


    Twitter: cehwitham Web: cehwitham.com

    #22906

    ntety
    Participant
    Post count: 23

    That did it! You guys are awesome…

    Cheers!

    #22915

    cehwitham
    Participant
    Post count: 396

    No problem, pleased I was able to help you.


    Twitter: cehwitham Web: cehwitham.com

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.