■Adobe Photoshop Tutorials - Rainbows, Glows and Light Effects | Tutorials | Smashing Magazine
Photoshopを用いて、画像や写真にとてもキレイな効果を与える事の出来るチュートリアル集がまとめられてます。
グロウ効果は幻想的な雰囲気を醸し出したり、美しい輝度の表現に良いですね。
Photoshopが手元に無くても、眺めるだけでも楽しいです。
エントリータイトルには見出し(H2やH3)を割り当てる事が多いかと思いますが、この見出しタグは、tabber.jsでは「タブ内の文字列」として扱われるので、その点が注意する点かと思います。
見出しタグはそのままに、class=tabbertabにtitle属性を付加して、タブ内の文字列を指定する方法も試してみました。
]]> tabber.jsライブラリのDL■JavaScript Tabifier automatically create an html css tabs interface
上記よりtabber.jsをDLして、読み込ませます。
スクリプトは任意の箇所に置いて、パスの指定を行います。
<script type="text/javascript" src="tabber.js"></script>
<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
class=tabber で囲んだ箇所がタブ式コンテンツに変更されます。
class=tabbertab で囲んだ見出し箇所はタブの文字列になります。
<div class="tabber">
<div class="tabbertab">
<h2>タブの文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>
<div class="tabbertab">
<h2>タブの文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>
<!-- tabber end --></div><div class="tabber">
<div class="tabbertab" title="タブの文字列">
<h2>文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>
<div class="tabbertab" title="タブの文字列">
<h2>文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>
<!-- tabber end --></div>
タブで切り替えたコンテンツ内に更にタブを設置する方法もありますが、ここでは一番簡単な方法だけで。
より詳細に試してみたい場合は、配布サイトのTipsを見ながら試してみると良いです。
エントリーとして生成される範囲をtabbertabで括ってあげると良いです。
アイテム(画像)をタブ形式にしてみたり、タグをタブに割り当てて、属するエントリーを表示させたりも出来そうです。
<div class="tabber">
<MTEntries lastn="5">
<div class="tabbertab">
<h2><$MTEntryDate$></h2>
<div class="testtitle"><$MTEntryTitle$></div>
<div class="entry-body">
<$mt:EntryBody$>
<!-- entry-body end --></div>
<!-- tabbertab end --></div>
</MTEntries>
<!-- tabber end --></div>
tabberライブラリに付属しているcssでは、見出しをdisplay=noneで消してあります。
この箇所を変更すれば、オリジナルでは消えている見出しも表示させる事が可能です。
スクリプトを読み込ませて、classを付加するだけなので、もとのHTML(テンプレート)に過度の変更を行わずに導入する事が可能です。
この点がとても良いなぁ、と思って試してみました。
スクリプトをOFFにした場合でもコンテンツが消えない点も○。
ひとつのページで複数のtabber指定を行っても、干渉もなく利用する事が出来ます。
サイトにちょっと変化を持たせてみたい方や、興味の湧いた方はちょっと試してみるといかがでしょうか？
(｢･ω･)｢
■Adobe Photoshop Tutorials - Rainbows, Glows and Light Effects | Tutorials | Smashing Magazine
Photoshopを用いて、画像や写真にとてもキレイな効果を与える事の出来るチュートリアル集がまとめられてます。
グロウ効果は幻想的な雰囲気を醸し出したり、美しい輝度の表現に良いですね。
Photoshopが手元に無くても、眺めるだけでも楽しいです。
■ColorMixers: Remixing RGB since 2003
色彩感覚に乏しい私にぴったりのツールです。
このツールの概要は、スライドバーで選んだカラーに適した他のカラーを即座に選んで表示してくれます。
また、選んだ色を Photoshop の act 形式、Illustrator の ai 形式、またはカラーコードを記したテキストにして出力してくれます。
選択しているカラーの文章例も表示してくれるので、視覚的に捉える事が出来ます。
サイトの「downloads」より進み「ColorMatch Remix」をDLさせて貰います。
次に、config.php ファイルを開いて、ローカルサーバーのデータベースに繋がるように設定します。
それから、phpmyadminなりコマンドなりで”適当につけたDB名”と同じ名前のDBを作ります。
そしてそこに、colormatchディレクトリに一緒に収められている「database.sql」を読み込ませます。
phpmyadmin2.6.4の場合、
となります。
あとは、ColorMatch Remix を置いたディレクトリにサーバー越しにアクセスすると良いです。
上記では、ローカルサーバーを用いて利用するPHP版の紹介になりますが、そこまでしなくとも通常に開いて利用出来るHTML版もあります。
左はそれを開いてみたところ。
違いは、設定したカラーを保存出来ないところになります。
スクリプトを用いており、選んだカラーのリアルタイム表示は行われます。
双方共に使い心地良いので、興味のある方はちょこっと触ってみると良いかと思います。
このサイトには、他にもカラー・ジェネレーターの素晴らしいツールが揃ってます。
こちらはWeb上で利用出来る「ColorMixers」
■ColorMixers: Remixing RGB since 2003
他にも、サイトの「Links」から入るとどれも素敵に便利なツールが揃ってます。
これは面白いですね。それもFlashを利用なので、触ってる私としてもとても興味を惹きました。
ブログパーツとしては、このようにページのレイヤー重ねを利用してのものが過去にありました。映画「Sillent Hills」のブログパーツなんかはこれと同様の手法だったように思います。
ソースは上記にて配布なさってますので、これでブログパーツの個人開発・配布が進む可能性もないこともないですよね。
うーん・・・すごいです(´･ω･)
■In-Browser Wireframe Prototyping with Frametastic
※動作環境・・・FireFox
適当なディレクトリに解凍したら、中のindexファイルをFireFoxで開きます。パレット上をドラッグするとブロックが作成されます。ブロックはドラッグ＆ドロップで自由に移動させる事が出来ます。サイズの指定変更はキーボードの「R」で。
でもこれ・・・どうやってファイルに吐き出して保存するんだろ？
それはともかくとして、ちょっとレイアウト考える時に便利です。
2006/10/03：追記
Versionが上がって「v」キーでソースが表示されるようになりました。Ctrl＋C でコピーしようとすると、ボックスの複製機能が働いてしまいますので、右クリックからのコピーで使うと良いです。ソースを貼り付けると見事にそのまま再現されます。
[参考記事]
■Lucky bag::blog [Lucky bag::blog]