Hei everyone,
My css 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.
I am working upon a site with WordPress theme called “Enfold”, which has a built-in Avia Layout Builder.
This builder allows me to add custom css class to objects (including the box I want to apply shaddow to), and define the css properties in “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: 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;
}
