スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像にモザイクをつけるCSS

WEBアプリの機能面は、実は難しいことって少ないんです。
応用であったり、使い方であったり、アイデア勝負なところが大きいです。

逆に、使いやすさ、ユーザビリティに関しては、すごく難しいです。
沢山の人に合わせることってなかなか出来ないんですね。

子供やお年寄りでも理解できるレベルに合わせると、使いやすくはなりますが、
かっこ良さだとか、綺麗さ重視の現役は使ってくれなかったり。

しかし!
自分専用のアプリってどうでしょう。
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は、効果です。
以下、ざっくりと使えるものをまとめます。

フィルター説明
hue-rotate色相。hue-rotate(180deg)なら、色相を180度反転。色相環を回転させたい角度で指定。
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に無修正であったり、個人的に衝撃度の強いサムネイルが多かったりするのです。

そのため、サムネイルの画像にはボカシをしておきたいなと・・・。

こういった使い勝手の修正は、自分だけのものだからこそです。

ボカシなんて要らないよ!という方には不要でも、僕のようにチキンなエロ若輩者には必要なんです。

ちなみにどんな感じになったかというと・・
xvideos取得一覧をぼかす

うむ。一安心です。
関連記事

コメントの投稿

非公開コメント

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。