Welcome to WebmasterWorld Guest from 3.92.92.168

Forum Moderators: not2easy

Message Too Old, No Replies

Applying shaddow effect 2 won't work

shadow effect 2

     
6:40 pm on Apr 30, 2014 (gmt 0)

New User

5+ Year Member

joined:Apr 30, 2014
posts: 2
votes: 0

Hei guys,

My css knowledge is unfortunately at a diaper level, however, I still hope I can manage this one:

I want to apply shadow effect 2 to a box ( http://www.paulund.co.uk/creating-different-css3-box-shadows-effects )

I am building a site with a WordPress theme called “Enfold”, which has a built-in Avia Layout Builder.

This builder allows me to add custom css class to different objects in page (including the box I want to apply shaddow to), and define the css properties for this object in the “quick css” field.

I called the custom class of the box in question as “my-box”, and pasted in the generated code of effect2 into the quick css field. However, it gives no effect.

What am I doing wrong ? Any tips are highly appreciated..

custom css class: my-box

quick css:
#top .my-box .effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: “”;
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}

Thanks a lot!
6:50 pm on Apr 30, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


You're not adding the box shadow to the proper element, it should be:

.my-box {
box-shadow: 0 15px 10px #777;
}
7:12 pm on Apr 30, 2014 (gmt 0)

New User

5+ Year Member

joined:Apr 30, 2014
posts: 2
votes: 0


Hei brandozz, thanks for the note.

I tried your recipe excluding:

.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: “”;
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;


but what remains of the code doesn't give effect 2 shadow:


.my-box {
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}


Any ideas ?