Question

I’m following a tutorial for PSD slicing and converting to HTML by tuts+ and I’m learning quite a bit, however I’m stuck with something really annoying. When I’m trying to add inner-shadow to a main CTA with .inner-shadow, I get a gray bar that is not remotely close to the color or the location that I want. This happens even if I copy the code exactly as it is from the source code files available with the lesson.

Here’s all the relevant info (I hope, let me know if anything key is missing):
Using: Sublime Text 2, Winless for LESS compiling, Chrome (Version 24.0.1312.57 m) and Firefox (v. 18.0.2) to display the site.
Relevant LESS mixin:

.inner-shadow (inset, @x: 0, @y: 0, @blur: 1px, @color: #000) {
-webkit-box-shadow: @arguments;
box-shadow: @arguments;

Code under CTA:

.inner-shadow(inset, 0, -8px, 0, rgba(0, 0, 0, 0.2)); (rgba used to make the black less harsh and more transparent)

Using Eric Meyer’s reset.

What I expect is this (from the PSD file):

What I get is this:

Note that to get the shadow to the right location I actually have to input 8px instead of -8px for Y axis in .inner-shadow. Not sure why the axes are flipped, but putting -8px actually puts the shadow on the top of the box!

Really confused by this, would appreciate any help immensely.

Thanks!

-Edit- Here is the CSS for it:

    -webkit-box-shadow: 0 8px 0 rgba(0,0,0,0.2);
    box-shadow: 0 8px 0 rgba(0,0,0,0.2)

Answer 1

Try this

.inner-shadow (@inset: inset, @x: 0, @y: 0, @blur: 1px, @color: #000) {
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}