Cool box shadow effects on responsive slider

[cotaylo]

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!

[cehwitham]

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

[ntety]

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

[ntety]

Where does the HTML code go?

 

finallyourwedding.com

 

Thanks

[cehwitham]

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

[ntety]

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!

[cehwitham]

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

[ntety]

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);
}

[cehwitham]

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

[ntety]

That did it! You guys are awesome...

Cheers!

[cehwitham]

No problem, pleased I was able to help you.

---

Twitter: cehwitham Web: cehwitham.com

[Author]

Posts