背景画像に使える透過 GIF

斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた!

使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。

斜線

oblique-line_1px.gif
斜線 1px のサンプル
oblique-line_2px.gif
斜線 2px のサンプル

市松模様

check_1px.gif
市松模様 1px のサンプル
check_2px.gif
市松模様 2px のサンプル

ストライプ

stripe_1px.gif
ストライプ 1px のサンプル
stripe_2px.gif
ストライプ 2px のサンプル
stripe_3px.gif
ストライプ 3px のサンプル

あと、Photoshop で開いてパターンに登録しておくのも良いかも。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/20

天敵Wiki (PukiWiki/TrackBack 0.3) - sekizuka (2006年9月29日 10:29)

sekizukaは概ね、天敵Wiki管理人2である関塚と同一人物です。 Sekizukaも同様です。(さて、大文字小文字でautolink変わるかな?→影... 続きを読む

デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記 - 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる (2007年1月18日 02:15)

この方法を使えば透過PNGをIE6以下のバージョンで綺麗に表示することができるので、デザインの幅もグッと広がることだと思うのですが。。。問題は。。。この方... 続きを読む

天敵Wiki (PukiWiki/TrackBack 0.3) - Sekizuka/チラシの裏 (2007年3月12日 12:03)

sekizukaの下書き用ページ、、、基本的にsage進行で深く静かに潜行予定 ページ名の由来はこちら。 迷ったら整形ルール 留意ページ 食品衛... 続きを読む

WebGuidance - cssを使って背景画像を入れてみました (2010年4月 2日 20:17)

CSSを使って背景画像を設置する方法を紹介します。これまでは白地だったのですが、シンプル過ぎると思い、自己満足ですが斜線の透過GIF画像を使いながら色をつ... 続きを読む

Comments

くぼっち said:

僕がようやるのは、
パターンをPhotoshopに登録。その際に、白い部分は透明なレイヤー状態で登録する。
んで、色を変えたいな~というときはレイヤースタイルのカラーオーバーレイで着色。
すると、透明部分は色が付かないので。

ってのもアリだと思います。このケースだとPhotoshopもいらないから便利そうですね^^
さっそく使いますっ。

e-luck said:

ありがとうございます。じゃんじゃん使ってください :-)
ちなみに、カラーオーバーレイでパターンに着色って出来ましたっけ?
あれ、もしかして僕、勘違いしてます?

華 said:

初めまして^^
華と申します。
とても便利な透過GIFをお借りしました。一番気に入っているのは、市松模様の2pxのです。
これを使うと、背景がとっても可愛くなってすごくいいです^^
ありがとうございました。

WEBデザイナーになりたくて、あれこれ勉強中なのですが、いろんな記事を見せていただいて、
とても参考になります。
これからも一読者として通わせていただきますね^^

e-luck said:

華 さん、はじめまして。
お役に立てたようで、嬉しいです。
あ、ちなみに、バッドノウハウな記事が多々あるので、参考はほどほどに ;-)

はじめまして。まいまいと申します。
近頃、CSSレイアウトに悪戦苦闘してるものです。

言われてみれば当然ですが、目からウロコですね。
このテクニックは。

有益な記事がたくさんあるので、じっくり読ませていただきますね。
たくさんの記事を読んだりして
自分なりの指標みたいなものができつつありますが
場数を踏んでいないので、考える参考にしたいと思います。

まだ、思考中なのですが
有益なテクニックや読むべき記事などを集めたリンク集のようなものを作ろうと思っています。
その際には、このページを引用がわかる形で紹介させていただきますね・
他のページも参照させていただくかもしれません。

では、また、足跡を残しに参ります

e-luck said:

まいまい さん、はじめまして。

>有益なテクニックや読むべき記事などを集めたリンク集のようなものを作ろうと思っています。

おー、素晴らしいですね。
引用にしろリンクにしろ、特に連絡は必要はないので、お役に立てるような記事があればどんどん使ってやってください :-)

早速ながら活用させていただきました。

ありがとうございます!

多くのサイトがアフィエリエイトメインで情報ないですが、
このようなすばらしい情報があると助かります。

わがサイトでも頑張っていきます☆

あき said:

はじめまして。あきと申します。

HP作成はまだまだ初心者ですが、
デザイナーと言えるようになるべく日々勉強中です。
でもほとんど素人なもので、CSSっていったい…の状態です。

背景に斜線を入れたいと思いながら検索していたときに
こちらのサイトを見つけました。

いろーんなサイトを見ては挫折を繰り返していたのですが、
こちらのサイトはとっても分かりやすく、設定も成功しました。

ほかの記事も参考にさせていただきます ^^
ありがとうございました。