Scriptが使えないブログを利用されている方や、これ以上Scriptを増やしたくない。

でも、いろいろ挑戦してみたい。って方には、便利かもしれません。

以前『ちょっと便利なCSS Tips いろいろ』で、既にご紹介したものもありますが…

今回は、Scriptを使わないCSSエフェクトやTipsをいろいろとまとめてみました。

Scriptを使わなくても、結構いろいろ出来てしまうんですね。

Pure CSS Animated Progress Bar

アニメーションGIFとCSSを使って作るプログレスバーです。とってもきれいですね。

add a loading icon to your larger images

大きな画像を読み込む前に、背景にローディングの画像を配置しておくTipsです。

How to Create Flick Animations with CSS

JavaScriptを使わずに、CSSと複数の画像でアニメーションが作れます。

CSS Image Maps

CSSを使って、イメージマップが作れます。

Resizing Thumbnails Using Overflow Property

サムネイル画像にマウスオーバーすると、画像が大きく表示されます。

Pure CSS LightBox

Scriptを使わないLightboxです。

CSS-Only Accordion Effect: Vertical Accordian

CSSだけでアコーディオンのエフェクトが作れます。

lixlpixel CSS tooltips

マウスオーバーするとツールチップが表示されます。

Create a Lightbox effect only with CSS – no javascript needed

こちらもLightboxエフェクト。テキストなどもポップアップさせることが出来ます。

CSS-only Drop-down Menus

ドロップダウンメニューもCSSだけで。

Menus – Multi-Level CSS Only

CSSplayはとっても有名ですね。。

Pure Css Data Chart

グラフも作れます。

http://applestooranges.com/blog/post/css-for-bar-graphs/

こちらもバーグラフ。

Vertical scrolling tables

ヘッダー部分を固定して、データ部分をスクロールさせる事が出来ます。

footerStickAlt

Footerをページの最下部に固定させる方法。

CSS sticky footer

こちらもFooterをページの最下部に固定させる方法。

CSS Gradient Text Effect

テキストに、透過PNGをかぶせて、光沢のあるテキストエフェクトを。

本日は、ちょっぴり便利かな～っと思うCSS Tipsをいろいろご紹介。

既に、ご存知のものも多いかもしれませんが・・・

1. Image map for detailed information

FlickrみたいなImageMapが作れます。

2. How to Create Flick Animations with CSS

JavaScriptを使わずに、CSSと画像でアニメーションが作れます。

3. FACE: Faruk’s Animated CSS Enhancements

JavaScript と CSSを使って、とってもきれいなアニメーションが作れます。

4. CSS Gradient Text Effect

コリスさんの記事でも紹介されていた、テキストにグラデーション効果をつけるスタイルシートです。

5. css: add a loading icon to your larger images

重たい画像を貼り付けるときは、ローディングイメージを背景に設定しておくと便利かも。

6. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

Crazy Eggで使われているような、ひとつのカラムを強調したように見せるチュートリアル。

7. How to make sexy buttons with CSS

とってもセクシーなボタンが作れます。

8. Checkmark Your Visited Links with Pure CSS

訪問済みリンクにチェックマークがつきます。IE6ではサポートされていませんが・・・

9. footerStick

フッターを常にページの最下部にくっつけることができます。

10. CSS Dock Menu

jQueryとCSSを使って、MacのDockMenuっぽい効果が出せます。

11. Create a Lightbox effect only with CSS – no javascript needed

JavaScriptを使わずにLightboxっぽいエフェクトが出せます。

気に入ったものがあれば、お試しください～。

みなさん。あけましておめでとうございます。

年初めに、今年の豊富や目標などを設定される方は多いのではないでしょうか？

Zen Habitsさんのブログで『7 Essential Tips to Make 2008 Your Best Year Ever』というエントリを読んで、なんだか妙に納得してしまったので、自分に言い聞かせるつもりで、超訳してご紹介。

1. 目標は一つに
気合を入れすぎて、あれもこれもと目標をたくさん設定してしまうと、どれもが中途半端になってしまいます・・・今年の目標は思い切って、一つに絞ってみてはいかがでしょうか？

ああ。どれにしようかなぁ・・・

2. あたらしい習慣を身につけよう
設定した目標を達成するための習慣を身につけましょう。例えば、『英語をマスターする』という目標を設定した方は、毎日の通勤・通学に英語のリスニングをするとか。

日々の努力が必要ですね・・・

3. 今すぐ行動を起こそう
『明日から～』なんて言ってると、いつまでたっても始まりません。目標を達成するには、とにかく、始めてしまいましょう。

放ったらかしのものが、たくさんあります・・・

4. 単純に・簡単に
あまり物事を難しく考えすぎると、それだけで潰されてしまいます。もっと単純に・簡単に考えましょう。自分の人生の中で最も大切な事柄を4～5個リストアップしてみるのもいいかも。

難しく考えすぎてよく潰されてます・・・

5. 幸せになることに集中しよう
微妙に怪しげな言い回しですが。。。自分の人生を見つめなおすきっかけにでも。

幸せにねぇ・・・

6. 時間を上手に使おう
自分の好きなことに打ち込めるように、時間を上手に使いましょう。

なかなか、そんな時間がないんです。時間を作りましょう・・・

7. 集中することを学びましょう
ひとつのことに集中する時間を作りましょう。携帯電話など集中を妨げる可能性のあるものは、その間、電源をきってしまったりして工夫しましょう。

すぐに電池が切れてしまいます・・・

当たり前の事ばかりなのですが、なかなか続かないんですよね。

現在、とあるプロジェクトでロゴを制作しておりまして、いろいろと参考になりそうなものを調べていると、
アルファベットを使ってロゴを作るときに参考になりそうな、見せ方のTipsをうまくまとめられている
“Strategies for Letter-based Logo Design“というページを発見したので、その中から、10のTipsを実際の企業のロゴと共にご紹介。。

1. 縦のラインであわせる
以下のように、縦のラインで二つの文字をあわせる。

↓のJRのロゴは、まさにそうですね・・・

2. 文字の一部を切り取ってあわせる
うまく、あわさらない場合は、文字の一部を切り取ってあわせるのもいい感じ。

↓のAIWAのロゴは、WとAをきれいに組み合わせていますね。

3. あたまであわせる
文字のあたまの部分であわせてみても。

↓の村田製作所のロゴは、下のラインでつながってます。。逆か・・

4. 真ん中であわせる
真ん中のラインを使って合わせる方法ですね。

↓のタイガー魔法瓶のロゴは、GとEが真ん中のラインでつながってますね。

5. 文字を反転させる
色を変えたり、反転させてあわせると面白い効果が出せそう。

↓のセコムのロゴは、色が変わってる。う～ん苦しくなってきた・・・

6. 文字をクロップする
文字の一部をクロップするのもいいですね。あまりやりすぎると読めなくなるのでやりすぎに注意ですが・・・

↓のkubotaのロゴは、うまくクロップされていますね。

7. ラインを入れる
ラインを使うと、つながりがはっきりしますね。

↓のCNNのロゴは、まさにラインでつながってます。

8. 連結させる
知恵の輪みたいに、文字を連結させたり、通してみたり。。

↓のコカ・コーラのロゴは、CがLのなかをきれいにくぐりぬけてますね。。

9. 置き換える
文字の一部を置き換えたり、空いたスペースを埋めたり・・・

↓のJALのロゴは、Aの横のラインを置き換えてポイントになってますね。。

10. 半透明を使う
アルファを使って、文字を重ね合わせてみても。。。

日本の方にはあまりなじみが無いかも・・・↓のポルトガル航空のロゴは、アルファを使って文字を重ね合わせてますね。

っと、今回はアルファベットを使ってロゴを作るときの見せ方に重点を置いたTipsをご紹介しました。。”Strategies for Letter-based Logo Design“では、他にもいくつか使えるTipsがご紹介されているので、興味のある方はどうぞ～。。

そろそろ、デジカメを買いなおそうかと思っている今日この頃。

今使ってる、SonyのCyber-shotはもうすぐ満4歳になります・・・。

購入当時は、なかなか気に入っていたのですが。。なんだか重いし、解像度もそれほど高くないし・・・

きれいな写真撮れないし。。

っと最近ではカメラのせいにしております。。

きれいな写真を撮るには、もちろんカメラの性能も十分に関係してると思うのですが、そのカメラを操っているわたくし自身にも問題があるあるわけですよね。。

っちゅうわけで本日は、よりよい写真を撮る方法をまとめてみたのでご紹介。

1. 三分の一の法則

写真を撮るとき、その被写体をど真ん中に撮ってしまいがちですよね。。画面の上下左右を三分割して四つの交点を作って、その交点に主要な要素を置くとバランスのいい写真が撮れるみたい。。上の写真のように、人をとる場合なんかは、その人が向かってる方向にスペースを作ってあげるといい感じの写真が撮れそうですね。

2. 対角線

まっすぐしたものを撮る場合は、思い切って斜めに撮ってみるとダイナミックな感じが出ていいですね。

3. バランス

三分の一の法則とも、かぶりますが・・・上の写真のように、背景が空のようなシンプルなものであればあるほど、構図が難しくなりますね。。そんな場合は、片側一方にバランスをかけて、崩してみると面白い写真が撮れるかも。

4. 黄金の法則

辺の長さが黄金比（1 : 1.618…）になる四角形の中に正方形をうめて、それぞれの点を滑らかに結んでいくと螺旋状になります。

この螺旋にあわせて、写真を撮るとバランスのいい写真が撮れますね。。。（意識的に撮るには修行が必要？）

5. コントラスト

陰になる暗い部分と、明るい部分を上手く調節すると、きれいな写真になりますねぇ。。。

6. 複雑性

絵を描くのとは違って、シンプルなものを撮るのも、複雑なものを撮るのも、シャッターを切るだけですね。。思いっきり、ごちゃごちゃした写真を撮るのもいいかも。

7. 奥行き

上の写真のような奥行きがある写真はすごくきれいですよね。道路や線路など、遠くまで続いているものを撮る時はいい感じ。

8. アングル

普段、生活していて人が見ないようなアングルから写真を撮ると、同じものでも、また違って見えますね。すこしかがんでみたり、高いところから、見下ろしてみたり、いろんなアングルから試してみるのも面白そう。。

なんだか、写真がちょっと上手くなった気分。。

日本語で読める関連記事
「ひとつ上の写真。」を撮るためのちょっとした8つのコツ（構図編） POP*POP
躍動感あふれる写真を撮るためのちょっとしたテクニック POP*POP
写真を撮る時に5kg痩せて見える5つのテクニック ネタフル
初心者向けのやさしい写真撮影講座「撮れルンです！」 ネタフル