Community Forums › Forums › Archived Forums › Design Tips and Tricks › Cool box shadow effects on responsive slider
- This topic has 10 replies, 3 voices, and was last updated 10 years, 7 months ago by
cehwitham.
-
AuthorPosts
-
February 8, 2013 at 9:01 pm #19146
cotaylo
MemberI'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!
February 21, 2013 at 3:58 pm #22070cehwitham
MemberAll 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
February 22, 2013 at 4:13 pm #22300ntety
MemberShould the changes be made via the cPanel or is it okay to make them on the wordpress side of things? Thanks!
February 22, 2013 at 7:35 pm #22332ntety
MemberWhere does the HTML code go?
finallyourwedding.com
Thanks
February 25, 2013 at 5:15 pm #22784cehwitham
MemberYou 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
February 25, 2013 at 5:20 pm #22786ntety
MemberThanks 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!
February 25, 2013 at 5:49 pm #22795cehwitham
MemberDid 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
February 25, 2013 at 6:39 pm #22803ntety
MemberBelow 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);
}February 26, 2013 at 6:33 am #22878cehwitham
MemberRemove 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
February 26, 2013 at 9:12 am #22906ntety
MemberThat did it! You guys are awesome...
Cheers!
February 26, 2013 at 9:45 am #22915cehwitham
Member -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.