今回は個人的に知っておくと便利だなと思うcssの小技part10 -画像編-です。
バックナンバー
画像をcssでモノクロやセピアにする
DEMO
なんとcssだけで画像をモノクロやセピアにできます。大変便利です。
HTML
|
1 2 3 4 5 |
/*モノクロ*/ <p class="grayscale"><img src="sample01.jpg"/></p> /*セピア/* <p class="sepia"><img src="sample01.jpg"/></p> |
css
|
1 2 3 4 5 6 7 8 9 |
.grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .sepia { -webkit-filter: sepia(100%); filter: sepia(100%); } |
filterプロパティを使いモノクロに対しては『grayscale』を、セピアに対しては『sepia』を指定します。
これだけで画像にそれぞれのフィルタをかけることができます。
%の数値は大きくなるほどフィルタが濃く反映されます。
ちなみにIEは現時点での最新バージョンで非対応なのでそこだけご注意ください…。
画像をcssでぼかす
DEMO
画像のぼかしもcssのみでできます。
HTML
|
1 |
<p class="blur"><img src="sample02.jpg"/></p> |
css
|
1 2 3 4 |
.blur { -webkit-filter: blur(5px); filter: blur(5px); } |
今度もfilterプロパティを使い『blur』を指定します。
これで画像にぼかしをかけることができます。
pxの値が大きくなればなるほどぼかしは濃くなります。
そしてこちらもIEは現時点での最新バージョンで非対応なのでご注意ください…。
