スポンサーサイト
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
画像にモザイクをつけるCSS
WEBアプリの機能面は、実は難しいことって少ないんです。
応用であったり、使い方であったり、アイデア勝負なところが大きいです。
逆に、使いやすさ、ユーザビリティに関しては、すごく難しいです。
沢山の人に合わせることってなかなか出来ないんですね。
子供やお年寄りでも理解できるレベルに合わせると、使いやすくはなりますが、
かっこ良さだとか、綺麗さ重視の現役は使ってくれなかったり。
しかし！
自分専用のアプリってどうでしょう。
UI（ユーザーインターフェース）は自分にだけ合ってれば良いのです！
というわけで、さっそく表題の件です。
応用であったり、使い方であったり、アイデア勝負なところが大きいです。
逆に、使いやすさ、ユーザビリティに関しては、すごく難しいです。
沢山の人に合わせることってなかなか出来ないんですね。
子供やお年寄りでも理解できるレベルに合わせると、使いやすくはなりますが、
かっこ良さだとか、綺麗さ重視の現役は使ってくれなかったり。
しかし！
自分専用のアプリってどうでしょう。
UI（ユーザーインターフェース）は自分にだけ合ってれば良いのです！
というわけで、さっそく表題の件です。
CSSの例
img {
-webkit-filter: blur(2px);
}
これは、imgタグにボカシをかけてます。
使い方
filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-XXX-filter
の、XXXはブラウザによって独自に実装しているやつです。
HTMLとかCSSの仕様って、みんなで決めるんですけど、その前に各自実装してるんですね。
filterは、効果です。
以下、ざっくりと使えるものをまとめます。
ちなみに、アニメーションさせる機能もありますので、調べてみると面白いですよ。
当ブログですが、個人的にwebkitが好きなので、webkitベースで話を進めてます。
webkitっていうのは、Google ChromeやSafari等で使われていて、最近だとOperaもwebkitにするらしいですね。GoogleとAppleが採用してるということで、日本ではほとんどのスマートフォンもwebkit大好きになるのではないでしょうか。
webkitは結構前からソースを眺めていたので愛着があります。
といっても、SafarでRSS非対応にしたことは改悪だと思いますが。Windowsも非対応にしちゃうし。普段Macだからいいけど。
おっと、話が脱線しました。
何故今回ボカシのCSSをやったかというと、xvideosの動画取得をやりましたが、なんというか、TOPに無修正であったり、個人的に衝撃度の強いサムネイルが多かったりするのです。
そのため、サムネイルの画像にはボカシをしておきたいなと・・・。
こういった使い勝手の修正は、自分だけのものだからこそです。
ボカシなんて要らないよ！という方には不要でも、僕のようにチキンなエロ若輩者には必要なんです。
ちなみにどんな感じになったかというと・・
うむ。一安心です。
img {
-webkit-filter: blur(2px);
}
これは、imgタグにボカシをかけてます。
使い方
filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-XXX-filter
の、XXXはブラウザによって独自に実装しているやつです。
HTMLとかCSSの仕様って、みんなで決めるんですけど、その前に各自実装してるんですね。
filterは、効果です。
以下、ざっくりと使えるものをまとめます。
| フィルター | 説明 |
|---|---|
| hue-rotate | 色相。hue-rotate(180deg)なら、色相を１８０度反転。色相環を回転させたい角度で指定。 |
| brightness | 明度。brightness(-50%)という感じで指定。現在の明度を0%とし、-100%なら黒、100%なら白になる。 |
| saturate | 彩度。saturate(100%)という感じ。現在の彩度を100%として、どれくらい上げたり下げたりしたいか指定。 |
| grayscale | グレースケール。grayscale()と指定。白黒になる。 |
| sepia | セピア。sepia()と指定。セピアになる。古い写真みたいな感じ。 |
| opacity | 透明度。opacity(50%)という感じ。透明度を指定する。透ける。 |
| invert | ネガポジ反転。invert()と指定。階調反転。 |
| contrast | コントラスト。contrast(150%)という感じ。コントラストを上げ下げする。 |
| blur | ぼかし。blur(5px)という感じ。何ピクセルぼかすか指定。 |
| drop-shadow | ドロップシャドウ。drop-shadow(10px 10px 5px #111)という感じ。影ですね。引数は、横に何ピクセルか、縦に何ピクセルか、影の広がりは何ピクセルか、色は何色か、という順番で指定。 |
ちなみに、アニメーションさせる機能もありますので、調べてみると面白いですよ。
当ブログですが、個人的にwebkitが好きなので、webkitベースで話を進めてます。
webkitっていうのは、Google ChromeやSafari等で使われていて、最近だとOperaもwebkitにするらしいですね。GoogleとAppleが採用してるということで、日本ではほとんどのスマートフォンもwebkit大好きになるのではないでしょうか。
webkitは結構前からソースを眺めていたので愛着があります。
といっても、SafarでRSS非対応にしたことは改悪だと思いますが。Windowsも非対応にしちゃうし。普段Macだからいいけど。
おっと、話が脱線しました。
何故今回ボカシのCSSをやったかというと、xvideosの動画取得をやりましたが、なんというか、TOPに無修正であったり、個人的に衝撃度の強いサムネイルが多かったりするのです。
そのため、サムネイルの画像にはボカシをしておきたいなと・・・。
こういった使い勝手の修正は、自分だけのものだからこそです。
ボカシなんて要らないよ！という方には不要でも、僕のようにチキンなエロ若輩者には必要なんです。
ちなみにどんな感じになったかというと・・
うむ。一安心です。
- 関連記事
-
- bootstrapの使い方 (2013/04/06)
- キレイなホームページが簡単に作れるフレームワーク (2013/04/05)
- 画像にモザイクをつけるCSS (2013/04/04)
- スタイルシートについて (2013/04/02)
