タグ

ブックマーク / 3ping.org (3)

  • CSSの実装状況で変わるボックスのデザイン方法

    Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない1つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

  • Photoshop スタイル[2] - 3ping.org

    #team-oneでRayにPhotoshopのアクションを交えたスタイルを幾つか貰いましたので紹介します。ハイライトやシャドウが、真黒メディアサイトに使われているボタンやバナーに限りなく近く作られているのが特徴です。 エフェクトは3種類、画像の四隅を角丸にし、ハイライトとシャドウを入れるClipping Actionと、さらにそこにグラデーションハイライトをいれたCrystalFrame Action、テキスト(など)用のCrystalLetter Actionです。 Clipping Action 写真や画像をボタンひとつで角丸にし、ハイライトとシャドウを入れてくれるという超便利アクション。 エフェクトをかけたい写真や画像が背景になっていて且つ、背景意外のレイヤーが無い状態でアクションを実行します。(写真や画像を読み込んだ直後を想定して作られているため) 上の状態で、アクションパネルか

  • CSS のコメントの書き方コレアレ

    CSSHTMLと同じように、ソース中にコメントを挿入することができます。 /*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。 適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハックなんかも、適用させるブラウザ名や理由などをきちんとコメントで書いておきたいですね。 僕は、スタイルをグループに分けて記述するときなど、コメントを目立たせるために次のように記述しています。 /* ------------------------------ Header ------------------------------ */ div#header { } . . /* -------

  • 1