HTML_CSS
Googleでログイン
問題18：画像にぼかしを入れてみよう
CSSを使用して画像にぼかし(モザイク)を入れてみよう!
見本を参考に作成していきましょう。
見本を参考に作成していきましょう。
あらかじめエディタに書くコード
<div class="logo" style="width: 300px;">
<img src="https://ninjacode.work/assets/img/qa/logo.jpg">
</div>
¥HTML¥
期待する画面
解答ソースコード
<div class="logo" style="width: 300px;">
<img src="https://ninjacode.work/assets/img/qa/logo.jpg">
</div>
¥HTML¥
.logo {
width: 300px;
}
img {
width: 100%;
filter: blur(6px);
}
¥CSS¥
補足
filterプロパティには、ぼかし以外にも画像の彩度や明度、コントラストなどを変更したりすることができます。
Photoshopのペイントソフトを使用したことがあれば、馴染みのある効果だと思います。以下少しだけ紹介します。
・brightness(明度)
・contrast(コントラスト)
・drop-shadow(ドロップシャドウ)
・grayscale(グレースケール)
Photoshopのペイントソフトを使用したことがあれば、馴染みのある効果だと思います。以下少しだけ紹介します。
・brightness(明度)
・contrast(コントラスト)
・drop-shadow(ドロップシャドウ)
・grayscale(グレースケール)
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
モザイクを付与するにはその要素に対して
filter: blur(1px); を指定します
pxは自由に設定できます。