斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！
使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。
斜線
市松模様
ストライプ
あと、Photoshop で開いてパターンに登録しておくのも良いかも。
Comments
僕がようやるのは、
パターンをPhotoshopに登録。その際に、白い部分は透明なレイヤー状態で登録する。
んで、色を変えたいな～というときはレイヤースタイルのカラーオーバーレイで着色。
すると、透明部分は色が付かないので。
ってのもアリだと思います。このケースだとPhotoshopもいらないから便利そうですね＾＾
さっそく使いますっ。
ありがとうございます。じゃんじゃん使ってください :-)
ちなみに、カラーオーバーレイでパターンに着色って出来ましたっけ？
あれ、もしかして僕、勘違いしてます？
初めまして＾＾
華と申します。
とても便利な透過GIFをお借りしました。一番気に入っているのは、市松模様の2pxのです。
これを使うと、背景がとっても可愛くなってすごくいいです＾＾
ありがとうございました。
WEBデザイナーになりたくて、あれこれ勉強中なのですが、いろんな記事を見せていただいて、
とても参考になります。
これからも一読者として通わせていただきますね＾＾
華 さん、はじめまして。
お役に立てたようで、嬉しいです。
あ、ちなみに、バッドノウハウな記事が多々あるので、参考はほどほどに ;-)
はじめまして。まいまいと申します。
近頃、CSSレイアウトに悪戦苦闘してるものです。
言われてみれば当然ですが、目からウロコですね。
このテクニックは。
有益な記事がたくさんあるので、じっくり読ませていただきますね。
たくさんの記事を読んだりして
自分なりの指標みたいなものができつつありますが
場数を踏んでいないので、考える参考にしたいと思います。
まだ、思考中なのですが
有益なテクニックや読むべき記事などを集めたリンク集のようなものを作ろうと思っています。
その際には、このページを引用がわかる形で紹介させていただきますね・
他のページも参照させていただくかもしれません。
では、また、足跡を残しに参ります
まいまい さん、はじめまして。
>有益なテクニックや読むべき記事などを集めたリンク集のようなものを作ろうと思っています。
おー、素晴らしいですね。
引用にしろリンクにしろ、特に連絡は必要はないので、お役に立てるような記事があればどんどん使ってやってください :-)
早速ながら活用させていただきました。
ありがとうございます！
多くのサイトがアフィエリエイトメインで情報ないですが、
このようなすばらしい情報があると助かります。
わがサイトでも頑張っていきます☆
はじめまして。あきと申します。
HP作成はまだまだ初心者ですが、
デザイナーと言えるようになるべく日々勉強中です。
でもほとんど素人なもので、CSSっていったい…の状態です。
背景に斜線を入れたいと思いながら検索していたときに
こちらのサイトを見つけました。
いろーんなサイトを見ては挫折を繰り返していたのですが、
こちらのサイトはとっても分かりやすく、設定も成功しました。
ほかの記事も参考にさせていただきます ＾＾
ありがとうございました。