glossy.jsで画像に光沢をつける

先日「instant.js」を使って画像に枠をつける方法を紹介しましたが、このjavascriptがおいてあるところに画像がめくれる「curl.js」や今日紹介する「glossy.js」があります。

今日は「glossy.js」を使って画像を光沢をつけてボタン風に見せてくれる方法を紹介してみたいと思います。
(Google Chromeでの表示はちょっと粗めです。)

手順は「Instant.jsで画像にフレームを表示」で紹介したものと全く同じです。
「Instant.js」の部分全てを「glossy.js」と読み替えていただければよいと思います。

こちらのページから「glossy.js」をダウンロードします。

ダウンロードしてきたファイルを展開して、そのフォルダの中の「glossy.js」をアップロードし、テンプレートの編集でhead内に書き入れます。

使い方も「instant.js」の時と同様です。

記事を書く時に通常通り画像を挿入します。
以下のような表示(赤字部分はなし)になっていますので、赤字部分を書き足します。
これだけで画像に光沢がつきます。

<a href="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09070201.jpg" target="_blank"><img src="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09070201s.jpg" alt="09070201.jpg" border="0" width="300" height="226" class="glossy"/>


オプションをつけることで、影をなくしたり、角の丸みの大きさを変えたりできます。

・角丸の割合 class= "glossy iradius25"(20%~50%の数字)
・影をつけない class= "glossy noshadow"
・グラデーションをつける(透過Gifの場合) class= "glossy ibgcolor00aa00"(この場合は1色のグラデーション)
・2色でグラデーションをつける(透過Gifの場合) class = "glossy ibgcolor00aa00 igradient00aaaa"
※「ibgcolor」「igradient」の後ろの数字は色の指定で、HTMLでのカラー同じです。
・水平方向(横方向)にグラデーションをつける場合 class= "glossy bgcolorff00ff igradient00aaaa horizontal"
※「horizontal」をつけない場合は垂直方向(縦方向)に色が変わっていきます。

09070201.jpg09070204.jpg09070202.jpg
 class="glossy" class="glossy iradius40" class="glossy noshadow"
09070205.jpg09070206.gif
09070207.jpg
 class="glossy iradius30 noshadow"class="glossy ibgcolorff00ff igradient00aaaa horizontal noshadow"class="glossy"
09070208.gif class="glossy ibgcolor6633ff igradient000000"

元画像はこんな感じです。↓
こんなにのっぺりした画像がちょっといい感じになるんです♪
09070201.jpg 09070204.jpg09070202.jpg
09070205.jpg09070206.gif09070207.jpg
09070208.gif ←これはglossy.jsをかける前は何も見えませんが、白色で絵を描いた透明Gifになっているため、glossy.jsのグラデーションをかけると絵が出てきて見えます。
関連記事

コメントの投稿

れんさん
すごーくわかりやすい画像編集の解説。
ソフトを買って本を読んで、、、全然何が書いてあるのか
自分の中に入ってこないのに、このページはやる気にもなり
ほんとにそのとおり進んでいくと出来ますね。
こんな解説書がほしいのかも。

私は詳細がわからないのですが・・
これはやっぱあれですか、
すごくわかりやすい解説ですよね?

好きこそものの上手なれ・・・・・

 (私の記憶ではたしか独学だったと・・違いましたっけ?)

凄い!

めっちゃオシャレなボタンが作れちゃうんですね!
音楽ダウンロードのWebサイトみたい♪e-349
前の記事の、めくれる画像も拝見しました☆
思わずカーソルをあちこち動かしたり静止させたり、
めくれる動作を操って王様気分でした(なんだそれ!∑e-446
息子さんよくなってきたようで良かったです!
くれぐれもお大事にどうぞ!
楽しい週末でありますように☆

れんさん、こんばんは~

こんな素敵なぼたんが作れたら面白いですね~!(^^)!
ココ&ミル&カプのボタンがたっくさんあるといいな~
鼻のボタン、肉球のボタン、お尻のボタン(!?)
なんか、どうかな~、
ちょっとマニアックかしらん^m^

前回の写真めくりも面白いですね!
いろんなこと出来ちゃうんですね~
私、初めて知ることが多いです!

長男君、その後調子はどうですか~
良くなりましたか?

yu様

yuさん、いらっしゃませ~。

「わかりやすい」と言っていただけてとてもうれしいです♪
私の説明、ちょっとくどくどと事細かく書き過ぎかな…なんて思ったりすることもよくあるので、そういっていただけるとこれでよかったんだ♪と自己満足に浸れます( *^艸^)

ネタ切れ時は画像編集のことやその他のソフトの話を書いています。
(最近ネタ切れの方が多くて、こんな話題ばっかりなんですが…。
プラス…この手のネタもネタ切れに……e-350

何かリクエストなどあればネタの提供にお願いいたしますm(__)m
もちろん秘密コメントでかまいません。

これからもお付き合いくださいね~。

ぷぅちゃん☆様

そうです、そうです。
「好きこそものの上手なれ」です。

「独学」って言うと聞こえがいいですよね( *^艸^)
どちらかというと「習うより慣れろ」的な覚え方です。
人のマネをするのが上手なのかも( *^艸^)
やってみたいな~と思ったものがあれば検索して探し出してきてまねしてやってみますから。
で、うまくできればうれしくて、備忘録としてもここに記載。

やりたいと思ったことができた時はとってもうれしいです♪

みるぼ様

これって普通の画像を貼り付けるだけで、こんな風に光沢のあるエフェクトをかけてくれるから便利ですね~。
いろんなサイトを見るとフォトショップなどでこういう光沢のあるボタンの作り方が書いてありますが、簡単にエフェクトをかけられるという点でこちらの方がお気に入りです。

それにしても…javascriptっておもしろいですね~。

いつも息子のこと気にかけてくださってありがとうございますm(__)m
唇の抜糸したあとの傷が醤油系のものを食べると沁みるようですが、足の方は全然大丈夫♪

みるぼさんもすてきな週末をお過ごしくださいね(#^.^#)

ボス様

ボスさんちのトイプー軍団たちのボタンかわいいだろうなぁ~♪
お尻のボタンはカプちゃんでお願いしますm(__)m

これは何も加工していない画像にjavascriptでエフェクトをかけているだけなので、とってもお手軽にボタンが作れます♪

いろんなことができておもしろいですよね~。
最近、そういうのを探し出してくることにハマっています( *^艸^)

息子は指の骨も足の方もすっかり良くなりました。
口の中の傷が口内炎のようになってて、食べ物によってはちょっと沁みるようですが、外観はごくごく普通に戻りました♪
一安心です。
いつも気に留めてくださってありがとうございますm(__)m
**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ