The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS The most ridiculous question regarding shadow effect 2

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #168942

    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%;
    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);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;


    What is shadow effect 2?


    What is the HTML structure?


    I think it might be the quote marks you are using the the content property.

    content: "";

    Well, that’s the issue – I only started learning css, and the Layout Builder of my WP theme requires no coding, so the html structure is hidden.

    However, as I have mentioned, I am allowed to add custom css classes for ojects, and define css properties and values via quick css field (or via child theme style.css)

    Do you mean it’s not possible to apply this shadow via css files, without modifying html?


    You see, the piece of code I pasted in is correct, as everyone is using it, and it’s the same on many different websites.

    I have added custom class for the box (my-box). But I suspect that .effect2 class selector should also be connected with the object (my-box) somehow.

    But I have no idea from this point on..

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.