個別記事

前後の記事

背景画像に使える透過 GIF

この記事が属するカテゴリー
CSS

斜線やストライプの背景画像を 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 で開いてパターンに登録しておくのも良いかも。

2006-09-05T20:47:51+09:00 | コメント (8) | トラックバック (3) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/391

このリストは、次のエントリーを参照しています: 背景画像に使える透過 GIF:

天敵Wiki (PukiWiki/TrackBack 0.3) さんからのトラックバック
sekizuka
sekizukaは概ね、天敵Wiki管理人２である関塚と同一人物です。 Sekizukaも同様です。（さて、大文字小文字でautolink変わるかな？→影... [続きを読む]
2006年09月29日 10:29
デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記 さんからのトラックバック
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる
この方法を使えば透過PNGをIE6以下のバージョンで綺麗に表示することができるので、デザインの幅もグッと広がることだと思うのですが。。。問題は。。。この方... [続きを読む]
2007年01月18日 02:15
天敵Wiki (PukiWiki/TrackBack 0.3) さんからのトラックバック
Sekizuka/チラシの裏
sekizukaの下書き用ページ、、、基本的にsage進行で深く静かに潜行予定 ページ名の由来はこちら。 迷ったら整形ルール 留意ページ 食品衛... [続きを読む]
2007年03月12日 12:03

コメント

くぼっち さんからのコメント

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

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

2006年09月06日 23:18
e-luck さんからのコメント [TypeKey Profile Page]

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

2006年09月07日 21:10
華 さんからのコメント

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

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

2006年09月10日 19:12
e-luck さんからのコメント [TypeKey Profile Page]

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

2006年09月11日 21:26
まいまい@Web標準にアプローチ さんからのコメント

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

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

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

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

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

2006年09月18日 17:56
e-luck さんからのコメント [TypeKey Profile Page]

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

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

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

2006年09月19日 19:54
ホームページでデビュー さんからのコメント

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

ありがとうございます！

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

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

2006年10月14日 16:43
あき さんからのコメント

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

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

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

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

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

2006年11月30日 20:47

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)