2017-09-05 9 views
0

私は、アイコンがページに「押し込まれる」ように見える次の効果(Mozillaの開始ページ)をどのように達成するのかと思いました。それはCSSで達成できるものなのでしょうか、これは純粋にPhotoshopの操作であり、背景色はちょうどマッチしていますか?画像が効果的に押された - CSS

enter image description here

+0

どのように現在のアイコンを表示していますか?透明または不透明の画像ですか? SVG、アイコンフォント?... – showdev

答えて

1

これはトリックを行う必要があり、あなたが合うように色で遊ぶこと自由に感じ:

div { 
    box-shadow: 0 1px 1px 0 #C7C7C7 inset; 
    background: none repeat scroll 0 0 #E9E9E9; 
} 
+0

例を挙げることはできますか?私はそれらが画像であると仮定して、これらのアイコンのためにどのように動作するのか分かりません。 – showdev

+0

私はアイコンライブラリ 'i'を使って、画像を使うのではなくアイコンにスタイルを適用することをお勧めします。それらのスプライトはかなり共通のアイコンです – EGxo

+0

彼がアイコンフォントを使用している場合、彼は 'box-shadow'ではなく' text-shadow'で行うことができます – EGxo

関連する問題