css或css3中的左下角着色效果

Question

我需要帮助来创建上图中显示的样式，这是我需要做的图形设计。上图中显示的面板的左下角阴影是我真正的难点。 我尝试了各种各样的发电机，但是我不能靠近径向渐变得到足够接近。

正如你所看到的，我有许多面板（实际上总共5个）彼此相邻排列，每个面板可能具有不同的宽度，并且将通过borwser视图端口大小调整大小，因此提供背景图像并不是真正的选项。

我有一个重复的透明背景图像，可以创建很好的纹理效果，所以我不关心纹理效果，但我完全无法创建左下角较暗的阴影效果，我需要尽可能接近绝对可能使用CSS。我已经把头发撕了好几天了。

主绿色十六进制代码为＃3F4B0B

我的css目前看起来像这样

@mixin forest-green-texture{
    @include background-image(url("texture.png"), linear_gradient($dark-green, $light-green));
}
.footer-box{
    @include banner-color;
    @include forest-green-texture();
    width:18%;
    float:left;
}

线性渐变不会削减它！这是我的最后一次尝试，完全错了

如果有所作为，我正在使用SASS

我非常接近使用此工具http://ie.microsoft.com/TESTDRIVE/Graphics/CSSGradientBackgroundMaker/Default.html

给了我

/* IE10 Consumer Preview */  background-image:
-ms-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);

/* Mozilla Firefox */  background-image: -moz-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%,
#000000 100%);

/* Opera */  background-image: -o-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);

/* Webkit (Safari/Chrome 10) */  background-image:
-webkit-gradient(radial, right top, 0, right top, 970, color-stop(0, #3F4B0B), color-stop(0.7, #3F4B0B), color-stop(0.9, #3F4B0B), color-stop(1, #000000));

/* Webkit (Chrome 11+) */  background-image:
-webkit-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);

/* W3C Markup, IE10 Release Preview */  background-image: radial-gradient(circle farthest-side at right top, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);

我知道颜色有点不对，我并不担心我可以调整它们，但上面的情况并不比线性渐变好得多。

更新 这是我迄今为止实现的目标的屏幕截图

正如您所看到的，阴影不正确。 我拥有的CSS是

background-image: url("texture.png"), linear-gradient(to right top, black 0%, rgb(70, 84, 12) 50%, rgb(82, 97, 14) 100%);

所有帮助非常感谢

Answer 1

我建议将纹理图像放在列的容器div的背景上，然后为每列使用具有透明背景的线阴影图像作为每个列的背景属性。

<style>

  .container {
    background: url(textureImg.png) repeat;
  }

  div[class^="col"] {
    background: url(lineShadowImg.png) no-repeat;
  }

</style>

<div class='container'>

  <div class='colOne'>
    //your content
  </div>

  <div class='colTwo'>
    //your content
  </div>

  <div class='colThree'>
    //your content
  </div>

</div>

如果你需要调整线的位置，只需使用background-position。这样可以使您的列尽可能宽，而无需为每个列更改图像。