DesignWalker » バックグラウンド http://www.designwalker.com ロサンゼルスで働くウェブデザイナーの日記。 Wed, 29 Jun 2011 06:24:51 +0000 ja hourly 1 http://wordpress.org/?v=3.0 背景パターンいろいろ http://www.designwalker.com/2008/01/background-pattern.html http://www.designwalker.com/2008/01/background-pattern.html#comments Wed, 23 Jan 2008 18:57:58 +0000 admin http://new.designwalker.com/2008/01/%e8%83%8c%e6%99%af%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%81%84%e3%82%8d%e3%81%84%e3%82%8d.html

以前、このブログでもご紹介した『サイトの背景画像を変える時に使える7サイト』と『ストライプジェネレーター5つ』

背景パターンはいろいろと重宝しそうです。

本日は、これまでご紹介したサイト以外の背景パターン・サイトをいろいろご紹介（なかには有料のものもありますが…）

1. everyday icons Playground

2. Kollermedia.at – The Website of the Freelancer Koller Jürgen » Pattern4u

3. Shizoo – einfach mal Design haben

4. DinPattern

5. Free Photoshop Brushes at Brusheezy!

6. Naked & Angry

7. DROMOSCOPIO . milleseicentopercento . LIBRERIA DI PATTERN

8. Citrus Moon Patterns

9. Miss Jo

10. PatternHead

11. Texturen jeglicher Art | Alice Grafixx

12. 3Quarks – Background Pattern

13. Tartan Maker

まだまだ、いろいろありそうですね。。

]]> http://www.designwalker.com/2008/01/background-pattern.html/feed 0 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる http://www.designwalker.com/2006/12/transparent-png2.html http://www.designwalker.com/2006/12/transparent-png2.html#comments Wed, 27 Dec 2006 18:06:47 +0000 admin http://new.designwalker.com/2006/12/%e9%80%8f%e9%81%8epng%e3%82%92css%e3%81%a7%e8%83%8c%e6%99%af%e3%81%ab%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%a6ie6%e3%82%8455%e3%81%ae%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e3%81%a7%e3%82%82.html

先日ご紹介した、「透過PNGをIE6以下のバージョンで綺麗に表示する方法」というエントリーなんですが・・・

意外なほどにアクセスがあり、ありがたいことに、現在このブログの一番の人気エントリーになっております。。。

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

この方法では、imgタグに入れられたPNGファイルのみに有効なため。。。上に文字をのせたりすることができませんでした。。。

っちゅうわけで、透過PNGをCSS（スタイルシート）の背景画像としてあつかえたら、さらにさらに便利やのになぁ～。。。なぁ～んて”韓流”プログラマのユンサンにお話してみたところ。。。

ちょいちょいと作ってくれました～！！！

「透過PNG と IE と IE7」
っという、なんだか、「部屋とYシャツと私」的なタイトルのエントリーでご紹介されております！！

このスクリプトを使いますと。。。

test
こんな感じでCSSでPNGを背景に指定してもIE6でも綺麗に表示されます！！

ちゅうわけで、肝心のやり方のご説明。（プログラマな方は韓流”プログラマのユンサンの方からどうぞ）

1. iepngfix.jsっちゅうスクリプトをダウンロードしてサーバにアップロード（右クリックで対象を保存で。）

2. 透過PNG画像を表示したいhtmlの<head>から</head>の間に

<script language=”JavaScript” type=”text/javascript” src=”iepngfix.js”></script>

って書いてiepngfix.jsを読み込みます。

3. CSS（スタイルシート）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。

* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}

（赤字の部分はPNG画像を指定したクラス名、もしくはID名を）

これで、IE6や5.5のバージョンでも綺麗に透過PNGを、CSS（スタイルシート）で操ることができますね～！

関連ブログ


]]> http://www.designwalker.com/2006/12/transparent-png2.html/feed 29 CSSのバックグラウンド画像をランダムに表示してみる http://www.designwalker.com/2006/12/random-css.html http://www.designwalker.com/2006/12/random-css.html#comments Wed, 20 Dec 2006 18:32:09 +0000 admin http://new.designwalker.com/2006/12/css%e3%81%ae%e3%83%90%e3%83%83%e3%82%af%e3%82%b0%e3%83%a9%e3%82%a6%e3%83%b3%e3%83%89%e7%94%bb%e5%83%8f%e3%82%92%e3%83%a9%e3%83%b3%e3%83%80%e3%83%a0%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%a6.html

CSSを使うようになって、画像はCSSのbackground-imageで画像を表示することが多くなりました。

例えば、ブログのヘッダー部分で表示しているバックグラウンド画像をランダムに表示できたら、
ブログ訪問者がアクセスするたびに画像を切り替えることができますよねぇ。。。

何度もアクセスしてくれるブログ訪問者さんにはブログの画像をコロコロと変えられるので、ブログ訪問者さんを飽きさせることもなくて便利やなぁ～。。。

なぁ～んて思ってたら、やっぱりございました。

↓この画像はアクセスするたびにコロコロと変わりますねん（１１種類用意しました。）

っちゅうわけで、今日は↑のようにCSSとphpでバックグラウンド画像をランダムに表示する方法をご紹介じゃ。

1. ここから、rotator.zipを保存してくださいな。

2. 保存したrotator.zipファイルを解凍したら、「rotator」っちゅうフォルダの中に「rotator.php」っちゅうファイルがあるはずです。そのファイルをフォルダごと、サーバーにアップロード。

3. アップロードしたrotatorフォルダの中にjpg画像、gif画像、png画像、とにかくランダムに表示したい画像も一緒にほり込んでくださいな。

4. CSS（スタイルシート）に以下のスタイルを追加。

5. 最後に表示したいhtmlに

<div id=”rotator”></div>

って書けば、そこにバックグラウンド画像がランダムに表示されるはずでございます。


]]> http://www.designwalker.com/2006/12/random-css.html/feed 8