php - CSS を使用して画像に点線の影の効果を作成する方法は?

Question

http://www.murmure.me/の画像にカーソルを合わせたときに表示される効果を作成したいと思います。

私は彼らが2つの異なる画像を使用していることを知っていますが、1つの画像(ドットのない画像)とCSSを使用するだけで、2つの画像を使用せずにこの効果を実現したいと考えています. 出来ますか ？

Answer 1

これはかなり近いです：http：//jsfiddle.net/LfXN3/8/

ただし、2番目の要素が必要です（画像ではなく、要素のみ）。疑似要素アプローチは、不透明度をアニメーション化できなかったため、機能していませんでした。

<div>
    <div id="overlay"></div>
</div>​

CSS

div{
    background:url(http://placekitten.com/600/600) center center;
    width:400px;
    height:400px;

    -webkit-transition:all 2s;
    -webkit-filter: grayscale(100%);
}

div:hover{
    -webkit-filter: grayscale(0%);
}

div #overlay{
    opacity:.5;
    display:block;
    background: -webkit-linear-gradient(45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(-45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(45deg, transparent 75%, #777 75%), -webkit-linear-gradient(-45deg, #000 75%, #777 75%);

    background-size:2px 2px;
    width:400px;
    height:400px;

    -webkit-transition:opcaity 2s;
}

div:hover #overlay{
    opacity:0;   
}

ダドリー・ストーリーのテクニックを私のものに取り入れることで、私はそれを少し近づけることができました：http: //jsfiddle.net/LfXN3/14/

主な違いはこれです：

div #overlay{
    opacity:1;
    display:block;
    background: -webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
    url(http://placekitten.com/600/600);
    background-position: 0 0, 2px 2px, center center;
    background-size:4px 4px, 4px 4px, 600px 600px;
    width:400px;
    height:400px;

    -webkit-transition:opacity 2s;
}

Answer 2

はい、単純な CSS3 とフィルターを使用して、単一の画像で実行できます:デモと簡単な説明は、私のブログ. 現在、Firefox ではグレースケールからカラーへの移行が特に遅いように思われるため (フィルターに相当する SVG を使用する必要があるため)、当面デモから削除しました。

div#silkscreen {
background:
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
url(lotus.jpg);
background: -moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
-moz-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%), 
url(lotus.jpg);
background-position: 0 0, 2px 2px;
background-size:4px 4px, 4px 4px, cover;
-webkit-filter: grayscale(1);
filter: url(desaturate.svg#greyscale);
filter: grayscale(1);
transition: 1.3s;
}
div#silkscreen:hover { -webkit-filter: grayscale(0); filter: none; }
div#silkscreen img { max-width: 100%; opacity: 0; }}
div#silkscreen:hover { -webkit-filter: grayscale(0); }
div#silkscreen img { max-width: 100%; opacity: 0; }

<div id=silkscreen>
<img src=lotus.jpg alt="">
</div>

これが役立つことを願っています！

Answer 3

ミケル、CSSと単一の画像を使用してシルクスクリーン効果を実現することはできません。
クロスブラウザ互換の方法で、すぐに発生することはありません。

たぶん、最終的には、HLSLなどを使用してCSSフィルターをカスタムプログラムできるようになると...
しかし、当面は、近未来のCSSフィルターを使用しても、シルクを提供することはないと思います。 -画面、そして次に、トランジション効果と一緒にそれについて心配する必要があります、そして次に、他のブラウザのための2つの画像のフォールバックで、ブラウザのサポートについて心配する必要があります...

つまり、2番目の画像を作成し、最初に2番目の画像を作成しないようにするために、CSSフィルターがあることを期待していた2つの画像のフォールバックを作成する必要があります。

Answer 4

css3 グレースケール フィルターを使用してカラー画像をグレースケールに変換することは可能ですが、現在は Chrome でのみ機能します。

-webkit-filter: grayscale(100%);

jQuery を使用せずにその効果を得るための回避策は、2 つの画像と css3 トランジションを使用することです。

-webkit-transition: opacity 0.5s;
-moz-transition:    opacity 0.5s;
-o-transition:      opacity 0.5s;

Answer 5

元の画像 (ドットなし) と、1 つの小さなドットだけで構成された別の画像 ( http://www.scottecatalog.com/images.nsf/Images/dot/ $FILE/Dot.gif など) を使用して、繰り返し属性を使用して、ドット間の適切なスペースと z-index プロパティを使用して元の画像全体にドットを繰り返します(ドットが元の画像のフォントに配置されるように)?

まだ 2 枚の写真を使用していますが、少なくとも、その下にある元の画像が何であれ、この効果をどの画像にも簡単に再現できます。それは理にかなっていますか？