1

グラフィックデザインイメージ

上の画像に示されているスタイリングを作成するには、助けが必要です。これは、私が必要としているもののグラフィック デザインです。上の画像に示されているパネルの左下隅のシェーディングは、私の本当のこだわりポイントです. あらゆる種類のジェネレーターを試しましたが、放射状グラデーションでは十分に近づけることができません。

ご覧のとおり、多数のパネル (実際には合計 5 つ) が隣り合わせに並んでいます。各パネルは幅が異なる可能性があり、ブラウザのビュー ポートのサイズ変更でサイズが変更されるため、背景画像を提供することは実際にはオプションではありません。

正常に機能するテクスチャ効果を作成する透明な背景画像を繰り返しているので、テクスチャ効果については心配していませんが、左下隅の暗いシェーディング効果をまったく作成できず、css を使用してできるだけ近づける必要があります。 . 私はこれで何日も髪を引き裂いています。

主な緑色の 16 進コードは #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>

線の位置を微調整する必要がある場合は、background-position を使用してください。これにより、列ごとに画像を変更することなく、列を必要なだけ広くすることができます。

于 2014-01-09T18:23:12.397 に答える