コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > css3フィルタリング効果

css3フィルタリング効果

WBOY
リリース： 2016-08-04 08:53:14
オリジナル
1663 人が閲覧しました

上の写真は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枚目の写真は白い霧がかかっているように見えます

リーリー

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

リーリー

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

関連ラベル：
css3的过滤效果
ソース：php.cn
前の記事：SafariのCookie設定が中国語で失敗する 次の記事：1 行に 2 つある場合に Django テンプレートのループ変数 を制御する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
エンティティ ウェアハウスは JpaRepository<Entity, Id> および JpaSpecificExecutor<Entity> を拡張し、EntitySpec は Specific<Entity> を拡張します。 これは私のエンドポイントです http://localhost:8080/country/all 返信はすべての国に対して問題ありません。フィルターしたい場合は、空の国が見つからず...
から 2024-04-06 17:11:03
0
1
421
0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...
から 2024-04-06 16:29:50
0
2
490
1 つの列が空の場合に SQL 結果をソートするにはどうすればよいですか? クエリ結果の順序について質問があります。並べ替える必要がある列が 3 つあります: ORDERBYlevelDESC、logoDESC、bNameASC 最初に DESC で最高の...
から 2024-04-05 00:39:32
0
1
317
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート