css3フィルタリング効果

上の写真はCSS3の新機能のフィルター効果です。これらを学んだ後、私たち、美しさとハンサムさを愛する大手ウェブ人は、コードを使って写真を美しくすることができます~~

それでは、まず写真の後ろにある白い枠に注目してみましょう

リーリー

#div1{

/*div の幅、高さ、色を定義*/

幅: 200px;
高さ: 250px;
背景: 白;

/* 写真からの内側のパディング距離は 15px で、テキストは中央揃えになります*/

padding: 15px;

text-align: center;

/* 白い背景を-10deg回転 */

-webkit-transform:rotate(-10deg);

/*背景に影効果を与える*/

box-shadow: 4px 4px 4px #666;
float: left;
}

リーリー

白い背景の枠を書いたら、フィルターを適用します

最初の写真、白黒アートから始めましょう

リーリー リーリー リーリー

2枚目の写真、うーん...古い写真です

リーリー

3枚目、色反転？何色なのかも分かりません

リーリー

4枚目の写真は白い霧がかかっているように見えます

リーリー

レンダリングにない別の写真があります。それは次のようなブラーエフェクトコードです

リーリー

さて、フィルターの共有は終わりました。次は美しい写真です