私は自分のワイヤーフレームを組み立てていますが、デザインも新しいので、素敵なデザインを実現するのに苦労しています。
使用したい背景画像がありますが、非常に軽いつや消しガラス効果のように、画像の上に外観を重ねることで、効果全体を柔らかくしたいと思います。
誰かがすりガラスの層を作成するための最良の方法または同様の効果を達成する方法をアドバイスできますか?つや消しガラスで重ねる前に、背景の上に他のいくつかの要素を配置することにした場合に備えて、重ねて考えていました。
私は自分のワイヤーフレームを組み立てていますが、デザインも新しいので、素敵なデザインを実現するのに苦労しています。
使用したい背景画像がありますが、非常に軽いつや消しガラス効果のように、画像の上に外観を重ねることで、効果全体を柔らかくしたいと思います。
誰かがすりガラスの層を作成するための最良の方法または同様の効果を達成する方法をアドバイスできますか?つや消しガラスで重ねる前に、背景の上に他のいくつかの要素を配置することにした場合に備えて、重ねて考えていました。
すべてのつや消しガラスは本質的に歪みであり、通常は少し光も追加されます。
歪みについては、このjQueryの例のように(毎回クライアント側で実行しても問題がない場合)、jQueryを使用できます(そのコードに従う場合は、speed=0
スケーリングは必要ありません)。
まず、その画像の上にdivを配置します。これは、このようなことを行うことで達成できます
<div class="box">
<img src="yourimage.jpg" />
<div class="top-layer"></div>
</div>
.box{
position: relative;
}
.top-layer{
position: absolute;
top: 0; left: 0;
}
最も簡単で効率的な方法は、おそらくgimpまたはphotoshopを使用してつや消しガラスを模倣した半透明のpngを作成し、それを.top-layerの背景として設定することです。
別の画像を使用せず、純粋なcssソリューションが必要な場合は、.top-layerスタイルのプロパティを試してみてください。線形および放射状のグラデーション(白、水色、透明度の混合)、不透明度、および複数のボックスシャドウの複数の背景を使用してみてください。これらの設計は、いくつかの助けになるはずです。
特に「ある電話のホーム画面」と「ボックス3:彼らは私をグラスさんと呼んでいます」。