1

平面设计形象

我需要帮助来创建上图中显示的样式，这是我需要做的图形设计。上图中显示的面板的左下角阴影是我真正的症结所在。我已经尝试过各种生成器，但我无法通过径向渐变获得足够的距离。

正如您所看到的，我有许多面板（实际上总共 5 个）并排排列，每个面板的宽度可能不同，并且会根据浏览器视口大小调整大小，因此提供背景图像并不是一个真正的选择。

我有一个重复的透明背景图像，可以创建效果很好的纹理效果，所以我不关心纹理效果，但我完全无法创建左下角较暗的阴影效果，我需要尽可能接近使用 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%);

非常感谢所有帮助

4

1 回答 1

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>

如果您需要调整线条的位置，只需使用背景位置。这将允许您的列尽可能宽，而无需更改每个列的图像。

于 2014-01-09T18:23:12.397 回答