Shadow effect 2 nightmare

• 

  nerkass · Member · Apr 30, 2014 at 7:26 pm

  • Copy link
  • Add topic to favorites

  Hei everyone,

  I am css diaper level newbie, however, I hope I can manage to crack this nut here:

  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 shadow 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:
  .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!

• 

  hafizr · Member · Apr 30, 2014 at 11:07 pm

  • Copy link

  Hi there!

  If you’re using self-hosted WordPress, it would be a good idea to ask around the WordPress.org support forum instead. Here’s the one for theme and templates: http://wordpress.org/support/forum/themes-and-templates

  We are now on WordPress.com and we only deal with WordPress.com themes here :)