Home> computing > UserCSSでGhostzilla的画像の処理みたいなの(1)
UserCSSでGhostzilla的画像の処理みたいなの(1)
- November 2, 2007 12:51 PM
- computing
懐かしのGhostzilla。(※リンクしようと思ったら公式配布サイトが死んでた!)
大学の研究室に入りたての頃、目に五月蠅いサイトが見易くなるので微妙に使ってました。
それまでずっとNetscape使ってましたしね。
個人的にはOperaでUserCSSが使えるようになって、出番は無くなってしまったのですけど、唯一、あの画像の処理だけは再現しようとせずに放置。
で今回Opera9.5をセットアップし直していて、UserCSSディレクトリをクリーンアップしつつ思った訳です。
「...CSSだとグレースケール化は無理だろうけど、透過で擬似的に彩度を落とせば同じような効果が得られるんじゃね?」
結果的に云うと、上記の処理は問題無くできます。
下記UserCSSを使うと、文書内の背景画像以外の全てを元画像の10%まで透過処理、マウスオーバで80%まで上がって見えるようになりますよ。
(透過具合/透過時の背景色/border処理などは、好みで調整して下さい)
@charset "utf-8";
/* Name: 画像半透過 */
img {
background-color:#aaa !important;
border:dotted 1px transparent !important;
filter:alpha(opacity=10) !important;
opacity:0.1 !important;
}
img:hover{
background-color:transparent !important;
border:solid 1px #fff !important;
filter:alpha(opacity=80) !important;
opacity:0.8 !important;
}
アルファチャンネル方式でも書いてあるので、IE系でもユーザスタイルシートをゴニョゴニョしてる人なら動くんじゃないかと。
もう少しGhostzillaっぽくしたい人は、
* {
color: #999999 !important;
}
みたいなのを追記してフォントも灰色にしてみれば良いかも知れません。
昼休みに暫く使ってみましたが、精神系ブラクラ予防にも良さそうな感じなので自宅でも使いそうな気がします。
----
[余談]
記事タイトルに(1)が付いているのは、JavaScriptでの画像グレースケール処理を考えているからです。
帰宅してから実装してみる予定。
Trackbacks:0
- TrackBack URL for this entry
- https://w3neu.net/mt/mt-tb.cgi/217
- Listed below are links to weblogs that reference
- UserCSSでGhostzilla的画像の処理みたいなの(1) from Sequentially Altered Days
- Categories
- Archives
- Syndication
Comments:0