DesignWalker » background

背景にインパクトのあるウェブデザインいろいろ

admin — Tue, 24 Jun 2008 04:42:21 +0000

最近では、ヘッダ部分や、サイト全体の背景にインパクトのあるイラストや、画像などをど〜んっと使っているサイトが多いような気がします。

今回は、バックグラウンドにインパクトのあるウェブデザインをまとめてみました。

まずは、イラスト編です。絵心のあるかたは、イラストを描いて、バックグラウンドに配置するとかなりインパクトのあるサイトが出来そうですね。

イラスト編

Air Canada’s enRoute Student Film Festival

SketchBlog

Personal space of Dries Schaballie

Web Designer Wall

Ma.tt

BootB

Marchand de Trucs, magasin de magie

Biola Undergrad

Pointless Ramblings

edu.tnvacation.com

Antiphrasis

Kulturbanause

Satsu Design

Viget Labs

Squawk

Portfolio of Adit Shukla

Richard McCoy

Neweracaptalk

絵心はなくっても、Photoshopで写真をコラージュしたり、ブラシを使ったりすれば、これまたインパクトのあるバックグラウンドが作れそう。

コラージュ編

Springtime in Tennessee

singularityconcepts.com

Peminoz

Radu Ceucă

B.N.WEISS

Dirty Pretty Things

Viget Labs

Dara’s Garden

Yeahstyle Graphic Design

Edgepoint Church

Here’s Life Mission Africa

Pikaboo

electricurrent / raise your voice

Graphics.net

Billy Hughes at War

olliekav.com

Breeze

Fall in Tennessee

Jamie Oliver

Timothy van Sas

Moderno Prometeo, escrito por Rolando Hernandez

Cheb 2.0 Web Design blog

The Horizontal Way

St. Gregory’s of Nyssa Episcopal Church

Summertime in Tennessee

この手のウェブデザインは、ぼ〜っと眺めているだけでも楽しいですよね。

背景パターンいろいろ

admin — Wed, 23 Jan 2008 18:57:58 +0000

以前、このブログでもご紹介した『サイトの背景画像を変える時に使える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

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

透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる

admin — Wed, 27 Dec 2006 18:06:47 +0000

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

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

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

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

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

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

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

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

test

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

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

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

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

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

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

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

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

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

関連ブログ